8

I'm trying to create some sort of timeline view like in video editors: media elements in a row, which are UIView's. I can successfully drag these views inside currently visible part of scroll view using UIScrollView touch events like touchesBegan and touchesMoved. I want to scroll the scroll view once subview is dragged to one of the scroll view edges. The best I can think of now is to create a timer that will scroll the view while user holds the subview with the finger near scroll view edge.

There's a lot of questions here on the same topic, but I was unable to find one that covers scrolling.

Is there a good way to do this? Should I use gesture recognizers instead?

Thank you in advance.

anticyclope
  • 1,577
  • 1
  • 10
  • 26
  • you could get the location of the touch and if its in the "edge zone" increment/decrement scrollOffSet, should make it appear to scroll – EagerMike Mar 18 '12 at 19:20
  • That is how I'm doing now, but I don't like the result, animation is jerky and the code seems not reliable, cause it depends on timers. – anticyclope Mar 19 '12 at 02:54

2 Answers2

9

Actually what you want IS a timed event. As soon, as the user is at the edge of the scrollview, you start a timer, which regularly increases the contentOffset. If you don't like your animation results (i guess you're using setContentOffset:animated:?), just try another timing and distance of animation.. I guess you have to try some different settings. What I would try first is 1px at a time. Perhaps every 0.3 second?

If that doesn't work you could also try another "extreme". Start a single animation, when the user reaches the edge, which animates the contentOffset until the end of the contentSize. But over a large timespan so the movement is slow. If the user stops dragging, or moves out of the edge, stop the animation at the current position. That would even be a solution without a timer, because the animation would be your timer itself.

calimarkus
  • 9,955
  • 2
  • 28
  • 48
  • Actually, I have to close this bounty right now, since I've already implemented it in the manner you describe in first paragraph (which is also my first idea). The main problem was to integrate this behavior into my scroll view subclass, since its subviews are cached like cells in table views. Anyway, I'm happy now even with timers. I think you can add some points to your answer, like, how to update position of currently dragged view (to keep it under the finger while scrollview is scrolling) during animation, so the answer will be complete and award will be yours :) – anticyclope Mar 24 '12 at 21:53
  • actually the problem asked here was not about the actual dragging within a scrollview - there are different approaches. I would refer to the search here, or e.g. that question: http://stackoverflow.com/questions/9715582/iphone-ios-how-to-implement-drag-and-drop-for-subviews-of-a-scrollview/9844006#9844006 – calimarkus Mar 24 '12 at 22:03
  • Dragging is out of question here, but keeping the view steady, while underlying scrollview is scrolling with animations is unclear to me, possibly because I didn't try yet. – anticyclope Mar 24 '12 at 22:06
  • As stated in the other thread i would take the dragging view out of the scrollview onto the scrollview's superview as long as the user is dragging it. But if you want to stay in the scrollview, just remember the contentOffset, so you know the change that happens. Apply that change of the x-contentOffset to your dragging view again in the other direction (`* -1`). – calimarkus Mar 24 '12 at 22:09
  • Where should one update view position? I get the idea, but since we don't have a timer, and scrollview is scrolled with animation (I think you mean `animateWithDuration` or `beginAnimations` by this) where should I place the code for view position update? Scroll view delegate? – anticyclope Mar 24 '12 at 22:26
  • yes check, if the scrollview delegate tells you the change (which comes from your animation).. otherwise just setup another animation with the inverted direction right on your dragging view. – calimarkus Mar 24 '12 at 22:33
0

I seriously doubt gesture recognizers would part of a good solution to this since they tend to be most helpful with discreet gestures.

I don't think I can improve on your general direction based on the assumption, implied above, that you are looking for continuous/gradual scrolling.

What I suggest instead is that you consider designing this to use a paged scrolling approach. When your user drags the object to the edge of the scrollview, cause the scrollview to move one page in that direction (by setting the contentOffset to move in that direction according to the bounds of the scrollview). When that even occurs, move the object slightly out of the "hot zone" at the edge of the scrollview so that the user is forced to explicitly express that they want to move another page, or something along those lines - that is, since the design approach depends on this "paging events" you need to implement some sort of gestural system for the user to keep paging.

I suppose you could use a timer in that same situation, so that if the user maintains the position and touch for another second, you would page again.

Rob Reuss
  • 1,400
  • 10
  • 20
  • 1
    thats no win.. and you still have a timer.. actually its a pretty bad solution, if you think of a video-editor. paging wouldn't really help here. Also its a bad user experience, if you reposition an object, which is in a dragging state... – calimarkus Mar 24 '12 at 21:21
  • Some gesture recognizers are actually ok. If you use a long press gesture recognizer, you get position updates if you drag after the long press has 'kicked in'. I'm using this successfully to implement dragging as part of a long press (i.e. do a long press, then start dragging once the long press has been recognised). – occulus Apr 24 '12 at 08:48
  • Just to add - I may revise this approach at some point, as a weakness is that if the user's finger/pointer moves even slightly during the long press, it's not recognised as a long press... – occulus Apr 24 '12 at 09:21