Tinder風のUIを作れるMDCSwipeToChooseの使い方

Tinder風のUIというのは下のようなもので、フリックで操作できるUIのことです。この動きを簡単に作ることができるMDCSwipeToChooseというライブラリがあります。

CocoaPodsでインストール

pod "MDCSwipeToChoose"

単体での動かし方

view.m

#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!");
    }
}

複数の画像を非同期で読み込んでみる

view.m

- (void)viewDidLoad {

    [super viewDidLoad];

    //読み込む画像のURL
    picurl=[NSArray arrayWithObjects:@"http://xxxx.jpg", @"http://xxxx.jpg",@"http://xxxx.jpg", nil];

    [self local_picLoad:@"end"];    //最後に表示するローカル画像
    [self picLoad:picurl];          //urlから非同期で画像を読み込む

}

//picture load
-(void)picLoad:(NSArray *)urls
{
    for (int i=0; i<[urls count]; i++) {

        //MDCSwipeToChooseViewのオプション設定と作成
        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 *mdview = [[MDCSwipeToChooseView alloc] initWithFrame:self.view.bounds options:options];

        //addsubview読み込んだ画像をのせる
        long int cnt = [urls count]-1;
        NSString *imageURL = [urls objectAtIndex:(cnt-i)];
        dispatch_queue_t q_global = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0);
        dispatch_queue_t q_main = dispatch_get_main_queue();

        //一旦viewだけ作っている
        mdview.imageView.image = [UIImage imageNamed:@"load"];
        [self.view addSubview:mdview];

        dispatch_async(q_global, ^{

            UIImage *img = [UIImage imageWithData:[NSData dataWithContentsOfURL: [NSURL URLWithString: imageURL]]];

            dispatch_async(q_main, ^{
                mdview.imageView.image = img;
            });
        });
    }

}

//ローカル画像の読み込み
-(void)local_picLoad:(NSString *)url
{
    UIImageView *iv = [[UIImageView alloc] initWithImage:[UIImage imageNamed:url]];
    iv.frame = self.view.bounds;
    [self.view addSubview:iv];
}


#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) {
        NSLog(@"yes");
        return YES;
    } else {
        NSLog(@"no");
        // 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!");
    }
}

@end

使いやすくて応用の効くライブラリですので、使いどころがあれば使いたいです。