【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

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

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

記事を読む

I20160409-211651.jpg

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

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

記事を読む

I20160128-101452.jpg

【解決】Playground execution terminated because the process stopped unexpectedlyが出た時の対処法

Xcodeのプレイグラウンドで「Playground execution terminated

記事を読む

I20160208-152320.jpg

【Swift】privateなタイプメソッド作るなら、privateな関数でも良いかもと思った

structとかclassの中で、ちょっとした処理を担当させるprivateなタイプ

記事を読む

I20160217-170931.jpg

2016年2月15日以降、Missing iOS Distribution Signing identity for XXX というエラーが出た場合の解決方法

2016年2月15日以降、AppStoreへの申請やipaファイルのエクスポートで「Missin

記事を読む

20141031-150402.jpg

アップルのベータテストサービス「TestFlight」が正式公開

アップルが先週の木曜、ベータテストサービス「TestFlight」を正式に公開しました。 Te

記事を読む

I20160925-163452.jpg

タブバーアイコン非選択時の色を変更する方法【iOS 10】

UITabBarControllerで、タブバーアイコン非選択時の色を変更する方法を紹介します!

記事を読む

20150409-103620.jpg

描いたベクターグラフィックをSwift/Objective-Cコードに変換できる「Paint Code 2」

引用元 : PaintCode ベクターグラフィックを描き、それを描画するためのSwift

記事を読む

20141227-125250.jpg

実践的な内容まで載っている!開発のプロが教える Swift標準ガイドブック

株式会社マイナビ様より「開発のプロが教える Swift標準ガイドブック」の見本紙を頂きました。早

記事を読む

20160508-170745.jpg

SwiftTaskで失敗したタスクによって異なるエラー処理を行う方法

SwiftTaskで複数のタスクを.successでチェーンさせ、失敗したタスクによって

記事を読む

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 ↑