How do I procedurally add widgets to a scroll view?

[Erbacher]

Hello,

I am trying to procedurally add widgets (via NGUITools.AddChild adding the button prefabs to the grid) to a scroll view, however currently I am adding them in run-time and the are appearing 10 times bigger than they should within my scene.


My Scroll View panel is within the purple box you can see in the scene view above.


Does anyone know of anything I could be doing wrong?

Thanks for your time,
Erbacher

[ArenMook]

NGUITools.AddChild(parent, prefab) instantiates objects with a scale of (1, 1, 1), parented to the parent you specified to AddChild. You did specify a parent, did you not? Because if you didn't, then it's going to be spawned in the middle of nowhere and the scale is going to be huge.

[Vesuvian]

This is the method we are using to setup the parenting:

1. // Returns a new child object for the given model object
2. public IListerViewChild<ModelType, IdType> newChild(ModelType modelObject)
3. {
4.         GameObject parent = this._getGrid().gameObject;
5.         GameObject prefab = this._childPrefab();
6.         GameObject child = NGUITools.AddChild(parent, prefab);
7.        
8.         IListerViewChild<ModelType, IdType> component = this._setupChildComponent(child);
9.        
10.         component.modelObject = modelObject;
11.        
12.         return component;
13. }

I had expected perhaps we needed to call something like AddWidget on the UIGrid to complete the parenting, but I haven't been able to find anything along those lines in the documentation.

Erbacher had been able to manually scale the buttons to 0.02 to make them appear correctly, however the clipping was wrong and it broke completely when scrolled. Besides, I don't like magic numbers.

The following image demonstrates the NGUI hierarchy in our scene:

[ArenMook]

What you're doing is fine, but you need to tell the grid to reposition its children. Call the UIGrid's Reposition() function.

[Vesuvian]

I have modified the previous method:

1. // Returns a new child object for the given model object
2. public IListerViewChild<ModelType, IdType> newChild(ModelType modelObject)
3. {
4.         UIGrid grid = this._getGrid();
5.        
6.         GameObject parent = grid.gameObject;
7.         GameObject prefab = this._childPrefab();
8.         GameObject child = NGUITools.AddChild(parent, prefab);
9.        
10.         grid.Reposition();
11.        
12.         IListerViewChild<ModelType, IdType> component = this._setupChildComponent(child);
13.        
14.         component.modelObject = modelObject;
15.        
16.         return component;
17. }

However I am now getting this:

[ArenMook]

Positioned, but not drawn? Check the alpha of everything. Alpha is cumulative, so parents affect children. What's supposed to draw your list items?

[Vesuvian]

Do you mean the alpha on the panel? Erbacher says he has checked this and it is set to 1.

I'm sceptical the alpha is the immediate issue here. You can see the transform is set far underneath the scroll view, which suggests to me perhaps the buttons weren't scaled correctly. The tiny scrollbar would also imply that the contents are very wide.

[Vesuvian]

Aren, I have uploaded a stripped version of the project:

www.thisishydra.com/UnityProject.zip

You should be able to load the "client" scene and hit play to see the issues. Please can you confirm that the scroll view is setup correctly?

[Cripple]

Hi,

I have found 3 issues with your setup :

You have an UIPanel for each button which is not good at all, you have to remove it from the prefab. You just need one panel for the ScrollView.

Then your  Grid (with the UIGrid component) must have a position of 0,0,0 and a scale of 1,1,1 (it has a scale of 360 at the moment).
Then you update the CellWidth (for instance 150).

It now works in the scene view.

The final fix to make it work in the game view, is to set the Z value of the scrollview to 0 !

I would like to advice you also to use the new feature of Anchors, you use the deprecated UIAnchor components !

Have fun

[Erbacher]

Hi Cripple,

Thanks for your post mate.

I really, really don't know why the buttons had the UIPanel component, and I really don't understand why the UIGrid scale was set to 360.. Very strange things going on here.

However I fixed all the issues you pointed out and now it works perfectly.

Thank you very much for your time and your answer, and thank you very much as well Aren for your quick replies.

Cheers guys.

[N3uRo]

I really, really don't know why the buttons had the UIPanel component, and I really don't understand why the UIGrid scale was set to 360.. Very strange things going on here.

If you mistakenly drag your prefab outside the NGUI hierarchy, it will create a UIPanel component, it's a common error.

[Erbacher]

Ohhh ok thanks a lot N3uRo I didn't know that

[N3uRo]

Ohhh ok thanks a lot N3uRo I didn't know that

The weird scale it's the same problem. If you create a GameObject outside the NGUI hierarchy and then you drag it inside, it will calculate the corresponding scale and since UIRoot it's below 1 it will scale it accordingly.