[SOLVED] Trying to create a dynamic scroll view

I am trying to create a dynamic scroll view, from a tutorial, but can’t see the content to show when it is instantiated into the scroll list.


The orange panel is the GameObject that i am trying to display in the list. The position marker is the orange object in the list.


Here is the Hierarchy, with the selected orange object


Panel is the orange object.

Here is the code:

using UnityEngine;
using System.Collections;
using System.Collections.Generic;
using UnityEngine.UI;


public class ScrollList_Script : MonoBehaviour {

    public GameObject itemPrefab;
    public int itemCount = 10, columnCount = 1;

    void Awake () {

        RectTransform rowRectTransform = itemPrefab.GetComponent<RectTransform>();
        RectTransform containerRectTransform = gameObject.GetComponent<RectTransform>();
   
        //calculate the width and height of each child item.
        float width = containerRectTransform.rect.width / columnCount;
        float ratio = width / rowRectTransform.rect.width;
        float height = rowRectTransform.rect.height * ratio;
        int rowCount = itemCount / columnCount;
        if (itemCount % rowCount > 0)
            rowCount++;
   
        //adjust the height of the container so that it will just barely fit all its children
        float scrollHeight = height * rowCount;
        containerRectTransform.offsetMin = new Vector2(containerRectTransform.offsetMin.x, -scrollHeight / 2);
        containerRectTransform.offsetMax = new Vector2(containerRectTransform.offsetMax.x, scrollHeight / 2);
   
        int j = 0;
        for (int i = 0; i < itemCount; i++)
        {
            //this is used instead of a double for loop because itemCount may not fit perfectly into the rows/columns
            if (i % columnCount == 0)
                j++;
       
            //create a new item, name it, and set the parent
            GameObject newItem = Instantiate(itemPrefab) as GameObject;
            newItem.name = gameObject.name + " item at (" + i + "," + j + ")";
            newItem.transform.parent = gameObject.transform;
       
            //move and size the new item
            RectTransform rectTransform = newItem.GetComponent<RectTransform>();
       
            float x = -containerRectTransform.rect.width / 2 + width * (i % columnCount);
            float y = containerRectTransform.rect.height / 2 - height * j;
            rectTransform.offsetMin = new Vector2(x, y);
       
            x = rectTransform.offsetMin.x + width;
            y = rectTransform.offsetMin.y + height;
            rectTransform.offsetMax = new Vector2(x, y);
        }
   
   
    }


}

PROBLEM SOLVED
I finally found the problem by changing line 40 to:

newItem.transform.SetParent(gameObject.transform, false);

:slight_smile:

2 Likes

Yes, the parenting of UI elements can be a bugger at times :smile:

Just check the Editor menu scripts for either the UI (https://bitbucket.org/Unity-Technologies/ui/src/fd5d3578da8c33883b7c56dd2b2f4d4bbc87095b/UnityEditor.UI/UI/MenuOptions.cs?at=4.6) or in the UI Extensions project (link in sig) and you’ll see how much efforts is needed to align UI in code (especially with fixed anchors)

Wouldn’t it be a bit easier (=less code)to use layout group functionalities? It seems you used the code from the splendid dynamic list youtube tutorial; I used that myself as well. At some point I noticed I could replace most of the code by using layout groups/elements which made the overall code much cleaner while retaining pretty much the same functionality.

Edit: Link to documentation

1 Like

You are correct, that is what i use! Would you happen to have some examples?

Oh in that case I just completely misunderstood your issue :smile:

(I was going to say check the learn tuts, but there isn’t one for layout)
Watch @Adam-Buckner_1 's lists live training video, which has many great tips Recorded Video Training: Shop UI with Runtime Scroll Lists - Unity Learn

It is strange looking and not finding anything on layouts.

Put simply though, you just need to add a “Vertical Layout Group” on your pnl_Content GO and it will automatically organise all the child elements within it’s RectTransform area.
By default it will stretch all children to layout uniformly in the area, if you don’t want that add LayoutElement components to each of the children and set their preferred height, then disable the “Force Child Expand” option on the group.

Hope this helps.
The layout groups are VERY easy to use to lay things out.
(Don’t forget to disable the script above :P)

great thanks :slight_smile:

There is this in the documentation: Redirecting to latest version of com.unity.ugui

… but it is true there are not examples with this.

@SimonDarksideJ does link to the best documentation I’ve done which is the live training.

I also use layout groups in the modal window lessons… but I could do an assignment for that as well.

1 Like

That being said, there are UI how-to’s that can be helpful:
http://docs.unity3d.com/Manual/HOWTO-UIFitContentSize.html
http://docs.unity3d.com/Manual/UIHowTos.html

2 Likes

BIG thank you

Sounds like a dedicated “layout” session is called for @Adam-Buckner_1 :smile: (or a good book :P)

Now @SimonDarksideJ you keep mentioning this “book”, are you writing one? Know of anybody who is?

The book is your problem, Simon!

If anything, I’ll write one on coding for unity.

Well my signature kind of gives that away a bit @Ramcat :smile:

Definitely need more “Best practices on coding in Unity” books @Adam-Buckner_1 , Talk to Will, he’ll get you plugged in.
My first title made a start, tag you’re it!

Thanks That fixed my problem too

1 Like

Hi. We’ve ran into the same issue and developed our own utility that greatly increases performance.
It’s on asset store: Unity Asset Store - The Best Assets for Game Making
EDIT 27.08.2016: happy to announce V2.0 is out, improved and with horizontal scrolling support: Optimized ScrollView Adapter | GUI Tools | Unity Asset Store

1 Like