Tasharen Entertainment Forum

Support => NGUI 3 Support => Topic started by: Pentos on July 08, 2013, 09:21:35 AM

Title: [Solved] Horizontal scroll view in a Vertical scroll view
Post by: Pentos on July 08, 2013, 09:21:35 AM
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
Title: Re: Horizontal scroll view in a Vertical scroll view
Post by: ArenMook on July 08, 2013, 12:26:53 PM
You can't have a scroll view within a scroll view. Widgets can only have one panel clip them.
Title: Re: Horizontal scroll view in a Vertical scroll view
Post by: Pentos on July 09, 2013, 03:43:57 AM
Thank you.

So is there any way to do something similar?
Title: Re: Horizontal scroll view in a Vertical scroll view
Post by: ArenMook on July 09, 2013, 08:32:02 AM
Nope. I suggest you reconsider your UI design.
Title: Re: Horizontal scroll view in a Vertical scroll view
Post by: Pentos on July 09, 2013, 09:09:06 AM
Ok thank you.
I'll do it with arrows button.

Title: Re: [Solved] Horizontal scroll view in a Vertical scroll view
Post by: Cris_Chile on June 16, 2014, 02:46:08 PM
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!  :P

Best regards,

Cris_Chile
Title: Re: [Solved] Horizontal scroll view in a Vertical scroll view
Post by: ArenMook on June 17, 2014, 12:53:18 PM
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.
Title: Re: [Solved] Horizontal scroll view in a Vertical scroll view
Post by: Cris_Chile on July 03, 2014, 11:35:32 AM
Thanks ArenMook!!!  :D

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.         }