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を載せる
@IBOutlet接続をしましょう。
実装前のソースコードはこちらになります。
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) } }
アプリをビルドしてボタンをタップしてみましょう。
ラベルの文字が変われば成功です。
多分、ここまでが基本形ですが苦手意識のある人は3回くらい写経したらリズムが分かってくると思います。