🐙
Jetpack Compose: Fix view position at the bottom
画面下部に固定のフッターナビゲーションのようなものを配置したい時、タブナビゲーションだと 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