SwiftでTinderUIのプロトタイプ

ライブラリとして、modocache/MDCSwipeToChooseを使う。

環境

• Xcode 6.1
• cocoapods v0.34.4
• MDCSwipeToChoose v0.2.1

MDCSwipeToChooseをpod install。

準備

Bridging Headerを作成して、XcodeのBuild Settingの方にも設定。

Test-Bridging-Header

#import <UIKit/UIKit.h>
#import <MDCSwipeToChoose/MDCSwipeToChoose.h>

2行目だけが必要かと思っていたら、1行目も必要で最初分からなかった。

参考: https://github.com/modocache/MDCSwipeToChoose/issues/23

実装

ビューとかは適当なのであしからず。。

MDCSwipeToChooseDelegateを継承したViewControllerを作成。
あとは、READMEで説明してあるのに習って書いていく。(Swiftに書き直すのが個人的には難しい。。)

ViewController.swift

import UIKit

class SwipeViewController: UIViewController, MDCSwipeToChooseDelegate {
    var swipeCount = 0
    var photoURL = [
        "http://up.gc-img.net/post_img_web/2013/03/a3a43755438b42d881929eefc7161191_0.jpeg",
        "http://pic.prepics-cdn.com/pib1298076039/5731792_218x291.gif",
        "http://omosoku.com/wp-content/uploads/misawa-225x300.gif"
    ]

    override func viewDidLoad() {
        super.viewDidLoad()

        let swipeView1 = createSwipeView(photoURL[0])
        self.view.addSubview(swipeView1)

        let swipeView2 = createSwipeView(photoURL[1])
        self.view.insertSubview(swipeView2, belowSubview: swipeView1)

        let swipeView3 = createSwipeView(photoURL[2])
        self.view.insertSubview(swipeView3, belowSubview: swipeView2)
    }

    func createSwipeView(url: String) -> UIView {
        let options = MDCSwipeToChooseViewOptions()
        options.delegate = self
        options.likedText = "Like"
        options.likedColor = UIColor.greenColor()
        options.nopeText = "Later"
        options.nopeColor = UIColor.lightGrayColor()

        let swipeView = MDCSwipeToChooseView(
            frame: CGRect(
                x: 0,
                y: 100,
                width: self.view.bounds.size.width,
                height: self.view.bounds.size.height - 300
            ),
            options: options
        )
        let imageURL = NSURL(string: url)
        swipeView.imageView.image = UIImage(data: NSData(contentsOfURL: imageURL!)!)

        return swipeView
    }

    func view(view: UIView!, wasChosenWithDirection direction: MDCSwipeDirection) {
        if (direction == MDCSwipeDirection.Left) {
            println("Later")
        } else {
            println("Like")
        }
        swipeCount++
    }
}

これで、適当な大きさのミサワの画像が3枚スワイプできるだけの超簡易Tinder UIができた。。。