- Notifications
You must be signed in to change notification settings - Fork419
Swipe to "like" or "dislike" any view, just like Tinder.app. Build a flashcard app, a photo viewer, and more, in minutes, not hours!
License
modocache/MDCSwipeToChoose
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
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+MDCSwipeToChooseto add a swipe gesture and callbacks to anyUIView. - Use
MDCSwipeToChooseViewto 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 libraryhere.
Place the following in your Podfile and runpod install:
pod"MDCSwipeToChoose"Check outthe sample app for an example of how to useMDCSwipeToChooseView to build the UI in the GIF above.
NOTE: You must run
pod installin theExamples/LikedOrNopedirectory before building the example app.
Every public class contains documentation in its header file.
The following is an example of how you can useMDCSwipeToChooseView 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 { [superviewDidLoad];// You can customize MDCSwipeToChooseView using MDCSwipeToChooseViewOptions. MDCSwipeToChooseViewOptions *options = [MDCSwipeToChooseViewOptionsnew]; options.likedText =@"Keep"; options.likedColor = [UIColorblueColor]; 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 = [[MDCSwipeToChooseViewalloc]initWithFrame:self.view.boundsoptions:options]; view.imageView.image = [UIImageimageNamed:@"photo"]; [self.viewaddSubview: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) {returnYES; }else {// Snap the view back and cancel the choice. [UIViewanimateWithDuration:0.16animations:^{ view.transform =CGAffineTransformIdentity; view.center = [viewsuperview].center; }];returnNO; }}// 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!"); }}
To use objective-c code from swift, you need to use bridging-header.
#ifndef BridgingHeader_h#define BridgingHeader_h#import <UIKit/UIKit.h>#import <MDCSwipeToChoose/MDCSwipeToChoose.h>#endifimport UIKitclassViewController:UIViewController{overridefunc viewDidLoad(){ super.viewDidLoad()letoptions=MDCSwipeToChooseViewOptions()options.delegate=selfoptions.likedText="Keep"options.likedColor=UIColor.blueoptions.nopeText="Delete"options.nopeColor=UIColor.redoptions.onPan={ state->Voidinif state?.thresholdRatio==1 && state?.direction==.left{print("Photo deleted!")}}letview=MDCSwipeToChooseView(frame:self.view.bounds, options: options)view?.imageView.image=UIImage(named:"photo.png")self.view.addSubview(view!)}}extensionViewController:MDCSwipeToChooseDelegate{// This is called when a user didn't fully swipe left or right.func viewDidCancelSwipe(_ view:UIView)->Void{print("Couldn't decide, huh?")}// Sent before a choice is made. Cancel the choice by returning `false`. Otherwise return `true`.func view(_ view:UIView, shouldBeChosenWith:MDCSwipeDirection)->Bool{if shouldBeChosenWith==.left{returntrue}else{// Snap the view back and cancel the choice.UIView.animate(withDuration:0.16, animations:{()->Voidinview.transform=CGAffineTransform.identityview.center= view.superview!.center})returnfalse}}// This is called when a user swipes the view fully left or right.func view(_ view:UIView, wasChosenWith:MDCSwipeDirection)->Void{if wasChosenWith==.left{print("Photo deleted!")}else{print("Photo saved!")}}}
If you're using CocoaPods 0.36+ (perhaps because you want to include pods that contain Swift code) and you've included the use_frameworks! directive in your Podfile, then you've converted all your pods (including MDCSwipeToChoose) into frameworks. Therefore, you'll need to include the line
import MDCSwipeToChoose...in your Swift files (even if you're using a bridging header).
You don't have to use a subclass ofMDCChooseView. You can use themdc_swipeToChooseSetup: method on anyUIView to enable swipe-to-choose.
In the following example, we adjust the opacity of aUIWebView when it's panned left and right.
#import<MDCSwipeToChoose/MDCSwipeToChoose.h>// ... in a view controller- (void)viewDidLoad { [superviewDidLoad]; MDCSwipeOptions *options = [MDCSwipeOptionsnew]; 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.webViewmdc_swipeToChooseSetup:options];}
##Swiping in Swift
The following is an example of how you can useMDCSwipeToChooseView to display a photo in swift. The user can choose to delete it by swiping left, or save it by swiping right.
First you must create a BridgingHeader.h file
#ifndef ProjectName_BridgingHeader_h#defineProjectName_BridgingHeader_h#import<UIKit/UIKit.h>#import<MDCSwipeToChoose/MDCSwipeToChoose.h>#endif
You must then add the bridging header file to the project by navigating to Build Settings then searching for 'Bridging Header'. Double click the field and type: ProjectName/BridgingHeader.h as the value
// Creating and Customizing a MDCSwipeToChooseViewoverridefunc viewDidLoad(){ super.viewDidLoad() // You can customize MDCSwipeToChooseView using MDCSwipeToChooseViewOptions.letoptions:MDCSwipeToChooseViewOptions=MDCSwipeToChooseViewOptions() options.delegate=self options.likedText="Keep" options.likedColor=UIColor.blue options.nopeText="Delete" options.nopeColor=UIColor.red options.onPan={ state->Voidinif(state?.thresholdRatio==1.0 && state?.direction==.left){print("Let go now to delete the photo!")}}letview:MDCSwipeToChooseView=MDCSwipeToChooseView(frame:self.view.bounds, options:options) view.imageView.image=UIImage(named:"photo")self.view.addSubview(view)}// MDCSwipeToChooseDelegate Callbacks// This is called when a user didn't fully swipe left or right.func viewDidCancelSwipe(_ view:UIView)->Void{print("Couldn't decide, huh?")}// Sent before a choice is made. Cancel the choice by returning `false`. Otherwise return `true`.func view(_ view:UIView, shouldBeChosenWith:MDCSwipeDirection)->Bool{if(shouldBeChosenWith==.left){returntrue}else{ // Snap the view back and cancel the choice.UIView.animate(withDuration:0.16, animations:{()->Voidin view.transform=CGAffineTransform.identity view.center=self.view.center})returnfalse}}// This is called when a user swipes the view fully left or right.func view(_ view:UIView, wasChosenWith:MDCSwipeDirection)->Void{if(wasChosenWith==.left){print("Photo deleted!")}else{print("Photo saved!")}}
As of version 0.2.0, you may also swipe a view programmatically:
self.swipeToChooseView(mdc_swipe:MDCSwipeDirection.Left)[self.swipeToChooseViewmdc_swipe:MDCSwipeDirectionLeft];
self.swipeToChooseView.mdc_swipe(.left)
You may also disable the swiping gesture and only allowed to swipe programmatically
MDCSwipeToChooseViewOptions *options = [MDCSwipeToChooseViewOptionsnew];options.swipeEnabled =NO;
letoptions=MDCSwipeToChooseViewOptions()options.swipeEnabled=false
All the source code is distributed under theMIT license. See the LICENSE file for details. The license does not apply to the images used in the sample apps.
About
Swipe to "like" or "dislike" any view, just like Tinder.app. Build a flashcard app, a photo viewer, and more, in minutes, not hours!