iOS Tinder-style Swipe

Alex Egg,

animation

This isn’t an explaination about how to implement the actual swiping graphics, but how integrate a popular implemenation into your own app. But just for reference, the graphics implementation is a combination of UIPAnGesutureRecoginzer, screenshots and clever Quartz graphics programming. However, we can treat this as boiler-plate and focus on the actual buisness of out app. My use case was: A uesr has a stack of buisness cards they recieved and they can swipe to save or trash them. This article will describe how to implement w/ an exisiting code library.

MDCSwipeToChoose

The tinder-like swiping action comes from the MDCSwipeToChoose library on github. A cursory glance at the source code revels that the effects are achived by using a UIPanGestureRecognizer on a UIView to detect the swipe. To handle the graphics of the card being manipulated, a screenshot is taken of the view, which then has graphics transforms applied to it, which causes the view to rotate/skew/tranlsate etc. I don’t think this graphics code is trivial, so I’m glad I can utilze this library.

https://github.com/modocache/MDCSwipeToChoose

Install

The interface to MDCSwipeToChoose is pretty straight forward. First set your view to inherit from MDCSwipeToChooseView which give you the tinder swipe features you want.

#import "MDCSwipeToChooseView.h"
#import <MDCSwipeToChoose/MDCSwipeToChoose.h>

@class BBCard;

@interface ChooseCardView : MDCSwipeToChooseView

@property (nonatomic, strong, readonly) BBCard *card;

- (instancetype)initWithFrame:(CGRect)frame
                       person:(BBCard *)card
                      options:(MDCSwipeToChooseViewOptions *)options;

@end

The important part here is to pass in the options object:

MDCSwipeToChooseViewOptions *options = [MDCSwipeToChooseViewOptions new];
options.delegate = self;
options.threshold = 160.f;

Then, just insert your custom view (that inherited from MDCSwipeToChooseView) to you main view:

[self.view  addSubview:self.my_swipe_view];

Multiple Cards

So now you have a view which has tinder-like swipes enabled that is placed into your main view. So you swipe it and it’s gone. But how do you do a stack of cards to get continuous stacking action. One pattern that the MDCSwipeToChoose example application uses is just a stack of two images that are continously updated. You have a data source with all of your cards and you simply take one and insert your view. Then you do that same thing but place THAT view on top of the last one. SO when you swipe the top the bottom shows. Then when the top view is swiped off you promote the back view to the top and create a new back view.

Here’s an example from the ref app:

// This is called then a user swipes the view fully left or right.
- (void)view:(UIView *)view wasChosenWithDirection:(MDCSwipeDirection)direction {
    // MDCSwipeToChooseView shows "NOPE" on swipes to the left,
    // and "LIKED" on swipes to the right.
    if (direction == MDCSwipeDirectionLeft) {
        NSLog(@"You noped %@.", self.currentCard.first);
    } else {
        NSLog(@"You liked %@.", self.currentCard.last);
    }
    
    // MDCSwipeToChooseView removes the view from the view hierarchy
    // after it is swiped (this behavior can be customized via the
    // MDCSwipeOptions class). Since the front card view is gone, we
    // move the back card to the front, and create a new back card.
    self.frontCardView = self.backCardView;
    
    //made the backcard teh front card
    //now set a new back card from teh collection
    if ((self.backCardView = [self popPersonViewWithFrame:[self backCardViewFrame]])) {
        // Fade the back card into view.
        self.backCardView.alpha = 0.f;
        [card_holder_view insertSubview:self.backCardView belowSubview:self.frontCardView];
        [UIView animateWithDuration:0.5
                              delay:0.0
                            options:UIViewAnimationOptionCurveEaseInOut
                         animations:^{
                             self.backCardView.alpha = 1.f;
                         } completion:nil];
    }

  }

Permalink: ios-tinder-style-swipe

Tags:

Last edited by Alex Egg, 2016-10-05 19:08:12
View Revision History