More NGUI UIScrollView positioning

So one major problem I’ve run across while implementing the Leaderboards with NGUI (3.8.2) was that items in a grid that are part of a scroll view initially start their positions at the bottom of the scroll view, rather than at the top of the scroll view.

blog_nc_bottom_justified

 

This problem is well documented:

I’ve tried several of the solutions mentioned in those posts to no success. I’ve come up with a solution that works for my own purposes. It can hopefully help someone else that is having similar problems.

Firstly, the way I have my UIScrollView structured is that I have an intermediate gameObject called “LeaderboardList” with a script as the direct child of the UIScrollView, and then I have a UITable as a child of that, in vertical orientation, which in turn, contains all of the individual rows. Note that you can use a UIGrid here instead, if you would like.

blog_nc_hierarchy

I like to use UITable’s Reposition() function to align all the child elements properly. However, using the function also introduces a vertical positioning, which I’m suspecting is half the height of the resulting sum of the rows’ heights. I don’t understand this part, especially since UITable has an option to choose a pivot, and by selecting TopLeft, I would have assumed the y component to not be touched at all, or at least be kept at zero.

So anyway, after calling Reposition(), I simply zero’d out the y component of the UITable’s position. Doing this, I get a more expected result.

blog_nc_centered

My UITable’s top is positioned in the center of the parent ScrollView. Ideally, I would have expected the top of my UITable to match the top of the ScrollView, since, in my UIScrollView setting, I have Content Origin set to “Top Left”. But that’s not what’s happening, so I’m clearly misunderstanding the purpose of that setting.

blog_nc_content_originblog_nc_pivot_and_cell_alignment

So, going back to my intermediate game object, “LeaderboardList”, I perform all of the table repositioning here. In this object, the table is offset by +halfHeight, which positions the Table in the scrollview area appropriately in the top left corner of the UIScrollView, except for one small detail.

blog_nc_row_clipped

I have the pivot set for each row element set at the center, so I have to account for half the row’s height, and add this to the offset.

Finally, I get a list of rows that starts at the top of the list.

blog_nc_finally

This solution is by far not the most ideal, and I wonder if there are simpler ways to get this working. But it’s the one that I found to work for me, among all the other solutions that I found online. I’d like to read about other developer’s methods to solving this problem. I feel that setting up the scrollview and table like this is quite a lot of extra work that I wasn’t planning on doing, but I strongly believe that users would expect lists to start at the top, rather than in the center.

This entry was posted in Dev, Programming and tagged . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.