【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コード)

関連記事

20160724-154909.jpg

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

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

記事を読む

I20151107-111928.jpg

Swift 2で要求バージョンの指定・実行環境バージョンの確認を行う(#availableと@available)

Swift 2で追加された#available, @availableの使い方についてメモしてお

記事を読む

I20160212-000722.jpg

Swiftにおけるセレクタ(Selector)について調べてみた

NSTimerなどを使う際、引数に「Selector」という型があるのですが、これがSwiftで

記事を読む

I20150720-150147.jpg

Apple Watchアプリを作りたいならこの書籍!「詳細!Apple Watch アプリ開発 入門ノート」

     Apple Watchアプリの作り方を学ぶのにオススメな書籍、「詳細!Apple W

記事を読む

20150525-224340.jpg

【Swift】クロージャをメソッドや関数の引数として渡す方法

Swiftでメソッドの引数としてクロージャを渡す方法について解説したいと思います。     

記事を読む

I20150805-182005.jpg

Swiftにおける関数型のエッセンスを学ぶために「関数プログラミング実践入門」を読み始めた

Swiftの関数型言語的な特徴についての話を各所で見るようになりましたが、自分は関数型言語の

記事を読む

I20151103-131550.jpg

iPhoneアプリ開発にオススメの本7選(初心者向け含む)2015年11月版

Xcode 7/Swift 2/iOS 9に対応した関連書籍が揃ってきたので、iPhoneア

記事を読む

I20160525-233821.jpg

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

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

記事を読む

20150327-131839.jpg

【Apple Watchアプリ】ボタン内の文字の先頭に画像を入れる方法【WatchKit】

Apple Watch向けのアプリを作るためのフレームワーク「WatchKit」。そのWatch

記事を読む

I20151119-165939.jpg

Swift 2.1に対応した本「詳解 Swift 改訂版」が出るぞ!

Swiftの文法に関する解説書の定番「詳解 Swift」の、Swift2.1に対応した改訂版「詳

記事を読む

PAGE TOP ↑