RxSwiftとMVVMパターンと仲良くなる次のステップ
1 like•2,835 views
こちらはpotatotips #57 (iOS/Android開発Tips共有会)での登壇資料になります。 https://potatotips.connpass.com/event/109263/ 今回はRxSwift + MVVMパターンを利用した実装の一例として表現が綺麗なUIライブラリと組み合わせた形のサンプル実装からアプローチを行なった実例に関してまとめております。 詳細解説記事: https://qiita.com/fumiyasac@github/items/e426d321fbb8ab846bb6 サンプルリポジトリ: https://github.com/fumiyasac/RxSwiftUIExample サンプルの全体的な動きの動画： https://www.facebook.com/fumiya.sakai.37/videos/vb.100001580558958/2259716017424395/
![UICollectionViewをベースにしたカルーセルを表示する
UI部分に関するちょっとした考慮をRxSwiftで上手に表現する。
カルーセルの回転部分の表現は
ライブラリ: AnimatedCollectionViewLayoutで実現
// ViewController側で利用するためのプロパティ
let featuredLists: Observable<[FeaturedModel]>!
let shouldHidePreviousButton = BehaviorRelay<Bool>(value: true)
let shouldHideNextButton = BehaviorRelay<Bool>(value: false)
let currentIndex = BehaviorRelay<Int>(value: 0)
前へ・次のボタンの表示状態と
現在の表示位置に応じた振る舞い
ボタン押下](https://image.slidesharecdn.com/potatotips57-181217234626/85/RxSwift-MVVM-9-320.jpg)
![ドロップダウンメニューから表示内容を変更する
UIライブラリと組み合わせた表現をRxSwiftで上手に表現する。
// ViewController側で利用するためのプロパティ
let allTitles: Observable<[String]>!
let selectedInformation = BehaviorRelay<InformationModel?>(value: nil) タイトルを押下すると内容が切り替わる
項目選択
ドロップダウンメニューを表示する表現について
はBTNavigationDropdownMenuを利用](https://image.slidesharecdn.com/potatotips57-181217234626/85/RxSwift-MVVM-11-320.jpg)
![初回表示状態からボタンを押すと末尾に10件ずつデータを表示する
API通信を利用してデータを取得して伴う表示部分の調整を実行する。
// ViewController側で利用するためのプロパティ
let isLoading = BehaviorRelay<Bool>(value: false)
let isError = BehaviorRelay<Bool>(value: false)
let recentNewsLists = BehaviorRelay<[RecentNewsModel]>(value: [])
変数: resentNewsListsへ10件ずつ値が追
加されてContainerViewの高さも増加する
ボタン押下](https://image.slidesharecdn.com/potatotips57-181217234626/85/RxSwift-MVVM-13-320.jpg)
![API通信でデータを取得する部分に関するコード例
① Single<JSON>型として、リクエストが1度だけ成功
か失敗かのレスポンスを返すような形にする
② ViewModel部分でAPI通信処理を実行
し結果に応じてプロパティを更新する
※ BehaviorRelay<[RecentNewsModel]>へ追記](https://image.slidesharecdn.com/potatotips57-181217234626/85/RxSwift-MVVM-14-320.jpg)
![インクリメンタルサーチで該当したデータを最大10件表示する
入力された文字列の長さを考慮しながらAPIのリクエストを実行する。
// ViewController側で利用するためのプロパティ
let isLoading = BehaviorRelay<Bool>(value: false)
let isError = BehaviorRelay<Bool>(value: false)
let searchNewsLists = BehaviorRelay<[SearchNewsModel]>(value: [])
3文字以上
入力する
// 検索ボックスの値変化を監視対象にする
private var searchBarText: Observable<String> {
// ① 3文字未満のキーワードの場合は受け付けない
// ② APIリクエストの際に0.5秒のバッファを持たせる
return keywordSearchBar.rx.text
.filter { $0 != nil }
.map { $0! }
.filter { $0.count >= 3 }
.debounce(0.5, scheduler: MainScheduler.instance)
.distinctUntilChanged()
}
必要以上のAPIリクエストをしない様に配慮
※ debounce / throttle を上手に活用](https://image.slidesharecdn.com/potatotips57-181217234626/85/RxSwift-MVVM-15-320.jpg)
RxSwiftとMVVMパターンと仲良くなる次のステップ
- 7. データとUIの関連性 Model - ViewModel - Viewにおける処理と役割の概要の図解になります。 状態更新のリクエスト ViewController ViewModel Model NewYorkTimesProductionAPI 利用するデータの作成 ※ ViewModelでAPIリクエストを実行する場合 UI側への変更を伝える 利用するデータの受取
- 9. UICollectionViewをベースにしたカルーセルを表示する UI部分に関するちょっとした考慮をRxSwiftで上手に表現する。 カルーセルの回転部分の表現は ライブラリ: AnimatedCollectionViewLayoutで実現 // ViewController側で利用するためのプロパティ let featuredLists: Observable<[FeaturedModel]>! let shouldHidePreviousButton = BehaviorRelay<Bool>(value: true) let shouldHideNextButton = BehaviorRelay<Bool>(value: false) let currentIndex = BehaviorRelay<Int>(value: 0) 前へ・次のボタンの表示状態と 現在の表示位置に応じた振る舞い ボタン押下
- 11. ドロップダウンメニューから表示内容を変更する UIライブラリと組み合わせた表現をRxSwiftで上手に表現する。 // ViewController側で利用するためのプロパティ let allTitles: Observable<[String]>! let selectedInformation = BehaviorRelay<InformationModel?>(value: nil) タイトルを押下すると内容が切り替わる 項目選択 ドロップダウンメニューを表示する表現について はBTNavigationDropdownMenuを利用
- 12. ViewModelに定義したBehaviorRelayの値変化とUIが関連する ② タップ処理でViewModelのプロパティを更新 ③ 変更されたViewModelのプロパティ を元にView要素の状態が決定される ※ BTNavigationDropdownMenuに関する初期設定を行う部分。 ① 表示要素の初期設定
- 13. 初回表示状態からボタンを押すと末尾に10件ずつデータを表示する API通信を利用してデータを取得して伴う表示部分の調整を実行する。 // ViewController側で利用するためのプロパティ let isLoading = BehaviorRelay<Bool>(value: false) let isError = BehaviorRelay<Bool>(value: false) let recentNewsLists = BehaviorRelay<[RecentNewsModel]>(value: []) 変数: resentNewsListsへ10件ずつ値が追 加されてContainerViewの高さも増加する ボタン押下
- 14. API通信でデータを取得する部分に関するコード例 ① Single<JSON>型として、リクエストが1度だけ成功 か失敗かのレスポンスを返すような形にする ② ViewModel部分でAPI通信処理を実行 し結果に応じてプロパティを更新する ※ BehaviorRelay<[RecentNewsModel]>へ追記
- 15. インクリメンタルサーチで該当したデータを最大10件表示する 入力された文字列の長さを考慮しながらAPIのリクエストを実行する。 // ViewController側で利用するためのプロパティ let isLoading = BehaviorRelay<Bool>(value: false) let isError = BehaviorRelay<Bool>(value: false) let searchNewsLists = BehaviorRelay<[SearchNewsModel]>(value: []) 3文字以上 入力する // 検索ボックスの値変化を監視対象にする private var searchBarText: Observable<String> { // ① 3文字未満のキーワードの場合は受け付けない // ② APIリクエストの際に0.5秒のバッファを持たせる return keywordSearchBar.rx.text .filter { $0 != nil } .map { $0! } .filter { $0.count >= 3 } .debounce(0.5, scheduler: MainScheduler.instance) .distinctUntilChanged() } 必要以上のAPIリクエストをしない様に配慮 ※ debounce / throttle を上手に活用