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

関連記事

20140916-130550

Swiftの列挙型、switch文、網羅性チェックが素晴らしい!

アップルの新プログラミング言語「Swift」をちょっとずついじってるんですが、列挙型とswitch文

記事を読む

I20151107-111928.jpg

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

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

記事を読む

I20150714-010114.jpg

【Swift】Objective-Cで書いたクラスをメソッド単位で少しずつSwiftへ移行する方法

Objective-Cで作った既存のアプリをSwiftで書き直したいと思っているのですが、一

記事を読む

20160807-113229.jpg

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

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

記事を読む

エディタのショートカット・Auto Layout・ブレークポイントに関する詳しい解説も!「Xcode5徹底解説」

著者の@es_kumagaiさんより献本御礼。iOSアプリ開発に用いるツール「Xcode 5」の

記事を読む

20160416-142928.jpg

Swift 2.2で可能になったタプルの比較を試してみる

Swift 2.2でタプルの比較が行えるようになったので、色々と試してみました。   

記事を読む

I20150720-150147.jpg

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

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

記事を読む

20160309-131202.jpg

ゆるい入門書では物足りない人向けの濃い内容!「本気ではじめるiPhoneアプリ作り」

ヤフー株式会社のiOSエンジニアである西 磨翁(にし まお)さんより、「本気ではじめるiPhon

記事を読む

I20151201-120520.jpg

【Swift 2】switch内にてguardでbreakする

Swift 2のguard内ではreturnしないと文法エラーとなりますが、実はswitch

記事を読む

I20160513-010707.jpg

Swiftで計算型プロパティをネストさせてみる

Swiftの計算型プロパティ(Computed property、コンピューテッドプロパティ)を

記事を読む

【HomeKit】家の照明をSiriで制御できるようにしてみた

Apple製品と家電を連携するシステム「HomeKit(ホーム

【メンズネイル】新宿区大久保のサロンでターコイズとピンクのメタルネイルにしてもらった

2016年10月22日、いつもお世話になっているネイルサロン「

[iOS][Swift]スタックトレース(コールスタック)を表示する2つの方法

iOSアプリ開発で、スタックトレース(コールスタック)を表

【使い方】iOS 10のSiriで出来る事299個をまとめてみた

そろそろiOS 11がリリースされそうな雰囲気ではありますが、iO

【メンズネイル】新宿区大久保のサロンでハーレイ・クインがテーマのネイルにしてもらった

2016年9月27日、いつもお世話になっている「Total b

→もっと見る

PAGE TOP ↑