【RxSwift】2つのUITextFieldに入力された数値の合計をUILabelに表示する

公開日: : iPhoneアプリ開発

20160420-180135.jpg

そろそろRxSwiftについて学び始めよう!ということで、まずは2つのUITextFieldに入力された数値の合計をUILabelに表示するシンプルなコードを書いてみました。

まだまだ学び始めたばかりなので、もし間違いがあったり、より良い方法があればぜひ教えていただけると嬉しいです(^^) ⇒ https://twitter.com/akio0911

    

テキストフィールドとラベルを配置する

20160420-174253.jpg

まずはストーリーボードで、テキストフィールド2つとラベル1つを配置します。

2つのテキストフィールドに入力された数値の合計を、ラベルに表示します。

    

アウトレットを作る

20160420-17451.jpg

2つのテキストフィールドと1つのラベルのアウトレットを作ります。

    

RxSwiftを使ってコードを書く

RxSwiftを使ってコードを書きます。

アクションやデリゲートの類が一切なく、viewDidLoadだけで完結しているのがポイントです。

var disposeBag = DisposeBag()

override func viewDidLoad() {
    super.viewDidLoad()
    
    let num1 = textField1.rx_text              // (1)
        .map{ Int($0) ?? 0 }                   // (2)
    let num2 = textField2.rx_text              // (3)
        .map{ Int($0) ?? 0 }                   // (4)

    Observable
        .combineLatest(num1, num2) { $0 + $1 } // (5)
        .map { $0.description }                // (6)
        .bindTo(resultLabel.rx_text)           // (7)
        .addDisposableTo(disposeBag)
}

    

マーブルダイアグラム

先ほどのコードの動きを、マーブルダイアグラムを使って見ていきましょう。ちなみにSketchを使って描きました。

20160420-180135.jpg

(1)は、1つ目のテキストフィールドのtextプロパティのストリームです。ユーザーが入力した文字列ですね。

(1)に対してmapを使って(2)を作ります。(2)はユーザーが入力した文字列を数値に変換したものです。

(3)にもmapを使って同様に(4)を作ります。

(5)は、(2)と(4)の最後の数値を足し合わせた結果の数値のストリームです。combineLatestを使ってストリームを作っています。

ユーザーが1つ目のテキストフィールドに”5″を入力した時の様子が図の中央に描かれていますが、この時、2つ目のテキストフィールドには”3″が入力されています。よって(5)のストリームでは5+3=8が流れてくるわけです。

(6)は単純に(5)を文字列化したストリームです。

そして最終的に(7)はラベルの表示文字列の遷移を表しています。

このように、RxSwift(というかリアクティブプログラミング)を用いると、様々なものをストリームとして統一的に扱い、「どのように動かすか」ではなく、「何をしたいのか」を宣言的に記述することができるようです。

    

@akio0911はこう思った。

viewDidLoadにしかコードを書いていないのに、テキストフィールドを編集した瞬間にラベルの合計値が再計算されるのにはちょっと感動しますね!

引き続きRxSwiftについての学習を続けたいと思います。

    

    

関連記事

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

follow us in feedly

Feedlyで最新記事を購読

Twitterで更新情報をゲット!

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

PAGE TOP ↑