TinderUIをやってみたお【Objective-C】

tinder

ようやくアプリ開発をやってもいいよ許可が降りたので、

とりあえずTinderUIなるものをやってみた。(途中省きすぎ)

TinderUIは説明する必要ないかもしれないですが、
Tinderと言う位置情報を使った出会い系サービスで、
左右のスワイプのみで相手の写真を見てLike/Nopeを判別しているアプリで、
34ヶ国語対応までしている超人気アプリ
最近のリリースでは誤スワイプ対応のためundo機能も追加され、
より使い勝手が良くなってきている・・・・

とまあ前置きはこのくらいで、

要は二者択一の場合にわかりやすいUI

ということですね。

tinder

TinderUIを採用しているサービスを調べてみるとでるわでるわ。

Switch

JSwipe

Twindr

Stylect

PITCHER

HomeSwipe

Yahoo! Sonomy

blonk

Weave

SoSho

キャリアトレック

Wishfeed

Babyname

SENSY

Mallzee

Shoe Swipe

Flic

やはりTinderUIが使われるのは、直感的にわかりやすいからなんですかね。

YesかNoか半分か。半分はないですね。

保留って迷うくらいならNoだろう、置いといても変わんねえんだから決めろやってことですね。

じゃあ即採用。明日中に作れと言われても

なにげにViewを移動させたり左右判定でデータ変えたりアニメーション追加したりで面倒。

でも僕らには強い味方がいる。

そう、ライブラリが

MDCSwipeToChoose

https://github.com/modocache/MDCSwipeToChoose

今回はこれを使ってみました。

CocosPodなのであら簡単

使用したいプロジェクトにてPodfileを作成し、以下を記述

pod "MDCSwipeChoose"

後は

pod install

したら使えるように。

実装したいViewControllerに以下を記述。

XXX.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;
        }];
        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が動き、左右判定までしてくれます。

Screen Shot 2015-03-03 at 20.56.10
Screen Shot 2015-03-03 at 20.56.08

Viewを変更したい場合は

view.imageView.image = [UIImage imageNamed:@"photo"];

この部分を変えてあげれば良いだけなので汎用性もあるように作られています。

所感
・Viewを個別に実装してしまえば複数パターンも簡単に表示ができる。
・swipe以外のトリガーでも動作できるように予め実装してある
・swipeの最適化はすでに実用レベル

サンプルも中に入っているので、動かしてみるとわかりますが、もうほぼTinderです。

Objective-C以外にもSwiftでやってみた人や、Android版もあったのでぺたっと。

【Swift】
SwiftでTinderUIを実装してみた(Swift, Xcode6 beta5)

http://qiita.com/kiiita/items/1c7f44add59b390ea786

【Android】
Swipeable-Cards

https://github.com/kikoso/Swipeable-Cards

Swipecards

https://github.com/Diolor/Swipecards

以下のサイトの解説はすごいわかりやすかったです。

http://naoty.hatenablog.com/entry/2014/11/23/162709

このエントリーをはてなブックマークに追加