Scrollview - Tweening Clip Size and Position

[iron59]

Good day. I implemented a UI such that it initially displays a scroll view containing a table with three columns. See the screenshot BeforePreview

Now, when of those images are clicked, a preview window should slide out. The intended behavior is in the screenshot NormalPreview.

At first, I wanted to emulate the Example 9 with sliding panels, however it doesn't use any embedded scroll view. I tried to use the same approach creating a nested table with the preview window and the scroll view as the content. Unfortunately, it didn't work. The parent panel that holds the top table cannot clip the view inside scrollview. So I tried a different approach. I attached a Scale tween for the preview window and then attached a Position Tween and Custom script that I made to tween the scroll view clipping. I almost got my intended behavior but for some reason the scrollview moves too low on the screen. See screenshot OverlapPreview. Here's the snippet of my tween for scroll view clip.

1.         void Awake() {
2.                 this.panel = GetComponent<UIPanel>();
3.                 this.scroll = GetComponent<UIScrollView>();
4.                 this.center = new Vector2(this.panel.baseClipRegion.x, this.panel.baseClipRegion.y);
5.                 this.origSize = this.panel.GetViewSize();
6.         }
7.  
8.         public void UpdateClipSize(Vector2 newClipSize) {
9.                 this.panel.baseClipRegion = new Vector4(center.x, center.y, newClipSize.x, newClipSize.y);
10.         }
11.  
12.         public void CompleteTween() {
13.                 this.reverse = !this.reverse;
14.                 this.scroll.ResetPosition();
15.         }
16.  
17.         public void TweenClipSize() {
18.                 Vector2 from = this.origSize;
19.                 Vector2 to = this.targetSize;
20.  
21.                 if(this.reverse) {
22.                         from = this.targetSize;
23.                         to = this.origSize;
24.                 }
25.  
26.                 Hashtable ht = new Hashtable();
27.                 ht.Add("from", from);
28.                 ht.Add("to", to);
29.                 ht.Add("time", 0.2f);
30.                 ht.Add("onupdate", "UpdateClipSize");
31.                 ht.Add("onupdatetarget", this.gameObject);
32.                 ht.Add("oncomplete", "CompleteTween");
33.                 iTween.ValueTo(this.gameObject, ht);
34.         }
35.  

This is invoked at the same time as the motion tween. I would like to ask what would be the probable cause of the misplaced scrollview and how to solve it. I'm also welcome for other approaches on how to implement the UI feature that I want to attain. Thanks in advance.

[ArenMook]

NGUI can't nest clipping from one panel to another. If you want clipping, use only one panel. You can nest your objects like so:

UIPanel (scroll view)
- First window (widget)
-- Content
- Second window (widget)
-- Content

There is also rarely any reason to modify the clip range yourself. SpringPanel lets you move the scroll view to your intended position.

[iron59]

Thanks for the response. My problem is, the item list (the ones with the black sprites) consist of many items that need to be scrollable, so I can't use the scrollview to contain the preview window and the items list since NGUI doesn't support nested clippings like what you've said. I'll try to explore the Spring panel.

[iron59]

I almost got the problem fixed now. I used a parent UI panel for the item lists' scroll view and then used it for a SpringPanel to implement the change in positions. My only problem is, I need to move the scroll view's position to the selected object prior to the change in positions. Since I'm changing the clipping size of the scroll view, I can't shift the scroll position using UICenterOnChild. To clarify, I really need the adjustment of clip size since on the normal view it shows 9 items, while after the preview it should only show three items but the scrolling feature should be maintained. I'm thinking of adjusting the center of the clipping rect to display the selected object but I'm kinda lost with the proper formula to do that. Any suggestions on how to do this? Thank you very much. 

[ArenMook]

To be honest with you I'm not sure what to suggest in your case that would be simple. To do something unusual like this you will most likely need to do your own custom tweening logic where you adjust the panel's rect, while at the same time also possibly adjusting the clipping offset by half of the rect's adjustment, and the transform's position by the opposite of the offset's adjustment.

[iron59]

To be honest with you I'm not sure what to suggest in your case that would be simple. To do something unusual like this you will most likely need to do your own custom tweening logic where you adjust the panel's rect, while at the same time also possibly adjusting the clipping offset by half of the rect's adjustment, and the transform's position by the opposite of the offset's adjustment.

For the custom tweening part, I actually performed the step of tweening the panel's clipping as I've written in my post above, is it possible to start from there? If it's possible I would need the mathematical formula to do the necessary calculations (e.g. getting the valus of the rect adjustment and tanslating it to something that can be applied to the new position of the selected item). I just need to know the actual formula and algorithm to perform the right steps. Thank you.

[ArenMook]

Formula? Not sure what you mean. If you want to resize the panel in such a way that one border stays in place (for example -- left), and the other one moves (say -- right), and the content remains centered, you will want to adjust the right side by the full amount, the panel's position by half that amount, and the panel's clip offset by the inverse of half the amount.