RxSwift

RxSwift, UIButtonでUILabelのラベルの文字を変更してみる

概要

こちらがよくQiitaで投稿されるRxSwiftを用いたUIButtonで「バインディング」するとか言われている技術の説明になります。(違いました)
バインディングとか行っているのにやっていることは今までと同じ概念(RxSwiftなしでの実装)になります。

開発環境について

Xcode: 10.1
Swift: 4.2
RxSwift: 4.4.0
RxCocoa: 4.4.0

Podfileについて

target 'RxPractice' do
  # Comment the next line if you're not using Swift and don't want to use dynamic frameworks
  use_frameworks!

  # Pods for RxPractice
    pod 'RxSwift', '~> 4.0'  # 追加する
    pod 'RxCocoa', '~> 4.0'  # 追加する
  target 'RxPracticeTests' do
    inherit! :search_paths
    # Pods for testing
  end

  target 'RxPracticeUITests' do
    inherit! :search_paths
    # Pods for testing
  end

end

バインディングの処理について

ViewControllerにUILabelを載せる

スクリーンショット 2019-02-10 21.16.28.png

@IBOutlet接続をしましょう。

スクリーンショット 2019-02-10 21.17.17.png

実装前のソースコードはこちらになります。

ViewController.swift

import UIKit
import RxCocoa
import RxSwift

class ViewController: UIViewController {
    
    @IBOutlet weak var button: UIButton!
    @IBOutlet weak var label: UILabel!
    
    var disposeBag = DisposeBag()

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        button.rx.tap // tapが @IBAction func tapButton() {} に該当
            .subscribe(onNext: { _ in  // _ が (_ sender: AnyObject) の引数に該当
                // ここに@IBActionの処理を書いていく
                print("RxSwift")
            })
            .disposed(by: disposeBag)
    }
}

 

UIButtonとUILabelをバインディング(要は@IBActionでの処理)を書いていきます。

ViewController.swift

class ViewController: UIViewController {
    
    @IBOutlet weak var button: UIButton!
    @IBOutlet weak var label: UILabel!
    
    var disposeBag = DisposeBag()
    var count = 0

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        button.rx.tap // tapが @IBAction func tapButton() {} に該当
            .subscribe(onNext: { [weak self] _ in  // _ が (_ sender: AnyObject) の引数に該当
                // ここに@IBActionの処理を書いていく
                print("RxSwift")
                guard let self = self else { return }
                self.count += 1
                self.label.text = "\(self.count)"
            })
            .disposed(by: disposeBag)
    }
}

アプリをビルドしてボタンをタップしてみましょう。

スクリーンショット 2019-02-10 21.25.46.png

ラベルの文字が変われば成功です。

多分、ここまでが基本形ですが苦手意識のある人は3回くらい写経したらリズムが分かってくると思います。

ABOUT ME
tamappe
都内で働くiOSアプリエンジニアのTamappeです。 当ブログではモバイルアプリの開発手法について紹介しています。メインはiOS、サブでFlutter, Android も対応できます。 執筆・講演のご相談は tamapppe@gmail.com までお問い合わせください。