0

I'm trying to achieve the following effect. I have a view which can be in two different states - collapsed and expanded). See screenshots for what I have in mind:

Collapsed Expanded

Transition between these states should be triggered by panning gesture - user panned down view gets expanded, user panned up - view gets collapsed.

I can achieve this by implementing custom gesture recognizer in the init section of my view subclass:

UIPanGestureRecognizer* recognizer = [[UIPanGestureRecognizer alloc] initWithTarget: self action: @selector(panned:)];
recognizer.delegate = self;
[self addGestureRecognizer: recognizer];

And then detecting proper vertical pan gesture:

- (void)panned:(UIPanGestureRecognizer*)gestureRecognizer
{
    static CGPoint lastPoint;
    if (gestureRecognizer.state == UIGestureRecognizerStateBegan) {
        lastPoint = [gestureRecognizer locationInView: self];
        return;
    }

    if (gestureRecognizer.state == UIGestureRecognizerStateEnded) {
        if (p.y > lastPoint.y && self.expanded == NO) {
            [self toggle];
        }
        else if (p.y < lastPoint.y && self.expanded == YES)
        {
            [self toggle];
        }
    }
}

Then based on self.expanded property I layout subviews and change frame accordingly. Everything works more or less ok. The only issue I have is - I'd like to show transition between two states as user panning his finger - so basically view should start expanding gradually back and forth (if user pans back and forth) and then come to the expanded state when gesture is complete.

What's the easiest way to do this?

jose920405
  • 7,982
  • 6
  • 45
  • 71
sha
  • 17,824
  • 5
  • 63
  • 98
  • Is the last row always the one showing in collapsed state? In that case, have just one state - expanded, with the top rows all off the top of the screen - and just let the user drag the whole thing into view from the top of the screen. – matt Apr 21 '14 at 18:52
  • No. Not always - any row can be shown in collapsed view. Think about weekly-monthly view for the calendar. – sha Apr 21 '14 at 18:55

1 Answers1

0

What I would do is devise an animation between the collapsed state and the expanded state. (This might involve changing one view over time, or fading / moving between two different views, one in the collapsed state and the other in the expanded state.) Now drive the animation in accordance with the gesture, as I explain here:

https://stackoverflow.com/a/22677298/341994

Basically, you attach the animation to a layer, with its speed set to 0 so that nothing actually happens. Then you track the gesture and keep changing the timeOffset of the layer to change the "frame" of the animation to match.

(One can't help observing, in this connection, that this is what is already done for you by a custom transition animation - i.e., a transition between the views of two view controllers where you add your own interactive animation. So, if you are iOS 7 only, it might be simplest to actually use a custom transition animation. That actually is how the weekly-monthly transition in the Calendar app is achieved, which you so appositely mention in a comment - it's just a push/pop transition with a custom interaction animation.)

Community
  • 1
  • 1
matt
  • 515,959
  • 87
  • 875
  • 1,141
  • What about frame size changes accordingly to the timeOffset? Can that be done too? Because frame of my view is different for two different states. – sha Apr 21 '14 at 19:02
  • Do you have links to some resources showing how to attach animation to a layer that involves repositioning it's subviews? – sha Apr 21 '14 at 19:53
  • Start by looking at the Ronnqvist tutorial that I refer to in the first comment to the link I already gave you. – matt Apr 21 '14 at 21:34
  • And of course _any_ interactive custom transition is likely to be an example of this; for instance, here's my own code for an interactive transition between tab bar controller subcontroller views (and you can download this project and try it): https://github.com/mattneub/Programming-iOS-Book-Examples/blob/master/bk2ch06p300customAnimation3/ch19p620customAnimation1/AppDelegate.m – matt Apr 21 '14 at 21:36