作ったもの

最近はSwiftの勉強をしていて, ちょいちょいアプリを作っています.
そして今回は最近いいなぁと思っている「Tinder」のUIを使って, 岩手の風景画像を選ぶやつ作りました.
本AdventCalendarのトップバッター@otukutunさんが作ってくださった「いわてスイッチ」に感動して, 自分も岩手の魅力を伝えられるようなものを作ってみたいなーと思った次第でございます.
ただ, 時間がなかったので今回は風景画像が「好き」か「微妙」かに分別するだけのものになってしまいました泣
これをもとに, このあと何か面白い感じにできたらいいなぁと思っています.

使ったライブラリは「MDCSwipeToChooseView」というライブラリです.
CocoaPodsを使用すると楽に入ります.
※ここの作業は省略させていただきます泣

公式のgithubの方ではObjective-cで書かれていたので, そのままSwiftに変換しました.
とにかく実装できればいいやと思って書いてるので, 処理の最適化とかはしていません泣
その他, 色々適当なサイズ指定しているところは無視しちゃってください^^;

ViewController.swift

import UIKit

class ViewController: UIViewController, MDCSwipeToChooseDelegate {
    
    var frontView: MDCSwipeToChooseView = MDCSwipeToChooseView()
    var backView: MDCSwipeToChooseView = MDCSwipeToChooseView()
    
    var chooseViewArray: Array<MDCSwipeToChooseView> = []
    
    var chooseViewCount: Int = Int()
    
    var likeButton: UIButton = UIButton()
    var nopeButton: UIButton = UIButton()

