今回はJetpack ComposeでTabにバッジをつける方法です
未読のお知らせ等があるときにタブにバッジを表示させたいことがあると思います。
実装方法です。
androidx.compose.materialの導入
androidx.compose.material
を導入します。
dependencies {
implementation "androidx.compose.material:material:${latest.version}"
}
androidx.compose.materialを導入するとBadgedBoxやBadgeを使用することができ、こちらを使用してバッジを実装していきます。
バッジの実装
表示するタブのアイコンと、表示するテキストのデータを作っておきます。
Screen.kt
val tabData = listOf(
"ホーム" to Icons.Filled.Home,
"カート" to Icons.Filled.ShoppingCart,
"お知らせ" to Icons.Filled.Notifications,
)
タブ部分の実装の箇所だけ切り抜いてます。
Screen.kt
TabRow(selectedTabIndex = tabIndex,
modifier = Modifier.fillMaxWidth(),
backgroundColor = Color.White) {
tabData.forEachIndexed { index, pair ->
Tab(selected = tabIndex == index, onClick = {
coroutineScope.launch {
pagerState.animateScrollToPage(index)
}
}, text = {
Text(text = pair.first)
}, icon = {
BadgedBox(badge = { Badge { Text("1") } }) {
Icon(
pair.second,
contentDescription = pair.first
)
}
})
}
}
こちらで実行するとこのようになるはずです。
アイコンを使用しない場合
アイコンを使用しない場合は、このように実装するとできます。
Screen.kt
Tab(selected = tabIndex == index, onClick = {
coroutineScope.launch {
pagerState.animateScrollToPage(index)
}
}, icon = {
BadgedBox(badge = { Badge { Text("1") } }) {
Text(text = pair.first)
}
})
バッジの中の文字数が増えた時
ここまで見るとお分かりだと思いますが、Badge { Text("1") } でバッジの中の数字が表示されています。
ではバッジの中の数字が増えると、どうなのででしょうか？
このように横幅が広がってくれます。
テキストを無くしたい場合
Screen.kt
Tab(selected = tabIndex == index, onClick = {
coroutineScope.launch {
pagerState.animateScrollToPage(index)
}
}, icon = {
BadgedBox(badge = { Badge {} }) {
Text(text = pair.first)
}
})
テキストを無くすと、丸いバッジのみになります。
バッジのサイズの変更
バッジのサイズが大きいなぁー、と思ってませんか？サイズも調整できます。
Screen.kt
Tab(selected = tabIndex == index, onClick = {
coroutineScope.launch {
pagerState.animateScrollToPage(index)
}
}, icon = {
BadgedBox(badge = { Badge(modifier = Modifier.width(6.dp).height(6.dp)) {}
Text(text = pair.first)
}
})
ちょうどいい大きさになりましたね!
バッジの位置調整
バッジの位置も調整できます！
今回はわかりやすいように動かしてみました。
offsetを使用します。
Screen.kt
Tab(selected = tabIndex == index, onClick = {
coroutineScope.launch {
pagerState.animateScrollToPage(index)
}
}, icon = {
BadgedBox(badge = { Badge(modifier = Modifier.width(6.dp).height(6.dp).offset(x = 8.dp, y = (-8).dp)) {} }) {
Text(text = pair.first)
}
})
このようになります。
以上、Jetpack ComposeでTabにバッジをつける方法でした！