Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Foldable対応

SansanTech
October 10, 2024
130

 Foldable対応

■ イベント
DroidKaigi 2024 AfterNight
https://sansan.connpass.com/event/329244/

■ 発表者
Sansan株式会社 技術本部 Eight Engineering Unit Mobile Application グループ 古川 真次

■ Android エンジニア採用情報
https://media.sansan-engineering.com/android-engineer

■ Sansan Tech Blog
https://buildersbox.corp-sansan.com/

SansanTech

October 10, 2024
Tweet

More Decks by SansanTech

Transcript

  1. 写真が入ります 古川 真次 Sansan株式会社 Eight Engineering Unit Mobile Applicationグループ -

    大阪府在住 - 趣味:勉強会の主催 - GDG Osaka オーガナイザー - 経歴 - 2019年12月入社:Sansanアプリ開発 - 2022年1月〜:Eightアプリ開発 - 2022年6月〜:マネジャー
  2. Foldable端末対応 How-To - 開く、閉じるでonConfigurationChanged() が呼ばれる - 「開いている or 閉じている」はJetpack WindowManagerの

    FoldingFeatureを使えば取得可能 - ディスプレイ接合部の座標なども取れるため、左側・右側で表示を変え られる
  3. 実装 @Composable fun MainViewScreen(userList: List<User>) { val navigator = rememberListDetailPaneScaffoldNavigator<User>()

    BackHandler(navigator.canNavigateBack()) { navigator.navigateBack() } ListDetailPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, listPane = { AnimatedPane { UserList(userList = userList, onItemClicked = { item -> navigator.navigateTo(ListDetailPaneScaffoldRole.Detail, item) }) } }, detailPane = { AnimatedPane { navigator.currentDestination?.content?.let { UserDetail(it) } } } ) }
  4. 実装 @Composable fun MainViewScreen(userList: List<User>) { val navigator = rememberListDetailPaneScaffoldNavigator<User>()

    BackHandler(navigator.canNavigateBack()) { navigator.navigateBack() } ListDetailPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, listPane = { AnimatedPane { UserList(userList = userList, onItemClicked = { item -> navigator.navigateTo(ListDetailPaneScaffoldRole.Detail, item) }) } }, detailPane = { AnimatedPane { navigator.currentDestination?.content?.let { UserDetail(it) } } } ) }
  5. 実装 @Composable fun MainViewScreen(userList: List<User>) { val navigator = rememberListDetailPaneScaffoldNavigator<User>()

    BackHandler(navigator.canNavigateBack()) { navigator.navigateBack() } ListDetailPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, listPane = { AnimatedPane { UserList(userList = userList, onItemClicked = { item -> navigator.navigateTo(ListDetailPaneScaffoldRole.Detail, item) }) } }, detailPane = { AnimatedPane { navigator.currentDestination?.content?.let { UserDetail(it) } } } ) } リストのPane
  6. 実装 @Composable fun MainViewScreen(userList: List<User>) { val navigator = rememberListDetailPaneScaffoldNavigator<User>()

    BackHandler(navigator.canNavigateBack()) { navigator.navigateBack() } ListDetailPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, listPane = { AnimatedPane { UserList(userList = userList, onItemClicked = { item -> navigator.navigateTo(ListDetailPaneScaffoldRole.Detail, item) }) } }, detailPane = { AnimatedPane { navigator.currentDestination?.content?.let { UserDetail(it) } } } ) } リストのPane
  7. 実装 @Composable fun MainViewScreen(userList: List<User>) { val navigator = rememberListDetailPaneScaffoldNavigator<User>()

    BackHandler(navigator.canNavigateBack()) { navigator.navigateBack() } ListDetailPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, listPane = { AnimatedPane { UserList(userList = userList, onItemClicked = { item -> navigator.navigateTo(ListDetailPaneScaffoldRole.Detail, item) }) } }, detailPane = { AnimatedPane { navigator.currentDestination?.content?.let { UserDetail(it) } } } ) } 詳細画面のPane
  8. 実装 @Composable fun MainViewScreen(userList: List<User>) { val navigator = rememberListDetailPaneScaffoldNavigator<User>()

    BackHandler(navigator.canNavigateBack()) { navigator.navigateBack() } ListDetailPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, listPane = { AnimatedPane { UserList(userList = userList, onItemClicked = { item -> navigator.navigateTo(ListDetailPaneScaffoldRole.Detail, item) }) } }, detailPane = { AnimatedPane { navigator.currentDestination?.content?.let { UserDetail(it) } } } ) } 表示箇所の保持
  9. 実装 @Composable fun MainViewScreen(userList: List<User>) { val navigator = rememberListDetailPaneScaffoldNavigator<User>()

    BackHandler(navigator.canNavigateBack()) { navigator.navigateBack() } ListDetailPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, listPane = { AnimatedPane { UserList(userList = userList, onItemClicked = { item -> navigator.navigateTo(ListDetailPaneScaffoldRole.Detail, item) }) } }, detailPane = { AnimatedPane { navigator.currentDestination?.content?.let { UserDetail(it) } } } ) } 戻るボタンを サポート
  10. 実装 @Composable fun MainViewScreen(userList: List<User>) { val navigator = rememberListDetailPaneScaffoldNavigator<User>()

    BackHandler(navigator.canNavigateBack()) { navigator.navigateBack() } ListDetailPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, listPane = { AnimatedPane { UserList(userList = userList, onItemClicked = { item -> navigator.navigateTo(ListDetailPaneScaffoldRole.Detail, item) }) } }, detailPane = { AnimatedPane { navigator.currentDestination?.content?.let { UserDetail(it) } } } ) }