↑クリックして拡大
↑クリックして拡大
↑クリックして拡大
↑クリックして拡大

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

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のサンプルだけではすぐ実装できなかったので、こちらで誰かのヘルプになれば幸いです!

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


2021-05-14 14:21:41

WatchOSのwatchconnectivityのFiletransferの落とし穴。と、避け方。

AppleWatch 実機だと成功するんだけど、シュミレーターだと失敗するという、、、 昔作成してた時は成功してたのになーと思って調べると、どうやら昔は成功してたみたい。watchOS6以降は...

2021-05-06 14:04:37

LINEのアニメーションスタンプ制作の落とし穴、、、失敗談

ゴールデンウィークにLINEスタンプを作成してみました。 作り切って申請も通したんですが、意図したアニメーションと違う、、、、 LINEクリエーターの画面だと、アニメーションのプレビュー...

2021-05-01 18:05:35

久しぶりのAdmobをobjective-cに実装。コンパイルエラーだらけ。バーミッション不具合でエミュレータにインスコできない。

忘れないようにメモ エミュレータにアプリをインストールする際にパーミッション系のエラーがでた時、また、iphone実機にインストールする際にも権限系のエラーが出る場合。 ターゲット→ex...
このエントリーをはてなブックマークに追加
右側のFacebookのLikeをクリック頂けると記事更新の際に通知されますので宜しければご利用下さい!