🐙

Jetpack Compose: Fix view position at the bottom

2025/01/08に公開

画面下部に固定のフッターナビゲーションのようなものを配置したい時、タブナビゲーションだと Scaffold.bottomBar に設定するのが標準と思われるが、それに加えてさらに固定の View を配置したかった。ポイントは Column ではなく Box でないと .align(Alignment.BottomCenter) が使用できなかったこと。

import androidx.compose.ui.Alignment

@Composable
fun HogeScreen() {
    Scaffold(
        bottomBar = {
            BottomNavigationBar(rootNavController)
        }
    ) { innerPadding ->
        Box( // ←ポイント
            modifier = Modifier
                .padding(innerPadding)
                .fillMaxSize()
        ) {
            Column(
                modifier = Modifier
                    .padding(bottom = 80.dp) // CustomNavigationView height
                    .fillMaxSize()
                    .verticalScroll(rememberScrollState()),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                IdentifyResultView(
                    index = uiState.currentTabSelection,
                    viewModel = viewModel,
                )
            }
            CustomNavigationView(
                // 省略
                modifier = Modifier.align(Alignment.BottomCenter) // ←ポイント
                // .align は for BoxScope のものであることに注意
            )
        }
    }
}

Discussion