Slide 1

Slide 1 text

One screen,
 many BottomSheets Keishin Yokomaku(@KeithYokoma) / Drivemode, Inc.

Slide 2

Slide 2 text

One screen, many BottomSheets About me ▸ Keishin Yokomaku - @KeithYokoma ▸ GitHub / Twitter / Stack Over fl ow ▸ Drivemode, Inc. / Engineer

Slide 3

Slide 3 text

▸ e.g. X (چ Twitter) ▸ ԡ͢Ϙλϯ͝ͱʹҧ͏ BottomSheet ͕ग़Δ One screen, many BottomSheets Ұͭͷը໘ʹෳ਺छྨͷ BottomSheet Λग़͍ͨ͠

Slide 4

Slide 4 text

One screen, many BottomSheets ߟ͑ΒΕΔ࣮૷ ▸ ͦΕͧΕͷ BottomSheet Λ… ▸ BottomSheetDialogFragment Ͱ࡞Δ ▸ BottomSheetScaffold ͷ sheetContent Ͱग़͠෼͚Δ

Slide 5

Slide 5 text

One screen, many BottomSheets BottomSheetDialogFragment Ͱ࡞Δ ▸ UI ͷछྨ͝ͱʹ Fragment Λ෼͚Δ BottomSheetDialogFragment BottomSheetDialogFragment BottomSheetDialogFragment

Slide 6

Slide 6 text

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() {} }

Slide 7

Slide 7 text

One screen, many BottomSheets BottomSheetDialogFragment Ͱ࡞Δ ▸ BottomSheetDialogFragment ͷ UI ▸ Compose Ͱ࡞ΕΔ ▸ දࣔɾඇදࣔʹ͢Δ෦෼͚ͩ DialogFragment ͷ API ʹै͏ ▸ BottomSheet ্Ͱͷ UI ΠϕϯτͷϋϯυϦϯά ▸ DialogFragment ͰΑ͋͘ΔίʔϧόοΫͷ࣮૷ํ๏Ͳ͏͢Δ͔໰୊ ▸ BottomSheetDialogFragment Λϗετ͍ͯ͠Δը໘ͱಉ͡ ViewModel Λ ஫ೖͰ͖ΔͳΒίʔϧόοΫΛఆٛ͠ͳ͍͍ͯ͘

Slide 8

Slide 8 text

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() {}

Slide 9

Slide 9 text

One screen, many BottomSheets BottomSheetScaffold ͷ sheetContent Ͱग़͠෼͚Δ ▸ UI ͷछྨ͝ͱʹ Composable Λ෼͚Δ RepostSheetContent() PostMenuSheetContent() ShareSheetContent()

Slide 10

Slide 10 text

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 }

Slide 11

Slide 11 text

One screen, many BottomSheets BottomSheetScaffold ͷ sheetContent Ͱग़͠෼͚Δ ▸ Ͳ͏ͯ͠΋෼ذ͕૿͑Δ ▸ sheetContent ͕Ұ͔ͭ͠ͳ͍ͷͰ͜ͷதͰදࣔΛ෼͚Δ

Slide 12

Slide 12 text

One screen, many BottomSheets BottomSheetScaffold ͷ sheetContent Ͱग़͠෼͚Δ ▸ BottomSheet ͷ UI ͕ΞϓϦͷ࢓༷ͱ߹Θͳ͍Մೳੑ ▸ BottomNavigationView + Fragment Ͱը໘Λߏ੒ͨ͠ͱ͖ ▸ Fragment ͷதʹ BottomSheetScaffold ͕͋Δ ▸ Fragment ͕࣋ͭ Boundary Ͱܭࢉ͢ΔͷͰ BottomSheet ͕ BottomNavigationView ͷ্͔Βग़ͯ͘Δ

Slide 13

Slide 13 text

One screen, many BottomSheets ͲͪΒ͕Α͍͔ ▸ It depends ▸ ཁ݅΍ΞϓϦͷ UI ͷߏ੒࣍ୈ ▸ શ෦ Compose ͳΒ BottomSheetDialogFragment ͸࢖Θͳͯ͘΋ྑ͍

Slide 14

Slide 14 text

One screen,
 many BottomSheets Keishin Yokomaku(@KeithYokoma) / Drivemode, Inc.