[Solved] Horizontal scroll view in a Vertical scroll view

[Pentos]

Hello Guys,

I have a vertical scroll view. This scroll view is a black outline on the left of the screen with a list of different task. It looks like a calendar on ios or Windows phone. You have the date and you can scroll up/down to see all the task for the day.

I would like create another scroll view but an Horizontal one. For example If I'm on the July 08, 2013 with the list of all the task, I would like scroll Left/right to be able to see the date July 07 / July 09.

To do this I have this architecture:
Horizontal UIPanel (clipped view)
     Horizontal UIGrid
          Item 1
               Panel (Date : for example July 07)
               Vertical UIPanel (clipped view)
                    Vertical UIGrid
                         Task 1
                         Task 2
          Item 2
               Panel (Date : for example July 09)
               Vertical UIPanel (clipped view)
                    Vertical UIGrid
                         Task 1
                         Task 2
         ...

The problem is that when I scroll Left/right the panels (with the dates) disappear but not the UIPanel with all the task.

Is there a way to make it works properly?

Thank you in advance

[ArenMook]

You can't have a scroll view within a scroll view. Widgets can only have one panel clip them.

[Pentos]

Thank you.

So is there any way to do something similar?

[ArenMook]

Nope. I suggest you reconsider your UI design.

[Pentos]

Ok thank you.
I'll do it with arrows button.

[Cris_Chile]

Hi all!
I had tha same problem, and I found a solution:

In the UIDragScrollView.cs script that is in every scrollview elements, I added two parameters (one to the Horizontal Scroll View, and other to the Vertical Scroll View), and in the Editor I maped this parameters to the horizontal and vertical scroll view:

1. // Added two ponters to the horizontal and vertical scroll views
2. public UIScrollView scrollView, horizontalScrollView, verticalScrollView;

and in this Class, in the "OnDrag" method I added this change:

1. void OnDrag (Vector2 delta)
2. {
3.         // update to the right scrollview depending the drag movement (vertical or horizontal)
4.         scrollView = (Mathf.Abs(delta.x) > 10*Mathf.Abs(delta.y)) ? horizontalScrollView : verticalScrollView;
5.  
6.         if (scrollView && NGUITools.GetActive(this))
7.                         scrollView.Drag();
8. }

Whith this changes it works!

I hope this could help, jus like it helped me! 

Best regards,

Cris_Chile

[ArenMook]

You can just attach 2 UIDragScrollView scripts and make them point to different scroll views.

Note that this post is from a year ago. Nested scroll views were not possible back then.

[Cris_Chile]

Thanks ArenMook!!! 

You are right! The best solution was attaching 2 UIDragScrollView scripts.
I created 2 new classes from the UIDragScrollView original class, one for horizontal scroll, and another for the vertical scroll. In every class I added the exclusive condition alowing the movement in only one axis, depending of the delta.x (or delta.y) absolute value in the "OnDrag" method.

1. // For Horizontal movement
2. void OnDrag (Vector2 delta)
3.                 {
4.                         if ( scrollView && NGUITools.GetActive(this) && ( Mathf.Abs (delta.x) > Mathf.Abs(delta.y) ) )
5.                                 scrollView.Drag();
6.                 }

1. // For verizontal movement
2. void OnDrag (Vector2 delta)
3.         {
4.                 if ( scrollView && NGUITools.GetActive(this) && ( Mathf.Abs (delta.x) < Mathf.Abs(delta.y) ) )
5.                         scrollView.Drag();
6.         }