#目次
- Scaffoldとは
- サンプルコード
- まとめ
##1. Scaffoldとは
Scaffold
‥マテリアル コンポーネントを、一般的な画面のパターンに組み合わせ、例アクトを構築することができる。Scaffoldには、後置ラムダスロットcontentがあり、RowScope
を利用することで、UIの要素を横並びの一列に配置することができる。TopAppBar、BottomAppBar、FloatingActionButton、Drawerなどを実装することができる。
後置ラムダスロット‥コンポーザブルなコンテンツを引数として受け入れ、それをUIの要素として利用することができる汎用ラムダのこと
今回は、以下のBottomNavigationを作成していきたいと思います。
##2. サンプルコード
では、実際にScaffoldを利用して、BottomAppBarのUIを構築していきたいと思います。
初めに、Screenの構成要素をsealed classを用いて、以下のように定義します。
sealed class Screen(val route: Stringval icon: ImageVector){
object MailScreen: Screen("mail", Icons.Filled.Email)
object ProfileScreen: Screen("profile", Icons.Filled.Person)
}
それでは、Scaffoldを用いてUIの作成に移りたいと思います。
(Navigationに関連するキーワドの説明は、省略させていただきます。)
@Composable
fun BottomSheetWithFloatingButton(){
val navController = rememberNavController()
Scaffold(
bottomBar = {
BottomAppBar(
modifier = Modifier
.height(70.dp)
.clip(RoundedCornerShape(30.dp, 30.dp, 0.dp, 0.dp)),
cutoutShape = androidx.compose.foundation.shape.CircleShape,
elevation = 20.dp
) {
CustomBottomNavItem(navController = navController)
}
},
floatingActionButtonPosition = FabPosition.Center,
isFloatingActionButtonDocked = true,
floatingActionButton = {
FloatingActionButton(
onClick = {
},
contentColor = Color.White
) {
Icon(imageVector = Icons.Filled.Add, contentDescription = null)
}
}
) {
ScreenNavigation(navController = navController)
}
}
Scaffoldは、上記のようにスロットがたくさんあり、それぞれのラムダに処理を記述します。
bottomBar
‥後述するコンポーザブルを、スロットの中で呼び出します。ここで、BottomNavigationの、Icon,Labelなどを決定することのできるBottomNavigationというスロットを呼び出します。
floatingActionButton
‥ここでは、FloatingActionButtonを呼び出し、Iconなどを決定できます。
その他
‥FloatingActionButtonの位置を決定したり、BottomNavigation上にオーバーラップするかを決定することができます。
そして、bottomBar
で呼び出されているコンポーザブルは以下のようになります。
@Composable
fun CustomBottomNav(
navController: NavHostController
) {
val navBackStackEntry by navController.currentBackStackEntryAsState()
val currentDestination = navBackStackEntry?.destination
BottomNavigation(
modifier = Modifier
.padding(0.dp, 0.dp, 0.dp, 5.dp)
.height(100.dp),
elevation = 0.dp
) {
screenItem.forEach { screen ->
BottomItem(
screen = screen,
currentDestination = currentDestination,
navController = navController
)
}
}
}
また、forEachで振り分けているリストは以下のようになります。
val screenItem = listOf(
Screen.MailScreen,
Screen.ProfileScreen
)
CustomBottomNav
では、BottomNavigationを呼び出しそこでリスト(構成するスクリーンを網羅したもの)の中身を、以下のコンポーザブルに渡します。
@Composable
fun RowScope.BottomItem(
screen: Screen,
currentDestination: NavDestination?,
navController: NavHostController
){
BottomNavigationItem(
icon = {
Icon(
imageVector = screen.icon,
contentDescription = ""
)
},
selected = currentDestination?.hierarchy?.any {
it.route == screen.route
} == true,
unselectedContentColor = LocalContentColor.current.copy(alpha = ContentAlpha.disabled),
onClick = {
navController.navigate(screen.route)
}
)
}
Scaffoldは、RowScope内で呼び出す必要があるので上記のような記述となり、BottomNavigationItem
にオブジェクトを渡し、上記のforEachで受け取ります。
####Navigationに関する説明を省き、以上のコンポーザブルを実行すると
このように、BottomNavigationを実行することができました。
参考URL
https://medium.com/@mumedian6/bottom-navigation-with-docked-fab-in-jetpack-compose-f1ba3cb3771b
##3. まとめ
今回は、Scaffoldを利用して、マテリアルコンポーネントを一般的な画面パターンに組み合わせてみました。このUIをもとに、Navigationについての記事を作成しました。