Swipe to "like" or "dislike" any view, just like Tinder.app. Build a flashcard app, a photo viewer, and more, in minutes, not hours!
- Use
UIView+MDCSwipeToChoose
to add a swipe gesture and callbacks to anyUIView
. - Use
MDCSwipeToChooseView
to get a UI nearly identical to Tinder.app in just a few lines of code.
You may view slides on some the architecture decisions that went into this library here.
Place the following in your Podfile and run pod install
:
pod "MDCSwipeToChoose"
Check out the sample app for an example of how to use MDCSwipeToChooseView
to build the UI in the GIF above.
NOTE: You must run
pod install
in theExamples/LikedOrNope
directory before building the example app.
Every public class contains documentation in its header file.
The following is an example of how you can use MDCSwipeToChooseView
to display a photo. The user can choose to delete it by swiping left, or save it by swiping right.
#import <MDCSwipeToChoose/MDCSwipeToChoose.h>
// ... in a view controller
#pragma mark - Creating and Customizing a MDCSwipeToChooseView
- (void)viewDidLoad {
[super viewDidLoad];
// You can customize MDCSwipeToChooseView using MDCSwipeToChooseViewOptions.
MDCSwipeToChooseViewOptions *options = [MDCSwipeToChooseViewOptions new];
options.delegate = self;
options.likedText = @"Keep";
options.likedColor = [UIColor blueColor];
options.nopeText = @"Delete";
options.onPan = ^(MDCPanState *state){
if (state.thresholdRatio == 1.f && state.direction == MDCSwipeDirectionLeft) {
NSLog(@"Let go now to delete the photo!");
}
};
MDCSwipeToChooseView *view = [[MDCSwipeToChooseView alloc] initWithFrame:self.view.bounds
options:options];
view.imageView.image = [UIImage imageNamed:@"photo"];
[self.view addSubview:view];
}
#pragma mark - MDCSwipeToChooseDelegate Callbacks
// This is called when a user didn't fully swipe left or right.
- (void)viewDidCancelSwipe:(UIView *)view {
NSLog(@"Couldn't decide, huh?");
}
// Sent before a choice is made. Cancel the choice by returning `NO`. Otherwise return `YES`.
- (BOOL)view:(UIView *)view shouldBeChosenWithDirection:(MDCSwipeDirection)direction {
if (direction == MDCSwipeDirectionLeft) {
return YES;
} else {
// Snap the view back and cancel the choice.
[UIView animateWithDuration:0.16 animations:^{
view.transform = CGAffineTransformIdentity;
view.center = self.superview.center;
}];
return NO;
}
}
// This is called then a user swipes the view fully left or right.
- (void)view:(UIView *)view wasChosenWithDirection:(MDCSwipeDirection)direction {
if (direction == MDCSwipeDirectionLeft) {
NSLog(@"Photo deleted!");
} else {
NSLog(@"Photo saved!");
}
}
As of version 0.2.0, you may also swipe a view programmatically:
[self.swipeToChooseView mdc_swipe:MDCSwipeDirectionLeft];
You don't have to use a subclass of MDCChooseView
. You can use the mdc_swipeToChooseSetup:
method on any UIView
to enable swipe-to-choose.
In the following example, we adjust the opacity of a UIWebView
when it's panned left and right.
#import <MDCSwipeToChoose/MDCSwipeToChoose.h>
// ... in a view controller
- (void)viewDidLoad {
[super viewDidLoad];
MDCSwipeOptions *options = [MDCSwipeOptions new];
options.delegate = self;
options.onPan = ^(MDCPanState *state){
switch (state.direction) {
case MDCSwipeDirectionLeft:
self.webView.alpha = 0.5f - state.thresholdRatio;
break;
case MDCSwipeDirectionRight:
self.webView.alpha = 0.5f + state.thresholdRatio;
break;
case MDCSwipeDirectionNone:
self.webView.alpha = 0.5f;
break;
}
};
[self.webView mdc_swipeToChooseSetup:options];
}
All the source code is distributed under the MIT license. See the LICENSE file for details. The license does not apply to the images used in the sample apps.