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/

Transcript

1. Foldable対応 Sansan株式会社 技術本部 Eight Engineering Unit Mobile Application グループ 古川 真次
2. 写真が入ります 古川 真次 Sansan株式会社 Eight Engineering Unit Mobile Applicationグループ - 大阪府在住 - 趣味：勉強会の主催 - GDG Osaka オーガナイザー - 経歴 - 2019年12月入社：Sansanアプリ開発 - 2022年1月〜：Eightアプリ開発 - 2022年6月〜：マネジャー
3. Foldable端末とは - 端末を開閉することができる（Fold-able）端末 - スマホを縦半分に折りたためるFlip、 折りたたむとスマホサイズになるFoldがある https://news.samsung.com/jp/galaxy-z-flip6-olympic-edition- paris-2024 https://consumer.huawei.com/cn/phones/mate-xt-ultimate-design/
4. Foldable端末対応 How-To - 開く、閉じるでonConfigurationChanged() が呼ばれる - 「開いている or 閉じている」はJetpack WindowManagerの FoldingFeatureを使えば取得可能 - ディスプレイ接合部の座標なども取れるため、左側・右側で表示を変え られる
5. アプリをFoldable対応するには - listDetailPaneScaffoldを利用すると簡単に実現が可能(experimental) - https://developer.android.com/develop/ui/compose/layouts/adaptive/list-detail https://developer.android.com/develop/ui/compose/layouts/adaptive/list-detail https://developer.android.com/jetpack/androidx/releases/compose -material3-adaptive
6. 具体的な実装
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) } } } ) }
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) } } } ) } リストのPane
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) } } } ) } リストのPane
11. 実装 @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
12. 実装 @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) } } } ) } 表示箇所の保持
13. 実装 @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) } } } ) } 戻るボタンを サポート
14. 実装 @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) } } } ) }
15. - listDetailPaneScaffoldを使えば50行くらいでサンプルが作れるくらい簡単 - FoldingFeatureを駆使するとディスプレイの折り目も避けられる まとめ
16. 仲間を募集しています https://open.talentio.com/r/1/c/sansan/pages/76400 https://jp.corp-sansan.com/mimi/2024/07/interview-100 Androidエンジニア 東京・大阪・福岡