测试已测试 | ✓ |
语言语言 | Obj-CObjective C |
许可协议 | MIT |
发布最后发布 | 2015 年 7 月 |
由 viktor、Brian Gesiak 维护。
向“喜欢”或“不喜欢”任何视图滑动,就像 Tinder.app 一样。在几分钟内构建闪卡应用程序、图片查看器等,而不是几小时!
UIView+MDCSwipeToChoose
向任何 UIView
添加滑动操作和回调。MDCSwipeToChooseView
在几行代码中获取几乎与 Tinder.app 完全相同的 UI。您可以在此查看有关该库架构决策的部分幻灯片 这里。
请查看 示例应用,了解如何使用 MDCSwipeToChooseView
构建如 GIF 所示的 UI。
注意:在构建示例应用之前,您必须在
Examples/LikedOrNope
目录中运行pod install
。
每个公开类都包含其头文件中的文档。
以下是如何使用 MDCSwipeToChooseView
显示照片的示例。用户可以通过向左滑动选择删除,或通过向右滑动保存。
#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 = [view 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!");
}
}
从版本 0.2.0 开始,您还可以以编程方式滑动视图。
[self.swipeToChooseView mdc_swipe:MDCSwipeDirectionLeft];
要从 Swift 中使用 Objective-c 代码,您需要使用桥接头。
#ifndef BridgingHeader_h
#define BridgingHeader_h
#import <UIKit/UIKit.h>
#import <MDCSwipeToChoose/MDCSwipeToChoose.h>
#endif
import UIKit
// ... in a view controller
override func viewDidLoad() {
super.viewDidLoad()
var options = MDCSwipeToChooseViewOptions()
options.delegate = self
options.likedText = "Keep"
options.likedColor = UIColor.blueColor()
options.nopeText = "Delete"
options.onPan = { state -> Void in
if state.thresholdRatio == 1 && state.direction == MDCSwipeDirection.Left {
println("Photo deleted!")
}
}
var view = MDCSwipeToChooseView(frame: self.view.bounds, options: options)
view.imageView.image = UIImage(named: "photo.png")
self.view.addSubview(view)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
// This is called when a user didn't fully swipe left or right.
func viewDidCancelSwipe(view: UIView) -> Void{
println("Couldn't decide, huh?")
}
// Sent before a choice is made. Cancel the choice by returning `false`. Otherwise return `true`.
func view(view: UIView, shouldBeChosenWithDirection: MDCSwipeDirection) -> Bool{
if (shouldBeChosenWithDirection == MDCSwipeDirection.Left) {
return true;
} else {
// Snap the view back and cancel the choice.
UIView.animateWithDuration(0.16, animations: { () -> Void in
view.transform = CGAffineTransformIdentity
view.center = view.superview!.center
})
return false;
}
}
// This is called then a user swipes the view fully left or right.
func view(view: UIView, wasChosenWithDirection: MDCSwipeDirection) -> Void{
if wasChosenWithDirection == MDCSwipeDirection.Left {
println("Photo deleted!")
}else{
println("Photo saved!")
}
}
您不必使用 MDCChooseView
的子类。您可以在任何 UIView
上使用 mdc_swipeToChooseSetup:
方法启用滑动选择。
在以下示例中,我们调整了 UIWebView
向左和向右滑动时的不透明度。
#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];
}
以下是使用 MDCSwipeToChooseView
在 Swift 中显示照片的示例。用户可以通过向左滑动选择删除,或通过向右滑动保存。
首先,您必须创建一个 BridgingHeader.h 文件。
#ifndef ProjectName_BridgingHeader_h
#define ProjectName_BridgingHeader_h
#import <UIKit/UIKit.h>
#import <MDCSwipeToChoose/MDCSwipeToChoose.h>
#endif
然后,您必须将桥接头文件添加到项目中。导航到构建设置,然后搜索 'Bridging Header'。双击该字段并输入:ProjectName/BridgingHeader.h 作为值。
// Creating and Customizing a MDCSwipeToChooseView
override func viewDidLoad(){
super.viewDidLoad()
// You can customize MDCSwipeToChooseView using MDCSwipeToChooseViewOptions.
var options:MDCSwipeToChooseViewOptions = MDCSwipeToChooseViewOptions()
options.delegate = self
options.likedText = "Keep"
options.likedColor = [UIColor blueColor]
options.nopeText = "Delete"
options.onPan = { state -> Void in
if (state.thresholdRatio == 1.0 && state.direction == MDCSwipeDirection.Left) {
Println("Let go now to delete the photo!")
}
}
var view: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{
Println("Couldn't decide, huh?")
}
// Sent before a choice is made. Cancel the choice by returning `NO`. Otherwise return `YES`.
func view(view:UIView, shouldBeChosenWithDirection:MDCSwipeDirection) -> BOOL {
if (shouldBeChosenWithDirection == MDCSwipeDirection.Left) {
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.
func view(view: UIView, wasChosenWithDirection: MDCSwipeDirection) -> Void{
if (wasChosenWithDirection == MDCSwipeDirection.Left) {
Println("Photo deleted!");
} else {
Println("Photo saved!");
}
}
从版本 0.2.0 开始,您还可以以编程方式滑动视图。
self.swipeToChooseView(mdc_swipe:MDCSwipeDirection.Left)
所有源代码均在 MIT 许可证 下分发。有关详细信息,请参阅 LICENSE 文件。许可证不适用于示例应用中使用的图像。