RxSwiftとMVVMパターンと仲良くなる次のステップ
•
1 like•2,808 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/
Recommended
More Related Content
What's hot
What's hot (20)
Similar to RxSwiftとMVVMパターンと仲良くなる次のステップ
Similar to RxSwiftとMVVMパターンと仲良くなる次のステップ (17)
More from Fumiya Sakai
More from Fumiya Sakai (9)
Recently uploaded
Recently uploaded (10)
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 を上手に活用