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

公開日: : 最終更新日:2018/07/11 iOSアプリ開発

記事内に広告を含む場合があります。記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。

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についての学習を続けたいと思います。

    

    

この記事を書いた人
あきお(@akio0911
派手髪iOSエンジニア。Twitterアカウントは@akio0911。YouTubeチャンネル「あきおチャンネル」にてiOSアプリ開発講座を公開中。著書に「iPhoneアプリ開発レシピ」「cocos2d for iPhoneレッスンノート」など。iOSアプリ開発をテーマとしたオンラインサロン「アプリ道場サロン」を運営。東京・大阪にてアプリ開発講座「アプリクリエイター道場」を主催。

関連記事

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

Twitterで更新情報をゲット!

PAGE TOP ↑