Adding and Removing elements from Scrollview

[raydenuni]

NGUI 3.5.9

I have a scrollview with a grid and a bunch of elements. I'm adding and removing them at runtime and running into a weird issue where removing elements causes the grid to be scrolled up outside of the visible clip zone. I can either drag the contents back into view, or I can execute the "Reset Clipping Position" manually in the editor. Here's the code I'm using to remove elements:

1. void Foo() {
2.         foreach (Transform child in _grid.transform) {
3.                 if (childMatchesCondition()) {
4.                         NGUITools.Destroy(child.gameObject);
5.                         break;
6.                 }
7.         }
8.  
9.         _gridScrollView.ResetPosition();
10.         _grid.GetComponent<UIGrid>().Reposition();
11. }
12.  

It seems like it's the grid Reposition() that messes it up. If I just do ResetPosition, the list always lines up at the top of the scrollview (but then I get gaps), but if I call Reposition, it will sometimes shift up so one element is above the scrollview clip.

What I expect:

1.  ___
2. | @ |
3. | @ |
4. | @ |
5. -----
6.  

What I get:

1.  _@_
2. | @ |
3. | @ |
4. |   |
5. -----
6.  

With some larger scroll views that I have, if I filter it down to only a few elements they will often scroll all the way off the top of the screen and I can't see any of them.

Thoughts anyone? This seems like a pretty standard use case so there must be an easy way to do this properly.

[raydenuni]

I figured out some more.

If I turn off "Smooth Tween" on the UIGrid it works perfectly.

So this is my theory:

I remove the first element in the grid, then Reposition() is called, but it hasn't tweened yet. Then ResetPosition() is called and it changes the position based on the actual items, not the size of the grid. Then after it does that, the tween ends and shoves all the items up one position so the first element is now above the clip.

That may not be what's happening, just my theory. How do I solve it? I can wait until the tween ends and then call ResetPosition(), but then I'm waiting for this nice smooth animation to go off and then jerking it into place.

[ArenMook]

Can you first update to the latest version, please?

[raydenuni]

Unfortunately, I cannot as we're using Unity 4.3.3. Is this a known issue that's fixed in a later version of NGUI?

[ArenMook]

I've done some changes in regards to that, so possibly.

NGUI supports 4.3.3. NGUI currently requires Unity 4.3 or higher, so you're fine to update.

[raydenuni]

3.6.0
- NOTE: NGUI now requires Unity 4.3.4 or higher!

-- http://www.tasharen.com/forum/index.php?topic=11.50

Is that not true?

[ArenMook]

4.3.4 is needed in order to download NGUI from the Asset Store, but it will work fine even on 4.3.0.

[raydenuni]

I finally got around to updating NGUI and then back on task with work related to this bug. It is unfortunately, still happening.

Currently running NGUI 3.6.7.

[ArenMook]

The latest is 3.7.1 right now. Not sure why you updated to a version that's over a month old.

These:
    _gridScrollView.ResetPosition();
    _grid.GetComponent<UIGrid>().Reposition();

....need to be swapped. First you reposition the grid, and only then should you reset the scroll view's position.

[ionutztamas]

Thank you for this. I didn't know exactly how to reset the position, so I was setting the Y position and Y clipping offset to 0 (i'm moving stuff vertically). Also, in order to make some buttons to scroll through elements (beside the default swipe mechanism), i was adding a value to Y localPosition and subtracting the same value from the clipping offset. It seemed to work. Is this a workaround or is this the way to approach this situation ?

[ArenMook]

I don't quite understand what you mean. What Y value? What does it have to do with scrolling?

[ionutztamas]

1. Vector2 off = leftScrollView.GetComponent<UIPanel>().clipOffset;
2.                 off.y -= 50;
3.                 leftScrollView.GetComponent<UIPanel>().clipOffset = off;
4.                
5.                 Vector3 pos = leftScrollView.transform.localPosition;
6.                 pos.y += 50;
7.                 leftScrollView.transform.localPosition = pos;

this is what i do now to display other elements in a scroll view when i press a button.