Tasharen Entertainment Forum

Support => NGUI 3 Support => Topic started by: MoProductions on May 04, 2014, 07:08:11 PM

Title: UIScrollBar causing unwanted transform and component adjustments
Post by: MoProductions on May 04, 2014, 07:08:11 PM

I'm trying to set up a Scroll View + Scroll Bar combination to create a simple vertical scrolling list of objects in the center of the screen, top justified.  Here's how I'm set up:

UIRoot (Fixed size)/UIPanel (no clipping, that's handled below)
 -GameObject Container (no additional scripts, located at origin)
   -Scroll Bar (Direction->TopToBottom)
      -Background
      -Foreground  (taken directly from the NGUI example)
  -Scroll View (pos: (0,0,0) Content Origin Top, Movement Vertical) + UIPanel (Offset 0,0  Size 300x200) <-- for clipping
    -Texture01 (0,0,0) 100x100
    -Texture02 (0,-110,0) 100x100
    -Texture03 (0,-220,0) 100x100
    -Texture04 (0,-330,0) 100x100

For simplicity I'm working with a simple list of items all at the origin.  Now what's happening is that when I press play and begin the scene, my Scroll View gets adjusted.  For reasons I can't figure out, The Scroll View goes from (0,0,0) to (0,46,0), and the Clipping area's offset goes from (0,0) to 0,-46), so everything is getting moved upwards. I can't figure out why, or what the significance of the 46 is.  Now the scrolling does work and looks great, but I'm concerned as to why things would get moved around when I've got them set up exactly how I want in the scene itself.  I've been using scroll views for a while with swiping and they all work fine, but something about attaching the scroll bar seems to be moving things around.  Trying a UIGrid didn't work out because it would still get moved, and the "Reposition Now" button mentioned in the online video seems to be gone, so I couldn't get things to look correct.  All I can think of is I'm missing something regarding the scroll bar values.

Thank you for the help.
-Mo

Title: Re: UIScrollBar causing unwanted transform and component adjustments
Post by: ArenMook on May 05, 2014, 10:29:10 PM

200/2 = 100. Your scroll view extends 100 pixels above and below the origin.

Your items are 100x100, meaning they extend 50 pixels above and below the origin (for the first element).

This leaves 50 pixels padding between the top of the scroll view and the top of the content.

By default scroll views have softness of 4 pixels.

50-4 = 46.

So all the scroll view is doing is moving up your content so that it's actually positioned at the top like you are requesting with your "Content origin: Top" setting. Same thing will happen if you right-click the scroll view component in Inspector and choose "Reset Clipping Position".

Title: Re: UIScrollBar causing unwanted transform and component adjustments
Post by: MoProductions on May 06, 2014, 01:46:23 PM

The PADDING!  *facepalm*.  I thought it might make sense if the value was 50.  Forgot about the padding. Thank you for the explanation, I feel much more confident with our scroll views now :)

Unfortunately, the client just made things more difficult.  What they want is a dynamically created scroll list of an arbitrary number of elements hooked up to a scroll bar.  The elements are 112 in size, the grid cell height is 115 to add a couple pixels of padding, and the area we want to view this is a 857 pixels in the center of the screen between two navigation panels.  Dynamically creating, adding and sorted the panels to the grid is taken care of.  My new problem is with the scroll bar itself.  What I'm trying to do is adjust the barSize dynamically depending on how many elements there are:

1. GameObject go = NGUITools.AddChild(ssi.scoresGrid.gameObject, ssi.scoresItemPrefab );
2. int numScores = ssi.scoresGrid.transform.childCount;
3. go.name = numScores.ToString ("00");
4. ssi.scoresGrid.Reposition(); // we want to sort by object name since the elements have to be in a specific order
5. if( numScores > 7 ) ssi.scoresScrollBar.barSize = 1f - (.03f*(numScores-7));
6. else ssi.scoresScrollBar.barSize = 1f;
7. if( ssi.scoresScrollBar.barSize < .2f ) ssi.scoresScrollBar.barSize = .2f; // don't want the foreground TOO small
8.  

This adds the elements and adjusts the scroll bar size ok, but when I try to start scrolling after 8+ elements (when the barSize isn't 1), it's not scrolling the items down nicely like it did when I just had a 15 element grid with a bar size of .5, but it's actually pushing the entire grid of elements down as I move the scroll bar down.  I'm trying to recreate that nice 15 element action above but once again I can't seem to find the secret connection to explain the exact behavior of the scroll bar+scroll view.  Is there something I can do with the scroll bar to get the functionality I need?
Thanks!!!
-Mo

Title: Re: UIScrollBar causing unwanted transform and component adjustments
Post by: ArenMook on May 06, 2014, 09:56:22 PM

Why are you doing any of this? NGUI's scroll views adjust the scroll bar's size automatically...

Title: Re: UIScrollBar causing unwanted transform and component adjustments
Post by: MoProductions on May 07, 2014, 06:15:19 PM

Hm...I've never seen the size of the scroll bar change when doing anything with the scroll view.  I expected it, but it never changes unless I do it manually.  As a test I'd set the size in the inspector to .5 with a 1 element scroll view. The bar pushes the 1 element down.  Of course it should be size 1 with only 1 element but it's just proving that the scroll bar is hooked up to the scroll view.  When elements are added the size of the bar does not change.  Same with starting off at size 1.  The scroll bar doesn't move anything, but when tons of elements are added the bar size doesn't change either.  To make things easier here's a quick video showing what I'm up to so hopefully it'll make more sense (note I had to disconnect the scroll bar from the scroll view to set it up at size 1).  BTW this is the same setup as before but with all the manual resizing stuff taken out.
Probably want to full screen it since it's a square shaped video and the first few seconds are fuzzy until the stream catches up.
https://www.youtube.com/watch?v=kWkFSqgzNM0&feature=youtu.be (https://www.youtube.com/watch?v=kWkFSqgzNM0&feature=youtu.be)


i'm aware that I might have things set up improperly but afaik I've followed the instructions faithfully.
Thanks again for the help.  I think I'm close.... :)
-Mike

Title: Re: UIScrollBar causing unwanted transform and component adjustments
Post by: ArenMook on May 08, 2014, 02:39:55 AM

Adding elements won't make the scroll view update its scroll bars. You need to tell the scroll view to do it (UIScrollView.UpdateScrollbars).

Check the Drag & Drop example. As you drag items from one scroll view to another the scroll bars will adjust their size automatically.

Title: Re: UIScrollBar causing unwanted transform and component adjustments
Post by: MoProductions on May 08, 2014, 10:09:48 AM

Yup, that was it, all seems well.
Thank you for the help!
-Mike