DEV Community

myougaTheAxo
myougaTheAxo

Posted on

Scaffold完全ガイド — TopAppBar/BottomBar/FAB/Snackbar/Drawer統合

#android #kotlin #jetpackcompose #mobile

この記事で学べること

Scaffold（TopAppBar、BottomBar、FAB、Snackbar、Drawer統合レイアウト）を解説します。

基本Scaffold 

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MainScaffold() {
    val snackbarHostState = remember { SnackbarHostState() }
    val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior()

    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
        topBar = {
            TopAppBar(
                title = { Text("マイアプリ") },
                navigationIcon = {
                    IconButton(onClick = {}) { Icon(Icons.Default.Menu, "メニュー") }
                },
                actions = {
                    IconButton(onClick = {}) { Icon(Icons.Default.Search, "検索") }
                    IconButton(onClick = {}) { Icon(Icons.Default.MoreVert, "その他") }
                },
                scrollBehavior = scrollBehavior
            )
        },
        bottomBar = {
            NavigationBar {
                NavigationBarItem(icon = { Icon(Icons.Default.Home, null) }, label = { Text("ホーム") }, selected = true, onClick = {})
                NavigationBarItem(icon = { Icon(Icons.Default.Person, null) }, label = { Text("プロフィール") }, selected = false, onClick = {})
            }
        },
        floatingActionButton = {
            FloatingActionButton(onClick = {}) {
                Icon(Icons.Default.Add, "追加")
            }
        },
        snackbarHost = { SnackbarHost(snackbarHostState) }
    ) { padding ->
        LazyColumn(Modifier.padding(padding)) {
            items(50) { index ->
                ListItem(headlineContent = { Text("アイテム $index") })
            }
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

LargeTopAppBar 

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun CollapsingAppBarScreen() {
    val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()

    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
        topBar = {
            LargeTopAppBar(
                title = { Text("設定") },
                navigationIcon = {
                    IconButton(onClick = {}) { Icon(Icons.AutoMirrored.Filled.ArrowBack, "戻る") }
                },
                scrollBehavior = scrollBehavior
            )
        }
    ) { padding ->
        LazyColumn(Modifier.padding(padding)) {
            items(30) { ListItem(headlineContent = { Text("設定項目 $it") }) }
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

ModalDrawer統合 

@Composable
fun DrawerScaffold() {
    val drawerState = rememberDrawerState(DrawerValue.Closed)
    val scope = rememberCoroutineScope()

    ModalNavigationDrawer(
        drawerState = drawerState,
        drawerContent = {
            ModalDrawerSheet {
                Text("メニュー", Modifier.padding(16.dp), style = MaterialTheme.typography.headlineSmall)
                HorizontalDivider()
                NavigationDrawerItem(label = { Text("ホーム") }, selected = true, onClick = {})
                NavigationDrawerItem(label = { Text("設定") }, selected = false, onClick = {})
            }
        }
    ) {
        Scaffold(
            topBar = {
                TopAppBar(
                    title = { Text("アプリ") },
                    navigationIcon = {
                        IconButton(onClick = { scope.launch { drawerState.open() } }) {
                            Icon(Icons.Default.Menu, "メニュー")
                        }
                    }
                )
            }
        ) { padding ->
            Box(Modifier.padding(padding)) { Text("コンテンツ") }
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

まとめ

スロット コンポーネント
topBar TopAppBar / LargeTopAppBar
bottomBar NavigationBar
floatingActionButton FAB
snackbarHost SnackbarHost
  • ScaffoldでMaterial3準拠のレイアウト構造
  • scrollBehaviorでスクロール連動TopAppBar
  • ModalNavigationDrawerでサイドメニュー
  • paddingパラメータで適切な余白管理

8種類のAndroidアプリテンプレート（Scaffold設計済み）を公開しています。

テンプレート一覧 → Gumroad

関連記事：

I publish 8 Android app templates (Room DB, Material3, MVVM) on Gumroad.

Browse templates → Gumroad

Top comments (0)