GoogleI/Oアプリのような フィルター機能を実装する 

⾃⼰紹介 š 梅津 光（ウメツ ヒカル） š 株式会社ナビタイムジャパン 新卒⼊社 2016~ š Androidアプリ開発 バスNAVITIME 法⼈系アプリ š 趣味 個⼈アプリ開発 最近3つ⽬のアプリをリリースしました︕ Work Private 

今⽇話すこと š フィルター機能の実装に⾄った背景 š 機能の実現⽅法 š まとめ 

実装に⾄った背景 

表⽰データがどんどん増えていく問題 データが増えるにつれて⾒⾟くなる フィルター機能を付けよう︕ š ⾃作アプリの機能 š 「良かったこと」を記録できる š 記録したデータはリスト表⽰かつ全件表⽰ š データにはタグ付け可能 登録データを⼀覧表⽰ 

完成イメージ GoogleI/O 2018アプリ プレイブックアプリ GoogleI/Oアプリのフィルター機能(GIF) プレイブックアプリのフィルター機能(GIF) これが作りたい︕ 

実現⽅法 

画⾯構成 GoogleI/Oアプリのフィルター機能(GIF) Google I/Oアプリを参考に、、、 š Fragmentでリスト表⽰ š BottomSheetDialogFragment(以下BottomSheet)でタグ選択 š AndroidのBackdropは実装時点では開発途中でした š タグの選択状態はAACのViewModelとLiveDataで管理 š タグを選択したら即時リストを絞り込むため 

タグの選択状態の管理 BottomSheet Fragment ViewModelを使うことで、、、 š 別々のFragmentで同⼀インスタンスを取得可能 š MutableLiveDataをBottomSheetで変更、Fragmentで監視 š これにより絞り込みをリアクティブに表現可能 ViewModel MutableLiveData タグを選択 変更通知 

ViewModelのプロパティ class FilterViewModel(useCase: UseCase) : ViewModel() { // 今回はMaterialComponentのChipを⽤いてタグ選択を⾏わせたいので、 // 選択されたChipの位置からタグを取得するために全てのタグを持っておきます private val allTags: List = useCase.getAllTag() // 選択状態を変更するためのMutableLiveData private val _selectedTags: MutableLiveData> = MutableLiveData>().apply { value = mutableListOf() } // 変更を通知するためのpublicなLiveData val 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.value selectedTags.add(allTags[index]) _selectedTags.value = selectedTags } else { val selectedTags = _selectedTags.value selectedTags.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を⽤いました 

ご清聴ありがとうございました︕