Author Topic: Scroll View With Swipes  (Read 3464 times)

mvi

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 1
  • Posts: 4
    • View Profile
Scroll View With Swipes
« on: January 23, 2014, 09:30:39 AM »
Hi, we're looking to implement vertical scroll views with the capability to swipe horizontally between multiple streams. Is there any facility in NGUI to handle that already, or will we need to extend UIScrollView ourselves to achieve it?

This is something which the latest Twitter iOS client does, there are multiple timelines which you can swipe between, then scroll up and down:

 

Thanks!

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: Scroll View With Swipes
« Reply #1 on: January 24, 2014, 07:55:36 AM »
Create one scroll view that you can drag on both X and Y. Create columns of tweets under your scroll view like so:

Scroll View (and UICenterOnChild, and UIGrid if you like)
- Column 1 (UITable to make positioning easy, or do your own logic)
-- Tweet 1
-- Tweet 2
-- Tweet 3
- Column 2 (UITable)
-- Tweet 1
-- Tweet 2
-- Tweet 3

The trick is to use UICenterOnChild (or a similar script of your own design) to snap to columns, while retaining the ability to scroll vertically freely.

mvi

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 1
  • Posts: 4
    • View Profile
Re: Scroll View With Swipes
« Reply #2 on: February 05, 2014, 10:54:29 AM »
Just an update for any future googlers.

We tried using a 2 dimensional scroll view initially, but this didn't feel quite right because the different column's vertical position should be irrespective of each other. Using a single 2D scroll view would mean if you scrolled down for ages then swiped to the side we'd have to jump up to the right position which would be really weird behaviour.

Instead we decided to use nested scroll views, with the root scroll view being horizontal with a center on child script and a grid for the columns. Inside each column is a vertical scroll view, then based on the gesture we lock out the respective scroll views (so that the right scroll view receives the right gesture). This took quite a bit of extension code (and a lot of tweaking) but feels really great for the project.

hnesb

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 1
    • View Profile
Re: Scroll View With Swipes
« Reply #3 on: March 07, 2014, 11:14:55 AM »
Instead we decided to use nested scroll views, with the root scroll view being horizontal with a center on child script and a grid for the columns. Inside each column is a vertical scroll view, then based on the gesture we lock out the respective scroll views (so that the right scroll view receives the right gesture). This took quite a bit of extension code (and a lot of tweaking) but feels really great for the project.

Hi mvi,

This is exactly what I'm trying to achieve - I'd really love to hear more about how you managed to get it working! You mention 'locking out the respective scroll views' - what does this entail? Even just a brief outline of your approach would be hugely helpful.

I've managed to get the basic behaviour working by simply adjusting the widget depth based on horizontal/vertical swipes (i.e. if a vertical swipe is detected, the vertical panel is given a higher depth). It works, but tends to jump around and behave strangely when a drag is started before the previous tween is complete.

Thanks!