RxSwift事始め。UIButtonのタップ実装
概要
RxSwiftを書いていて慣れてきましたので同僚にわかりやすく説明するためメモとして残してみます。
これをみてRxSwiftに苦手意識を持っているエンジニアの手助けができたらいいなと思いました。
開発環境について
Xcode: 10.1
Swift: 4.2
RxSwift: 4.4.0
RxCocoa: 4.4.0
RxSwiftのインストール
- まずはcocoapodをインストールしましょう。XXX.xcodeprojと同じディレクトリで以下を実行。
pod init
これで、Podfileが作成されます。 Podfileを開いてみると、下記のようになっています。
# Uncomment the next line to define a global platform for your project # platform :ios, '9.0' 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 target 'RxPracticeTests' do inherit! :search_paths # Pods for testing end target 'RxPracticeUITests' do inherit! :search_paths # Pods for testing end end
- RxSwiftとRxCocoaをインストールする
先ほど作成した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
- 次のコマンドを実行します。
pod install
これでcocoapodのインストールが始まってRxSwiftとRxCocoaのインストールが完了します。
Analyzing dependencies Downloading dependencies Installing RxAtomic (4.4.0) Installing RxCocoa (4.4.0) Installing RxSwift (4.4.0) Generating Pods project Integrating client project [!] Please close any current Xcode sessions and use `RxPractice.xcworkspace` for this project from now on. Sending stats Pod installation complete! There are 2 dependencies from the Podfile and 3 total pods installed. [!] Automatically assigning platform `ios` with version `12.1` on target `RxPractice` because no platform was specified. Please specify a platform for this target in your Podfile. See `https://guides.cocoapods.org/syntax/podfile.html#platform`.
ディレクトリにXXX.xcworkspace
が作成されますのでそちらを開きます。
これで基本的な設定が終わります。
UIButtonのRxSwift処理
RxSwiftを導入すると基本的に@IBAction
が不要になるということだけ頭に入れてください。
@IBAction
処理がRxになるという認識です。
- storyboardのVCの上に
UIButton
を置く - @IBOutlet接続をする
- RxSwiftでSubcribe(購読)する
こんな流れです。
- storyboardのVCの上に
UIButton
を置く
- @IBOutlet接続をする
ViewControler.swift
に下記のように編集します。
import UIKit class ViewController: UIViewController { @IBOutlet weak var button: UIButton! override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view, typically from a nib. } }
あとはstoryboardからUIButton
を接続します。
- RxSwiftでSubcribe(購読)する
ViewControllerにRxSwift
とRxCocoa
をimportします。
import UIKit import RxCocoa import RxSwift
では@IBAction
の処理を実装していきます。
class ViewController: UIViewController { @IBOutlet weak var button: UIButton! 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) } }
これでアプリをビルドしてみましょう。
ボタンをタップしてコンソールにRxSwift
とプリントされたら完成です。
まずこれが基本形だということを認識できればRxSwift事始めは完了だと思います。