SwiftBondを使ってみた。observeやObservableの使い方など

公開日: : iPhoneアプリ開発

20160525-233821.jpg

Swiftバインディングフレームワークである「SwiftBond」を使ってみました!

小さなサンプルを作ってみたので、それを使ってSwiftBondの使い方を簡単に紹介したいと思います。

    

スポンサード リンク

「何かが起こったら、それに合わせて何かをしたい」を実現できる

SwiftBondはまだ少ししか使っていないのですが、いまのところ分かっているのは「何かが起こったら、それに合わせて何かをしたい」を簡単に実現できる仕組みなんだなあ、ということ。

他にも便利な側面があるのかもしれませんが、僕にとっては上記の仕組みだけでも十分に便利だと感じました。

    

今回作ってみたサンプルの内容

20160525-234612.jpg

  • タブによって3つの画面を切り替えられる
  • それぞれの画面では、3つの色から1つを選択でき、選択するとその色を表示する
  • 色の選択方法と表示方法は、それぞれの画面で異なっている
  • 色の選択状態は3つの画面で共有されている
  • ある画面で色を選択すると、その変更は他の画面へも即座に反映される
  • 1つ目の画面では、ボタンをタップして色を変更
  • 1つ目の画面では、選択した色が背景色に反映される
  • 2つ目の画面では、UISegmentedControlをタップして色を変更
  • 2つ目の画面では、選択した色が文字としてラベルに表示される
  • 3つ目の画面では、画面をタップする度に色を変更
  • 3つ目の画面では、選択した色がcolorViewの背景色に反映される

    

色を表現するenumを作る

まず、扱う色を表現するenumを1つ作ります。

  • UIColor表現を取り出せる「color」
  • String表現を取り出せる「text」
  • 次の色を取り出せる「next」

を用意しておきます。

import Foundation
import UIKit

enum Color: Int {
    case Red
    case Green
    case Blue
    
    var color: UIColor {
        switch self {
        case .Red:   return UIColor.redColor()
        case .Green: return UIColor.greenColor()
        case .Blue:  return UIColor.blueColor()
        }
    }
    
    var text: String {
        switch self {
        case .Red:   return "Red"
        case .Green: return "Green"
        case .Blue:  return "Blue"
        }
    }
    
    var next: Color {
        switch self {
        case .Red:   return .Green
        case .Green: return .Blue
        case .Blue:  return .Red
        }
    }
}

    

色を管理するシングルトンを作る

今回は、現在の選択色を管理するためのシングルトンを作ってみました。

import Foundation
import Bond

class ColorManager {
    private init() {}
    
    static let sharedManager = ColorManager()
    
    let color = Observable<Color>(.Red)
}

ポイントはlet colorの部分です。Observable<Color>とすることで、変化を監視できるようにします。初期値は.Redとしています。

    

1つ目の画面を作る

1つ目の画面を作ります。まずは表示から。

ColorManager.sharedManager.color.observe { [weak self] color in
    self?.view.backgroundColor = color.color
}

先ほどシングルトンに持たせた監視可能なcolorを、observeを使って監視しています。

監視対象のcolorが変化したタイミングで、画面のviewの色を更新します。

次は各ボタンをタップした時にやりたいことを記述していきます。

redButton.bnd_tap.observe {
    ColorManager.sharedManager.color.value = .Red
}
        
greenButton.bnd_tap.observe {
    ColorManager.sharedManager.color.value = .Green
}

blueButton.bnd_tap.observe {
    ColorManager.sharedManager.color.value = .Blue
}
  • redButtonがタップされたら.Redに変更
  • greenButtonがタップされたら.Greenに変更
  • blueButtonがタップされたら.Blueに変更

という形で記述しています。

ボタンがタップされた時の処理で、viewの更新を行っていない点に注目です。

既に「シングルトンのcolorが変更されたら、画面のviewを更新する」という記述を行っているので必要ないんですね。

    

2つ目の画面を作る

次は2つ目の画面を作っていきましょう。

ColorManager.sharedManager.color.observe { [weak self] color in
    self?.colorLabel.text      = color.text
    self?.colorLabel.textColor = color.color
            
    self?.colorSegment.selectedSegmentIndex = color.rawValue
}

シングルトンのcolorが変更されたら、それに合わせてラベルの文字と色、そしてUISegmentedControlの選択状態を変更しています。

colorSegment.bnd_selectedSegmentIndex.observe { index in
    guard let color = Color(rawValue: index) else { return }
    ColorManager.sharedManager.color.value = color
}

UISegmentedControlの選択状態が切り替わったら、それに合わせてシングルトンのcolorを更新しています。

    

3つ目の画面を作る

最後に3つ目の画面を作りましょう。

