Dynamic Scroll View (Panel) - Reposition Items in Place

[michelhabib]

Hello,
I am creating a UI similar to Angry Birds in concept, which has a list of Chapters, and each chapter has a list of Levels.
And they are populated using the Scroll View (Panel).
Since this is done with the code at runtime, i am having a problem when creating the list of levels [not the chapters], the levels do not fall in place within the clipping rigion of the UIGrid.
I have tried using the Reposition Function of the UIGrid, and the ResetPosition Function of the UIDraggablePanel, but nothing could put back these items in place.
Any hints?

[PhilipC]

I'm guessing you mean Angry birds rio ui? Something like http://3.bp.blogspot.com/-_vhHT28qK6g/Tin0W5X72TI/AAAAAAAAB9I/bAADKObzhoc/s400/Angry-Birds-Rio-Free.jpg?

Could you attach some screen shots of how exactly its not working (of the scene view and the expanded hierarchy would be good)?

[michelhabib]

in Rio it has both chapters and levels in the same page, i do it differently, i guess its like the old angry birds, where chapters are on one page, and when you click on a chapter it takes you to another page with the levels.
anyways, the way i do this is to have 2 panels, you will see them on the Hierarchy of the attached screenshot.
1- PanelChapters.
2- PanelLevels.
What i do is have the PanelChapters in the camera focus, and when clicking a specific chapter, the levels items will be created dynamically in the PanelLevels Object, and the PanelLevels is animated to move in and PanelChapters is moved out of the camera focus. wherever you see chapter(clone), or level(clone) on the hierarchy it is a level/chapter created dynamically out of a level/chapter object - also can be seen in the hierarchy at the top.

The view you see now is the PanelLevels after selecting a certain chapters. as you can see the levels [in the scene view] appear outside the pink clipping area, i need them to begin at the beginning of the clipping area - or at least have a way to control where they appear by default.

I am expecting the solution would be mainly in the code and not in the hierarcy, but if you know some way to do it that would be great.

i tried a combination of the following 2 functions, but none worked.

1.         var UIGridScript:UIGrid = levelsGrid.transform.GetComponent("UIGrid") as UIGrid;
2.         var dragPanel:UIDraggablePanel = panel.GetComponent("UIDraggablePanel") as UIDraggablePanel;
3.         dragPanel.ResetPosition();     
4.         UIGridScript.Reposition();     
5.  

[ArenMook]

While I am not entirely sure what you're trying to do, assuming your draggable list moves only along X, why not use SpringPanel to move it along Y when you click on one of the items? If your dynamically created list was say, above the current one, you could dynamically populate your secondary (off-screen) list, then use SpringPanel in OnClick to make the current clipped view focus on the new content.

[michelhabib]

Hi Aren,
Let's say i am simply populating an horizontal UI Grid with multiple items, all i need to do is to make sure that right after population all items are repositioned in the panel in the right place and not shifted to the right like they look in the screenshot attached earlier.
You're hinting at using SpringPanel, which i know it is already created on the fly when i move the items around.
Can you give me more info like how to use that in script to automatically move the items to the default position [as if they were statically created]? and i think there could be another solution, SpringPanel seems to be designed for user interaction not for default positioning, i could be wrong though.

[ArenMook]

SpringPanel doesn't move items, it moves the panel. In your you can skip using Springpanel, and instead simply reset the scroll position to the beginning before re-populating your grid with a new set of items.

[michelhabib]

to reset scroll position, which script/variable or function should i use for that??

[ArenMook]

UIDraggablePanel.ResetPosition