概要

今回はRxSwiftを使ってUIKitのデータバインディングの実装を見ていきます。

RxSwiftはUIKitの数だけメソッドがあります。

こちらのページがRxで実装できるクラスの一覧です。

GitHub

ReactiveX/RxSwift

https://github.com/ReactiveX/RxSwift/tree/e7d667c0c9c9d70c92f141827c509b443a97473e/RxCocoa/iOS

Reactive Programming in Swift. Contribute to ReactiveX/RxSwift development by creating an account on GitHub.

めちゃくちゃ多いですね。大体のUIKitをRxで書ける事がわかります。

その中でもよく使いそうなものをチョイスして紹介しようと思っているのですが、

簡単な順から

• UISwitch
• UINotification
• UIScrollView
• UISession

この辺りをメインに解説していきたいと思います。

今回はUISwitchについて説明します。

Storyboardの構成について

今回のStoryboardの構成は下の画像の通りです。

switch_storyboard

UIButtonとUISwitchだけを使います。

ViewController側のソースコードについて

ではViewController側のソースコードをサクッと載せていきます。

Rxの書き方に慣れてくるとだいたい想像ができるようになります。

ViewController.swift

import UIKit
import RxCocoa
import RxSwift

class ViewController: UIViewController {
    
    @IBOutlet weak var button: UIButton!
    @IBOutlet weak var sw: UISwitch!
    
    let disposeBag = DisposeBag()

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // UIbuttonが押せる時は「押せます」のタイトル
        button.setTitle("押せます", for: .normal)
        // UIbuttonが押せない時は「押せません」のタイトル
        button.setTitle("押せません", for: .disabled)
        
        // UISwitchのvalueを変数でとります。
        // 返り値は RxSwift.Observable<Self.E>
        let termsValidation = sw
            .rx.value
            .share(replay: 1)
        
        // ここでObservableの変数をデータバインディングします
        termsValidation
            .bind(to: button.rx.isEnabled)
            .disposed(by: disposeBag)
    }
}

以上となります。

各所、処理の部分にコメントを記載していますので行数が少し増えています。

let termsValidation = sw
            .rx.value
            .share(replay: 1)

このコードでUISwtich のObservableな状態を変数にします。

そのあとにObservableなUISwitchのvalueとUIBbuttonの状態(UIButton#isEnable)をデータバイディングしますので

termsValidation
            .bind(to: button.rx.isEnabled)
            .disposed(by: disposeBag)

このようにコードを書きました。

これでアプリを起動させるとUISwitchをタップする度にUIButtonの状態を変化させることができます。

UISwitchがonの時

switch_on_2

UISwitchがoffの時

swtich_off_2

このように変化します。

UISwitchはon/offの切り替えぐらいしか実装が思いつかないのでRxを使うとなると上記のパターンぐらいしか思いつきません。

これでUISwitchのRxの書き方がわかりました。