Dynamic Positioning relative to new objects.

HI,

I have been searching about this issue on different forums, but couldn't find an exact answer, not even close to hint to do some thing as follows:

I want to create a scrollable list using new unity UI, what I want to do is to get some data (the menu items), menu items consists of two elements a background image and a text (displayed on that background). The text can vary in length.

So I want to create these menu items dynamically, i.e. during runtime. Hierarchy will be as follows

-Panel
----Panel
------Background Image
------Text
----Panel
------Background Image
------Text
----Panel
------Background Image
------Text

for this I have to set the height of background image and panel during runtime. I will use the first panel (the grand parent panel) to achieve scrolling.

While playing with this, I tried to access width and height of panel using script, but wasn't able to do so. Is there another way to achieve this? Or if I am going right, how can I set my menu items dynamically (i.e. access width and height through script) to increase height of the panel and images dynamically?

 

You can use these instead for width and height:

Resizing
- RectTransform.offsetMin
- RectTransform.offsetMax

Positioning
- RectTransform.anchoredPosition

Example:

Code (CSharp):

1. panel.GetComponent<RectTransform>().offsetMin = new Vector2(10f, 10f);
2. panel.GetComponent<RectTransform>().offsetMax = new Vector2(50f, 50f);

 

Actually, if you haven't already tried this, use a LayoutGroup and a ContentSizeFitter on the container. On each item/element you'll most likely want to place a LayoutElement component to customize their size. What I do is make a prefab of the UI button or element and add the LayoutElement to it.

If you're instantiating prefabs (or event a new GameObject) for the scrollable list you'll want to do

Code (csharp):

1. newElement.transform.SetParent(uiContainer, false);
2. newElement.transform.localScale = Vector3.one;

 

I am doing something very similar, I think.

The first thing I would do, is create a prefab for your Panel that contains an Image + Text. Then you can add a script to it that sets the Image and Text directly. Adding a new row would be just about creating a new instance of that prefab, then parenting it to the top panel (like GibTreaty has said).

What are you trying to achieve? If you want to force a size for each row, ContentSizeFitter will make sure it is big enough to hold its content. Alternatively, if all the rows are in a LayoutGroup, you can use a LayoutElement on the Panel and set a minimum size. In that case I would also recommend setting the same value as the preferred size, and setting the flexible size to zero. Otherwise things tend to stretch in awkward ways.

I've not tried to change dimensions at runtime but if I was using a LayoutElement it might be enough just to assign different values to the min/preferred sizes. And if you use a ContentSizeFitter, then just changing the size of the content might help.