Kolodaの使い方
アドベントカレンダー用の投稿
モチベーション
CocoaでTinderみたいなViewを提供するライブラリがある。
これを使いたい。使う。
Carthageの準備
Cocoaライブラリのパッケージマネージャとして、だいたいみんなCocoaPodsかCarthageを使う。 ここではシンプルで軽量なCarthageを使う。
CarthageはHomebrewというパッケージマネージャでインストールできる。 Homebrewが入ってなかったら入れる。入れない理由がない。
$/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
brewが入ったらcarthageを入れる。
$brew install carthage
はいこんにちは
$carthage version
プロジェクトの準備
XcodeでSingle View Applicationプロジェクトを作る。
作ったプロジェクトのルートディレクトリ(*.xcodeprojがあるとこ)にCartfile
という名前のファイルを作る。
今回はSwift3+Xcode8.1でiOSターゲットのサンプル作るが、
2016年11月時点でKolodaのmasterブランチはSwift3対応できてないので、Swift3ブランチをCarthageから使う。どんなライブラリを使うか、ライブラリのどのブランチを使うかは、Cartfileで指定できる。
Cartfile
の中身はこんなん。
github "Yalantis/Koloda" "swift-3"
書き終わったら、ターゲットをiOSにするオプションをつけてcarthage update
する。
$carthage update --platform iOS
プロジェクトの設定
carthage update
が成功したら、Koloda.framework
とpop.framework
がCarthageディレクトリ以下にできてる。
Xcodeを開いて、プロジェクトルートのGeneralタブの一番下Linked Frameworks and Librariesに2つの.frameworkをドロップする。
Build Phasesタブを開いて、左の+
ボタン(Add a new build phase)を押し、New Run Script Phase
を選択する。
Run Script
のコマンドに
/usr/local/bin/carthage copy-frameworks
を書く。さらにInput Filesに
$(SRCROOT)/Carthage/Build/iOS/pop.framework $(SRCROOT)/Carthage/Build/iOS/Koloda.framework
を書く。popがKolodaの前提ライブラリなので、先頭に持ってこないとビルド失敗する。こんな感じになるはず。
なんでこんなスクリプトを設定しなきゃいけないのかというと、App Store のサブミッションのバグの対策らしい。
cmd+b
でビルドして、エラーがでなかったらライブラリのロードは完了。
Viewを作る
デフォルトのstoryboardとコントローラをそのまま使う。
Main.storyboard
を開く。右下のObject LibraryからView
を選択して、左ツリーのView Controller Scene > View Controller > Viewの下に配置する。
配置したViewをKolodaViewとして扱うために、右上のIdentity InspectorからClassをKolodaView
にする。ModuleをKoloda
にする。
配置したKolodaViewをViewの真ん中らへんにレイアウトする。
ControllerとViewを繋げる
Main.storyboard
を開きながら、右上の円が二つ重なってるアイコンを押して、ViewController.swiftを表示する。ViewController.swiftにimport Koloda
を書いてKolodaをインポートする。
Main.storyboardのツリーからctrlを押しながらKoloda View
をクリックして、ViewController.swiftのviewDidLoad()
の上らへんにドラッグ&ドロップする。
ドロップしたらNameをkolodaView
にして、Connectを押す。
ViewControllerを書く
KolodaViewには最低限KolodaViewDatasource
を設定する必要がある。Datasourceは表示するカードの情報源となるプロトコル。プロトコルはJavaで言う所のInterfaceとだいたいおなじ。ここではViewControllerをDatasourceにする。
viewDidLoad()
はWeb APIでいうところのwindow.onload
。ここでkolodaViewのdataSourceをcontroller自身にする。
kolodaNumberOfCards
でカードの枚数を返す。ここでは10枚返すことにする。
koloda:viewForCardAt
でカードのViewを返す。ここではコンパイルエラーを取るため、背景がグレーのUIViewを返す。
import UIKit import Koloda class ViewController: UIViewController { @IBOutlet var kolodaView: KolodaView! override func viewDidLoad() { super.viewDidLoad() kolodaView.dataSource = self } } extension ViewController: KolodaViewDataSource { func kolodaNumberOfCards(_ koloda: KolodaView) -> Int { return 10 } func koloda(_ koloda: KolodaView, viewForCardAt index: Int) -> UIView { let view = UIView(frame: koloda.bounds) view.backgroundColor = UIColor.gray return view } }
extension A: B
はJavaでいうclass A implements B
だと思っていい。
ここではdataSourceとControllerのライフサイクルは同じだが、dataSourceを別クラスに切り出すような場合は、Controllerより先に勝手にdataSourceのインスタンスが破棄されないように気をつける。インスタンスの破棄はdeinit
で追える。
deinit {
print("destroyed")
}
表示されるカードが全部グレーだと寂しいので、ランダムな色の背景を持ったUIViewを返すことにする。UIColorをランダムなFloatのRGBから作れば、ランダムな背景のUIViewが作れる。ランダムなFloatとUIColorを生成するメソッドを作って、koloda:viewForCardAt
から呼び出す。
func koloda(_ koloda: KolodaView, viewForCardAt index: Int) -> UIView { let view = UIView(frame: koloda.bounds) view.backgroundColor = randomColor() return view } func randomColor() -> UIColor { return UIColor(colorLiteralRed: randomFloat(), green: randomFloat(), blue: randomFloat(), alpha: 1) } func randomFloat() -> Float { return Float(Float(arc4random()) / Float(UInt32.max)) }
できた
全ソースはGitHubで