MDCSwipeToChoose 0.2.3

MDCSwipeToChoose 0.2.3

测试已测试
语言语言 Obj-CObjective C
许可协议 MIT
发布最后发布2015 年 7 月

viktorBrian Gesiak 维护。



向“喜欢”或“不喜欢”任何视图滑动,就像 Tinder.app 一样。在几分钟内构建闪卡应用程序、图片查看器等,而不是几小时!

  • 使用 UIView+MDCSwipeToChoose 向任何 UIView 添加滑动操作和回调。
  • 使用 MDCSwipeToChooseView 在几行代码中获取几乎与 Tinder.app 完全相同的 UI。

您可以在此查看有关该库架构决策的部分幻灯片 这里

如何使用

请查看 示例应用,了解如何使用 MDCSwipeToChooseView 构建如 GIF 所示的 UI。

注意:在构建示例应用之前,您必须在 Examples/LikedOrNope 目录中运行 pod install

每个公开类都包含其头文件中的文档。

滑动是/否

以下是如何使用 MDCSwipeToChooseView 显示照片的示例。用户可以通过向左滑动选择删除,或通过向右滑动保存。

Objective-c

#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

要从 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];
}

在 Swift 中滑动

以下是使用 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 文件。许可证不适用于示例应用中使用的图像。