One screen, many BottomSheets

Transcript

1. One screen,
 many BottomSheets Keishin Yokomaku(@KeithYokoma) / Drivemode, Inc.
2. One screen, many BottomSheets About me ▸ Keishin Yokomaku - @KeithYokoma ▸ GitHub / Twitter / Stack Over fl ow ▸ Drivemode, Inc. / Engineer
3. ▸ e.g. X (چ Twitter) ▸ ԡ͢Ϙλϯ͝ͱʹҧ͏ BottomSheet ͕ग़Δ One screen, many BottomSheets Ұͭͷը໘ʹෳ਺छྨͷ BottomSheet Λग़͍ͨ͠
4. One screen, many BottomSheets ߟ͑ΒΕΔ࣮૷ ▸ ͦΕͧΕͷ BottomSheet Λ… ▸ BottomSheetDialogFragment Ͱ࡞Δ ▸ BottomSheetScaffold ͷ sheetContent Ͱग़͠෼͚Δ
5. One screen, many BottomSheets BottomSheetDialogFragment Ͱ࡞Δ ▸ UI ͷछྨ͝ͱʹ Fragment Λ෼͚Δ BottomSheetDialogFragment BottomSheetDialogFragment BottomSheetDialogFragment
6. One screen, many BottomSheets BottomSheetDialogFragment Ͱ࡞Δ class FooBottomSheetFragment : BottomSheetDialogFragment() { override fun onCreateView( inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle? ): View = ComposeView(requireContext()).apply { setContent { BottomsheetTheme { FooSheetContent() } } } @Composable fun FooSheetContent() {} }
7. One screen, many BottomSheets BottomSheetDialogFragment Ͱ࡞Δ ▸ BottomSheetDialogFragment ͷ UI ▸ Compose Ͱ࡞ΕΔ ▸ දࣔɾඇදࣔʹ͢Δ෦෼͚ͩ DialogFragment ͷ API ʹै͏ ▸ BottomSheet ্Ͱͷ UI ΠϕϯτͷϋϯυϦϯά ▸ DialogFragment ͰΑ͋͘ΔίʔϧόοΫͷ࣮૷ํ๏Ͳ͏͢Δ͔໰୊ ▸ BottomSheetDialogFragment Λϗετ͍ͯ͠Δը໘ͱಉ͡ ViewModel Λ ஫ೖͰ͖ΔͳΒίʔϧόοΫΛఆٛ͠ͳ͍͍ͯ͘
8. One screen, many BottomSheets BottomSheetDialogFragment Ͱ࡞Δ: ViewModel class MainActivity : AppCompatActivity() { private val viewModel: MyViewModel by viewModels() } class FooBottomSheetFragment : BottomSheetDialogFragment() { private val viewModel: MyViewModel by activityViewModels() } class MyViewModel : ViewModel() {}
9. One screen, many BottomSheets BottomSheetScaffold ͷ sheetContent Ͱग़͠෼͚Δ ▸ UI ͷछྨ͝ͱʹ Composable Λ෼͚Δ RepostSheetContent() PostMenuSheetContent() ShareSheetContent()
10. One screen, many BottomSheets BottomSheetScaffold ͷ sheetContent Ͱग़͠෼͚Δ BottomSheetScaffold( sheetContent = { when (sheetType) { BottomSheetType.FOO -> { Text(text = "Hello FOO") } BottomSheetType.BAR -> { Text(text = "Hello BAR") } BottomSheetType.BAZ -> { Text(text = "Hello BAZ") } BottomSheetType.NONE -> {} } } ) enum class BottomSheetType { FOO, BAR, BAZ, NONE }
11. One screen, many BottomSheets BottomSheetScaffold ͷ sheetContent Ͱग़͠෼͚Δ ▸ Ͳ͏ͯ͠΋෼ذ͕૿͑Δ ▸ sheetContent ͕Ұ͔ͭ͠ͳ͍ͷͰ͜ͷதͰදࣔΛ෼͚Δ
12. One screen, many BottomSheets BottomSheetScaffold ͷ sheetContent Ͱग़͠෼͚Δ ▸ BottomSheet ͷ UI ͕ΞϓϦͷ࢓༷ͱ߹Θͳ͍Մೳੑ ▸ BottomNavigationView + Fragment Ͱը໘Λߏ੒ͨ͠ͱ͖ ▸ Fragment ͷதʹ BottomSheetScaffold ͕͋Δ ▸ Fragment ͕࣋ͭ Boundary Ͱܭࢉ͢ΔͷͰ BottomSheet ͕ BottomNavigationView ͷ্͔Βग़ͯ͘Δ
13. One screen, many BottomSheets ͲͪΒ͕Α͍͔ ▸ It depends ▸ ཁ݅΍ΞϓϦͷ UI ͷߏ੒࣍ୈ ▸ શ෦ Compose ͳΒ BottomSheetDialogFragment ͸࢖Θͳͯ͘΋ྑ͍
14. One screen,
 many BottomSheets Keishin Yokomaku(@KeithYokoma) / Drivemode, Inc.