I’m working on a mobile project where I need to dynamically populate a scroll view with UI elements. My goal is to achieve a scrolling experience similar to TikTok, where each element fills the screen.
Currently, I’m instantiating the UI elements, scaling them to the screen’s pixel dimensions, and then adding them to the scroll view. This works fine when the UI’s scale mode is set to “Constant Pixel Size.”
However, for mobile development, I’d prefer to use a “Scale with Screen Size” mode. Is there a way to scale UI elements within a scroll view to occupy the full screen on various devices while using the “Scale with Screen Size” mode?
Technically, in the layout you should be able to use size in percentage or flex-shrik/grow to the the adjustments. Using that with the image component to preserve the aspect ratio should be enough, but you could also use the geometry change event on the element to set the height based on the width for example.
This should work independently from the the scaling of the panel.
If you want to have a fixed width horizontally you could use move the slider in the panel setting to match entirely the “reference width” to the width of the screen, but I would suggest using the other mean of scaling as it would allow you to change the panel setting configuration later on.
foreach (VisualTreeAsset visualTreeAsset in learnTextList)
{
TemplateContainer learnScreenContainer = visualTreeAsset.Instantiate();
learnScreenContainer.style.width = new StyleLength(new Length(100, LengthUnit.Percent));
learnScreenContainer.style.height = new StyleLength(new Length(100, LengthUnit.Percent));
uiDocument.rootVisualElement.Q<ScrollView>("ScrollView").Add(learnScreenContainer);
learnTextElements.Add(learnScreenContainer);
}
Unfortunately, the result in play mode looks like the image. For testing, I’m simply instantiating an empty VisualElement with a background color and a colored border. (The three elements are at the top)
Oh this is a frequent problem, by default the size the element has a width/height of auto. This make the layout use the the “intrinsic size” meaning it occupies the space that is the sum of all it’s children. But when children have their size defined in percentage of their parent size it make a recursive loop that is quite undefined.
When using percentage, you have to make sure the parent does not use it’s intrinsic size by setting it’s width or height as percentage or in pixels. I think you could also uses flex-grow/stretch to achieve this, but there is more value involved, but the nice thing is that it preserves the intrinsic size properties unlike setting an explicit width/height
You can use the UI debugger to “prototype” quickly the required change in styling and see witch parent does not fill the full content first in the hierarchy.
,
