With 3D touch peek and pop, how do you detect the user panning during a peek (like Facebook)?

Question

In the Facebook app, if you "peek" a photo that is part of an album, you can slide your finger horizontally to go to other photos.

How is this accomplished within the API? All I see exposed is offering a view controller and committing that view controller upon pop.

Answer 1

There's a little trick where you can track the user's touch location while Peeking.

You basically have a gesture recognizer that begins tracking the user's touch location when you start Peeking and ends tracking once the user Pops the view controller or releases his/her touch. The gesture recognizer should be added to the view of the view controller that is bringing up the Peek.

Since you have access to the Peeked view controller, you can call a function from that view controller which correlates to the user's touch location.

Just a quick mockup:

@property (nonatomic, weak, nullable) ViewControllerClass *peekedVC;

- (void)handleGestureRecognizer:(UIPanGestureRecognizer *)gr {
    if (peekedVC && gr.state == UIGestureRecognizerStateChanged) {
        CGPoint point = [gr locationInView:self.view];
        [peekedVC handle:point.x];
    }
}

- (UIViewController *)previewingContext:(id<UIViewControllerPreviewing>)previewingContext
          viewControllerForLocation:(CGPoint)location {
    NSIndexPath *indexPath = [self.collectionView indexPathForItemAtPoint:location];
    UICollectionViewCell *cell = [self.collectionView cellForItemAtIndexPath:indexPath];

    [previewContext setSourceRect:cell.frame];

    ViewControllerClass *vc = [ViewControllerClass new];
    self.peekedVC = vc;
    return vc;
}

- (void)previewingContext:(id<UIViewControllerPreviewing>)previewingContext
 commitViewController:(UIViewController *)viewControllerToCommit {
    self.peekedVC = nil;
    [self showViewController:viewControllerToCommit sender:self];
}

I actually made a blog post which covers the mechanics of this here: https://medium.com/behancetech/peek-pan-extending-3d-touch-f6520c38fe51#.4xz7lcm9o

There's also an open source project which helps integrate this here: https://github.com/adobe-behancemobile/PeekPan