Swift転職なら=>【LevTech】
↑クリックして拡大
↑クリックして拡大
↑クリックして拡大
↑クリックして拡大

頭痛が減ったので共有です!

rebuild.fmを応援しています!

HOME > Kolada

YalantisのKoladaViewでティンダーのSwipeライブラリ

さてさて、先日CocoaPodsの記事を書いた際にサンプルを作成したKoladaというライブラリをご紹介します(Cocoapodsの使い方はこちらの記事)。これは、 Tinder的なスワイプ(画面中央に写真があって好き嫌いをスワイプ)するライブラリになります。こんな感じです。

サンプル画像

参考:github:Yalantis/Koloda
参考:アプリ Tinder

やってみた

こちらプロジェクトに追加する際にはCocoapodを利用します。(Cocoapodsの使い方はこちらの記事)、 これはpodfileという設定ファイルをプロジェクトディレクトリに保存して、Terminalからpodコマンドを実行するとKoladaが利用できる実行環境が できあがるといった寸法です。

サンプル画像 サンプル画像

左は追加前、右はPodコマンドを実行した後のxcworkspace

以下、追加作成したPodfileの中身


platform :ios,'9.0'
target 'KoladaTest2016-07-13b' do
use_frameworks!
pod 'Koloda'
end

これを作成してプロジェクトフォルダにいれて、pod installコマンドを実行すると、以下のような感じになります。

サンプル画像

この出力時の英文に緑で記載されているのですが、このpodが吐き出したxcworkspaceを起動時に実行する必要があります。これハマりました。。。

サンプル画像

いつも実行するのが、青色のxcodeprojだったので、白色アイコンの方です!

カスタマイズ

さて、実際xcworkspaceを起動して必要なプロジェクトでimport Koladaすると使えるようになるのですが、 時折、Podでインストールしたのにimport Koladaのコンパイルエラーで怒られる場合があります。

サンプル画像

この場合はいったんCleanしてBuildしてあげてください!

以下はソースコードです。StoryBoardにKoladaViewとlikeとunlikeボタンを設けて、 それらをつなげています

サンプル画像

↑StoryBoard


//
//  ViewController.swift
//  KoladaTest2016-07-13b
//
//

import UIKit
import Koloda

private var numberOfCards: UInt = 3


class ViewController: UIViewController {
    
    @IBOutlet weak var kolodaView: KolodaView!
    @IBOutlet weak var unlike_btn: UIButton!
    @IBOutlet weak var like_btn: UIButton!

    @IBAction func onTouchDownUnlikeButton(sender: AnyObject) {
        kolodaView?.swipe(SwipeResultDirection.Left)

    }
    @IBAction func onTouchDownLikeButton(sender: AnyObject) {
        kolodaView?.swipe(SwipeResultDirection.Right)

    }
    private var dataSource: Array = {
        var array: Array = []
        
        let url = NSURL(string: "http://swift-salaryman.com/files/ossan1.jpg");
        let imageData = NSData(contentsOfURL: url!);
        var img = UIImage(data:imageData!);
        array.append(img!)
        
        let url2 = NSURL(string: "http://swift-salaryman.com/files/image/guard_12.png");
        let imageData2 = NSData(contentsOfURL: url2!);
        var img2 = UIImage(data:imageData2!);
        array.append(img2!)
        
        let url3 = NSURL(string: "http://swift-salaryman.com/files/image/hirameki.jpg");
        let imageData3 = NSData(contentsOfURL: url3!);
        var img3 = UIImage(data:imageData3!);
        array.append(img3!)
        
        
        return array
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // Do any additional setup after loading the view, typically from a nib.
        
        kolodaView.dataSource = self
        kolodaView.delegate = self
        
        
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }


}
//MARK: KolodaViewDelegate
extension ViewController: KolodaViewDelegate {
    
    func kolodaDidRunOutOfCards(koloda: KolodaView) {
        let url = NSURL(string: "http://swift-salaryman.com/files/ossan1.jpg");
        let imageData = NSData(contentsOfURL: url!);
        
        dataSource.insert(UIImage(data:imageData!)!, atIndex: kolodaView.currentCardIndex - 1)
        let position = kolodaView.currentCardIndex
        kolodaView.insertCardAtIndexRange(position...position, animated: true)
    }
    
    func koloda(koloda: KolodaView, didSelectCardAtIndex index: UInt) {
        UIApplication.sharedApplication().openURL(NSURL(string: "http://swift-salaryman.com/")!)
    }
}
//MARK: KolodaViewDataSource
extension ViewController: KolodaViewDataSource {
    
    func kolodaNumberOfCards(koloda:KolodaView) -> UInt {
        return UInt(dataSource.count)
    }
    
    func koloda(koloda: KolodaView, viewForCardAtIndex index: UInt) -> UIView {
        return UIImageView(image: dataSource[Int(index)])
    }
    
    func koloda(koloda: KolodaView, viewForCardOverlayAtIndex index: UInt) -> OverlayView? {
        return NSBundle.mainBundle().loadNibNamed("OverlayView",
                                                  owner: self, options: nil)[0] as? OverlayView
    }
}



まとめ

Koladaのサンプルだけではすぐ実装できなかったので、こちらで誰かのヘルプになれば幸いです!

↓こんな記事もありますよ!

2Dバーコードをスキャンする

なんと2Dバーコード読み込み機能はAVFoundationに実装されています。GitHubにbowstさんが公開しているシンプルなソースがあったので共有です

カスタムクラスを作成時いつも忘れる。継承クラス作成時のメモ

カスタムクラスを作成する時いつもUIViewを継承する際のrequired Initの箇所でハマってしまうので覚書です。

UINavigationController

TabBarとUITableViewControllerを利用して一つのUIViewControllerだけをクリックすると右にスライドするUINavigationControlerを 利用したサンプルを記載します。というのも、AppDelegate内でUINavigationをself.windowのrootviewcontrollerにセットする 方法は多々あったのですが、AppDelegate内を利用しないでNavigationを実装する方法がなくハマっていましたのでを以下記載します
このエントリーをはてなブックマークに追加
右側のFacebookのLikeをクリック頂けると記事更新の際に通知されますので宜しければご利用下さい!