ColorManager.sharedManager.color.observe { [weak self] color in
    self?.colorView.backgroundColor = color.color
}

シングルトンのcolorが変化したら、それに合わせてcolorViewの色を変更しています。

@IBAction func tap(sender: AnyObject) {
    ColorManager.sharedManager.color.value
        = ColorManager.sharedManager.color.value.next
}

画面がタップされたら、それに合わせてシングルトンのcolorを次の色に変更しています。

UITapGestureRecognizerのObservableが見当たらなかったのですが、おそらく独自に作ることも可能だと思います(後で調査)。

    

サンプルコードはこちら

今回作成したプロジェクトはこちらからダウンロードできます ⇒ akio0911/SwiftBondExample

    

@akio0911はこう思った。

今回のように基礎的な使い方であれば、思っていたよりもかなり扱いが簡単ですね!

(より発展的な使い方になってくると、扱いが難しくなるのかもしれないですけど)

データの変化に合わせたUIの更新を都度行わなくても良いので楽ですね。今作っている個人アプリでSwiftBondを導入したくなってきました。

    

↓ SwiftBondを使うなら、以下の本でクロージャの使い方について熟知しておいたほうが良いかもしれません。

この記事が気に入ったら「いいね!」しよう

follow us in feedly

Feedlyで最新記事を購読

Twitterで更新情報をゲット!

LINEでご感想・ご要望お送りください!
(スマホでLINEを起動 > 友だち追加 > QRコード)

関連記事

I20160409-211651.jpg

Xcode 7.3の新機能についてまとめてみた

2016年3月22日にXcode 7.3がリリースされましたが、自分が知らない機能があるかもしれ

記事を読む

20160804-193842.jpg

【Xcode 7】Storyboardで複数の制約をまとめて追加する方法

Xcode 7のStoryboardで、複数の制約をまとめて追加する方法について解説します!

記事を読む

20160802-232454.jpg

【Xcode 7】メソッドがどこから呼びだされているかを調べる方法

Xcode 7で、メソッドがどこから呼び出されているのか調べる方法を紹介します!     方法

記事を読む

I20160204-120840.jpg

Swiftでプロトコル型に対して===演算子を使いたい時の対処法

プロトコル型の変数や定数に対して===演算子を使うと「error: binary opera

記事を読む

20160807-113229.jpg

UITableViewのリサイズに合わせて一番下のセルを常に一番下に表示する方法

一番下のセルを表示している状態でUITableViewの下端を上に移動させると一番下のセルが隠れ

記事を読む

20160730-172416.jpg

Auto Layoutで非表示にした部分を詰める(トルツメ)する方法

Auto Layoutを使って非表示にしたコントロールの部分を詰める(トルツメ)方法を説明します

記事を読む

20150522-105524.jpg

【書籍】初心者にオススメな本!「これからはじめる Apple Watchアプリ開発入門」

Apple Watchは買いましたか?使ってますか?アプリを作ってみたくはないですか? という

記事を読む

iPhoneアプリ開発の初心者にオススメな本はこれだ!iOS 7とXcode 5に対応!

僕が講師をしている初心者向けのiPhoneアプリ開発講座「アプリクリエイター道場」でも参考書とし

記事を読む

20160724-154909.jpg

デザインの素人がノンデザイナーズ・デザインブックを読んだら、デザインの原則が結構分かるようになった!

ずっとエンジニアとして働いてきてデザインに関してはまったくの素人な僕ですが、「ノンデザイナーズ・

記事を読む

I20160209-123839.jpg

【Swift】プロパティのsetとgetには異なるアクセス修飾子を指定できる

Swiftでは、プロパティのセッタ(set節)とゲッタ(get節)に異なるアクセス修飾子

記事を読む

I20170521-225453.jpg
東京駅八重洲口の「羊肉酒場 悟大」で網焼きジンギスカンを頂きました!

ゆうせいさんと株式会社 大庄さんからご招待頂き、悟大withサッポ

I20170514-165235.jpg
iPhoneと連携できる体重体組成計「Withings Body Cardio」を使ってます

ジムに通い始めて体脂肪率が落ち始めたのをキッカケに、iPhoneと

I20170507-155440.jpg
【派手髪】ハーレイクイン風の髪色に染めてもらいました

2016年10月20日、ハーレイクイン風の髪色に染めてもらいました

I20170504-173110.jpg
【メンズネイル】東京・新宿のネイルサロンでターコイズのホログラムネイルしてもらった

ネイルネタが1年分くらい溜まっているので、ちょっとずつ書いていこう

I20170502-010117.jpg
SNUGGのライトニングケーブルが耐久性高し。8ヶ月使ってますが断線の気配なし!

iPhoneの充電&転送ケーブルであるLightningケーブルっ

→もっと見る

PAGE TOP ↑