Nested ScrollView Accordion - Touch usability on mobile.

[wallabie]

I just upgraded to Unity 4.5 and happy to report that NGUI's accordion nested scrollview is still working.

I have a question about how to do the following:

The accordion has nested horizontal scrollviews and when scrolling the accordion items vertically on the phone, if the user touches one of the horizontal items then it's not possible to scroll up and down, only horizontally.  This behaviour makes it quite difficult to use the accordion on mobile devices.

How to get the accordion to scroll up/down even when the user is dragging vertically on an item from the horizontal scrollview ?
To rephrase the question:  How to get the accordion to behave like most mobile accordions where when the the user drags up/down, the accordion pans up/down.  When dragging left/right on a horizontal scrollview item, then the item is paned left/right.

Edit: The situation is at its worse when all of the accordion's items are expanded.
Here's a video:

https://dl.dropboxusercontent.com/u/48378123/NGUI-Accordion_Dragging_Up_down.mp4

[spooky]

This sounds like something explained in one of the new tutorial videos on scroll views. In the example he constrains the direction, so that when panning the scroll view, clicking on a dragdrop item in the list doesn't prevent you from scrolling. I'm not sure if you could apply this to the nested accordion scroll view, but it might help?

[Nicki]

I would make an accordion controller that receives the touch input and based on the drag values decide which scrollPanel to forward the events to.

Alternatively, you have to have both scrollPanels receive the OnPress and OnDrag events from the draggables. This will make them draggable everywhich way at the same time.

[wallabie]

"Alternatively, you have to have both scrollPanels receive the OnPress and OnDrag events from the draggables. This will make them draggable everywhich way at the same time."

You mean to add a UIDragScrollView to the main Accordion SV and to each of the horizontal SV?

[Nicki]

Yup.

[wallabie]

I tried your suggestion but it doesn't seem to work so well for me.

[wallabie]

@ArenMook,

Can you give some suggestions to make this work, the Daikon Accordion works on mobile perfectly.  It would be nice to wrap up the NGUI accordion so that it looks and also works like how an accordion should be.

[ArenMook]

if the user touches one of the horizontal items then it's not possible to scroll up and down, only horizontally

Why not? In the drag & drop example if you press on an item and move the mouse vertically, it scrolls the scroll view, and if you move the mouse horizontally it starts the drag operation.

If you have nested scroll views, and one is horizontal and another is vertical, just have two UIDragScrollView scripts -- one for one scroll view, and the other for another -- attached to the same items.

[Nicki]

Wallabie, maybe you didn't add the double DragScrollView scripts to the objects inside the accordion? It should work.

[wallabie]

Ah that was it.  I didn't quite get the idea to attach 2 draging comp to the same item. 

It works but the interaction is a bit wonky.  I mean, when dragging vertically, the items are also moving horizontally.  Is there an offset that can be applied so that it can better detect the "General" drag direction in order to give a more solid feel to the Vertical or Horizontal scrolling?

This video shows the wobbling nature of the dragging.
https://dl.dropboxusercontent.com/u/48378123/AccordionDragging.mp4

[Nicki]

Yeah I can imagine that. In that case, I would make my own extension of UIDragScrollView that could send the inputs to both scrollviews and make any form of "selecting direction" logic in there.

[ArenMook]

Do you mean "lock" into a specific direction? So when you start dragging horizontally, it will prevent dragging vertically?

[wallabie]

Yes, a kind of lock. 

On the phone, if the "General Direction" of the swipe is vertical, then it will scroll vertically and if the "General Direction" of the swipe is horizontal then it will go horizontal.  This way, the feeling of the interaction is much more solid and purposeful.

Have a look at some of these types of nested kinds of scrollViews on your phone and you'll see what I mean.

[ArenMook]

I would achieve this by using a script that would keep an eye on the OnDrag event -- once it arrives, the drag operation begins -- so check which way we're moving (horizontally or vertically). Do a GetComponents<UIScrollView>(), and disable the one that's the opposite. Re-enable the components in OnPress(false).