    override func viewDidLoad() {
        super.viewDidLoad()
        chooseViewCount = 0
        
        // MDCSwipeToChooseViewのオプションを設定する(like or nope の時の文字とか文字色とか)
        var options: MDCSwipeToChooseViewOptions = MDCSwipeToChooseViewOptions()
        options.delegate = self
        options.likedText = "LIKE!"
        options.likedColor = UIColor(red: 0.18, green: 0.8, blue: 0.44, alpha: 0.8)
        options.nopeText = "Hummm...."
        options.nopeColor = UIColor(red: 0.9, green: 0.3, blue: 0.25, alpha: 1.0)
        
        // 背景の画像を設定してブラーをかける処理
        var image = UIImage(named: "background.jpg")
        var imageView = UIImageView(image: image)
        imageView.frame = CGRectMake(0, 0, self.view.bounds.width, self.view.bounds.height)
        var visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .Light)) as UIVisualEffectView
        visualEffectView.frame = imageView.bounds
        imageView.addSubview(visualEffectView)
        
        let screenHeight = UIScreen.mainScreen().applicationFrame.size.height
        let screenWidth = UIScreen.mainScreen().applicationFrame.size.width
        let navigationBarHeight = self.navigationController?.navigationBar.frame.size.height
        let statusBarHeight = UIApplication.sharedApplication().statusBarFrame.size.height
        
        let logoViewWidth = screenWidth
        let logoViewHeight = screenHeight / 10
        let logoViewX = 0 as CGFloat
        let logoViewY = screenHeight / 6
        
        let lastImageWidth = screenWidth / 2
        let lastImageHeight = screenHeight / 6
        let lastImageX = (screenWidth - lastImageWidth) / 2
        let lastImageY = (screenHeight - lastImageHeight) / 2
        
        let chooseViewWidth = screenWidth
        let chooseViewHeight = screenHeight / 2
        let chooseViewX = 0 as CGFloat
        let chooseViewY = logoViewY + logoViewHeight + 20
        
        let buttonWidth = screenWidth / 4
        let buttonHeight = screenHeight / 11
        let likeButtonX = ((screenWidth / 2) - buttonWidth) / 2
        let nopeButtonX = (screenWidth / 2) + likeButtonX
        let buttonY = chooseViewY + chooseViewHeight + 20
        
        // ロゴ(?)の画像
        var logo = UIImage(named: "logo.png")
        var logoView = UIImageView(image: logo)
        logoView.frame = CGRectMake(logoViewX, logoViewY, logoViewWidth, logoViewHeight)
        
        // 全選択後の画像
        var lastImage = UIImage(named: "ganbarouiwate.gif")
        var lastImageView = UIImageView(image: lastImage)
        lastImageView.frame = CGRectMake(lastImageX, lastImageY, lastImageWidth, lastImageHeight)
        
        var chooseView1: MDCSwipeToChooseView = MDCSwipeToChooseView(frame: CGRect(x: chooseViewX, y: chooseViewY, width: chooseViewWidth, height: chooseViewHeight), options: options)
        chooseView1.imageView.image = UIImage(named: "picture1.jpeg")
        
        var chooseView2: MDCSwipeToChooseView = MDCSwipeToChooseView(frame: CGRect(x: chooseViewX, y: chooseViewY, width: chooseViewWidth, height: chooseViewHeight), options: options)
        chooseView2.imageView.image = UIImage(named: "picture2.png")
        
        var chooseView3: MDCSwipeToChooseView = MDCSwipeToChooseView(frame: CGRect(x: chooseViewX, y: chooseViewY, width: chooseViewWidth, height: chooseViewHeight), options: options)
        chooseView3.imageView.image = UIImage(named: "picture3.jpeg")
        
        chooseViewArray = [chooseView1, chooseView2, chooseView3]
        
        self.view.addSubview(imageView)
        self.view.addSubview(logoView)
        self.view.addSubview(lastImageView)
        setChooseView(chooseViewArray)
        setLikeButton(likeButtonX, buttonY: buttonY, buttonWidth: buttonWidth, buttonHeight: buttonHeight)
        setNopeButton(nopeButtonX, buttonY: buttonY, buttonWidth: buttonWidth, buttonHeight: buttonHeight)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
    
    func viewDidCancelSwipe(view: AnyObject!) {
        println("決めれないって?")
    }
    
    func view(view: AnyObject!, wasChosenWithDirection direction: MDCSwipeDirection) {
        if (direction == MDCSwipeDirection.Left) {
            println("写真を消しました!")
        }
        else {
            println("写真を残しました!")
        }
        // 写真がスワイプ(選択)された回数を増やす
        chooseViewCount++
        
        // 写真がスワイプされた回数が選択画像の枚数以上だった場合, likeButtonとnopeButtonは無効化にする
        if chooseViewCount >= chooseViewArray.count {
            likeButton.enabled = false
            nopeButton.enabled = false
            likeButton.backgroundColor = UIColor.grayColor()
            likeButton.layer.borderColor = UIColor.grayColor().CGColor
            nopeButton.backgroundColor = UIColor.grayColor()
            nopeButton.layer.borderColor = UIColor.grayColor().CGColor
        }
    }
    
    // 画像を用意した枚数分セットする
    func setChooseView(chooseViewArray: Array<MDCSwipeToChooseView>) {
        for var i = 0; i < chooseViewArray.count; i++ {
            if i == 0 {
                self.view.addSubview(chooseViewArray[i])
            }
            else {
                self.view.insertSubview(chooseViewArray[i], aboveSubview: chooseViewArray[i])
            }
        }
    }
    
    // 「Like」ボタンの設置
    func setLikeButton(buttonX: CGFloat, buttonY: CGFloat, buttonWidth: CGFloat, buttonHeight: CGFloat) {
        likeButton = UIButton(frame: CGRect(x: buttonX, y: buttonY, width: buttonWidth, height: buttonHeight))
        likeButton.titleLabel?.textAlignment = NSTextAlignment.Center
        likeButton.setTitle("LIKE", forState: UIControlState.Normal)
        likeButton.setTitleColor(UIColor.whiteColor(), forState: UIControlState.Normal)
        likeButton.backgroundColor = UIColor(red: 0.18, green: 0.8, blue: 0.44, alpha: 0.8)
        likeButton.layer.borderColor = UIColor(red: 0.18, green: 0.8, blue: 0.44, alpha: 0.8).CGColor
        likeButton.layer.borderWidth = 2.0
        likeButton.layer.cornerRadius = 5.0
        likeButton.addTarget(self, action: "chooseLike", forControlEvents: UIControlEvents.TouchUpInside)
        
        self.view.addSubview(likeButton)
    }
    
    // 「戻る」ボタンの設置
    func setNopeButton(buttonX: CGFloat, buttonY: CGFloat, buttonWidth: CGFloat, buttonHeight: CGFloat) {
        nopeButton = UIButton(frame: CGRect(x: buttonX, y: buttonY, width: buttonWidth, height: buttonHeight))
        nopeButton.titleLabel?.textAlignment = NSTextAlignment.Center
        nopeButton.setTitle("Humm...", forState: UIControlState.Normal)
        nopeButton.setTitleColor(UIColor.whiteColor(), forState: UIControlState.Normal)
        nopeButton.backgroundColor = UIColor(red: 0.9, green: 0.3, blue: 0.25, alpha: 1.0)
        nopeButton.layer.borderColor = UIColor(red: 0.9, green: 0.3, blue: 0.25, alpha: 1.0).CGColor
        nopeButton.layer.borderWidth = 2.0
        nopeButton.layer.cornerRadius = 5.0
        nopeButton.addTarget(self, action: "chooseNope", forControlEvents: UIControlEvents.TouchUpInside)
        
        self.view.addSubview(nopeButton)
    }
    
    // likeButtonが押された場合, 一番上にある画像を右へスワイプする(LIKEにする)
    func chooseLike() {
        self.chooseViewArray[chooseViewArray.count - chooseViewCount - 1].mdc_swipe(MDCSwipeDirection.Right)
    }
    
    // nopeButtonが押された場合, 一番上にある画像を左へスワイプする(Hummm...にする)
    func chooseNope() {
        self.chooseViewArray[chooseViewArray.count - chooseViewCount - 1].mdc_swipe(MDCSwipeDirection.Left)
    }

}

デモ

見にくいですが, 右にスワイプすると「LIKE」, 左にスワイプすると「Hummm...」となります.

終わりに

本当はもう少し丁寧に書きたかったのですが, 時間と知識が足らずすみません...
とにもかくにも, 岩手には本当に素晴らしい観光スポットがあるので, 広めていけたらいいなぁと思います.

ということで今回は以上です(๑╹ڡ╹๑)
ありがとうございました!