自作アプリにてリスト表示しているデータをタグによってフィルタリングする機能を作りました。 スライド内で説明しているアプリはこちらになります。 https://play.google.com/store/apps/details?id=com.umehika.happinessbank&hl=ja
GoogleI/Oアプリのようなフィルター機能を実装する
View Slide
⾃⼰紹介 梅津 光(ウメツ ヒカル) 株式会社ナビタイムジャパン新卒⼊社 2016~ Androidアプリ開発バスNAVITIME法⼈系アプリ 趣味個⼈アプリ開発最近3つ⽬のアプリをリリースしました︕WorkPrivate
今⽇話すこと フィルター機能の実装に⾄った背景 機能の実現⽅法 まとめ
実装に⾄った背景
表⽰データがどんどん増えていく問題データが増えるにつれて⾒⾟くなるフィルター機能を付けよう︕ ⾃作アプリの機能 「良かったこと」を記録できる 記録したデータはリスト表⽰かつ全件表⽰ データにはタグ付け可能登録データを⼀覧表⽰
完成イメージGoogleI/O 2018アプリ プレイブックアプリGoogleI/Oアプリのフィルター機能(GIF) プレイブックアプリのフィルター機能(GIF)これが作りたい︕
実現⽅法
画⾯構成GoogleI/Oアプリのフィルター機能(GIF)Google I/Oアプリを参考に、、、 Fragmentでリスト表⽰ BottomSheetDialogFragment(以下BottomSheet)でタグ選択 AndroidのBackdropは実装時点では開発途中でした タグの選択状態はAACのViewModelとLiveDataで管理 タグを選択したら即時リストを絞り込むため
タグの選択状態の管理BottomSheetFragmentViewModelを使うことで、、、 別々のFragmentで同⼀インスタンスを取得可能 MutableLiveDataをBottomSheetで変更、Fragmentで監視 これにより絞り込みをリアクティブに表現可能ViewModelMutableLiveDataタグを選択変更通知
ViewModelのプロパティclass FilterViewModel(useCase: UseCase) : ViewModel() {// 今回はMaterialComponentのChipを⽤いてタグ選択を⾏わせたいので、// 選択されたChipの位置からタグを取得するために全てのタグを持っておきますprivate val allTags: List = useCase.getAllTag()// 選択状態を変更するためのMutableLiveDataprivate val _selectedTags: MutableLiveData> =MutableLiveData>().apply { value = mutableListOf() }// 変更を通知するためのpublicなLiveDataval selectedTags: LiveData> =Transformations.map(_selectedTags) { it.toList() }}
ViewModelのメソッドclass FilterViewModel(useCase: UseCase) : ViewModel() {// Chipを選択すると位置とチェック状態が渡ってくるfun onCheckedChanged(index: Int, isChecked: Boolean) =if (isChecked) {val selectedTags = _selectedTags.valueselectedTags.add(allTags[index])_selectedTags.value = selectedTags} else {val selectedTags = _selectedTags.valueselectedTags.remove(allTags[index])_selectedTags.value = selectedTags}}
Fragment, BottomSheetのコード// Fragment, BottomSheet両者で同じインスタンスを取得可能viewModel =ViewModelProviders.of(targetFragment, object : ViewModelProvider.Factory {@Suppress("UNCHECKED_CAST")override fun create(modelClass: Class): T =FilterViewModel(useCase) as T}).get(FilterViewModel::class.java)viewModel.selectedTags.observe(this, Observer {// 通知された選択されたタグでリストをフィルタリングadapter.items = filter(it)})
完成︕ BottomSheetでタグを選択 LiveDataの変更をリスト表⽰するFragmentが監視 選択されたタグでリストをフィルタリング 動的に表⽰切り替えフィルタリングの様⼦(GIF)
まとめ タグ選択で表⽰要素を絞り込むフィルター機能を実装しました BottomSheetで選択したタグをリスト表⽰するFragmentに通知する仕組みにしました タグの選択状態を通知するためにAACのViewModel, LiveDataを⽤いました
ご清聴ありがとうございました︕