Compose For Desktopでアイコンを表示する方法について。
使えるアイコン
アイコンのテーマには、塗りつぶし、アウトライン、丸め、TwoTone、シャープがある。
アイコンは次のパッケージに用意されている。
- androidx.compose.material.icons.Icons.Filled
- androidx.compose.material.icons.Icons.Outlined
- androidx.compose.material.icons.Icons.Rounded
- androidx.compose.material.icons.Icons.Sharp
- androidx.compose.material.icons.Icons.TwoTone
アイコンを表示する
アイコンを表示するにはIcon()関数を使用する。
Icon(
Icons.Filled.Search,
contentDescription = "Icons.Filled.Search",
modifier = Modifier.width(64.dp).height(64.dp)
)
アイコンボタンを表示する
クリック可能なアイコンを表示するには、IconButton()関数を使用する。
IconButton(
modifier = Modifier.width(64.dp).height(64.dp),
onClick = { println("Icons.Filled.Home") }) {
Icon(
Icons.Filled.Home,
contentDescription = "Icons.Filled.Home",
modifier = Modifier.width(64.dp).height(64.dp)
)
}
ボタンにアイコンを表示する
ボタンの中にアイコンを表示するには、Button()関数の中でIcon()関数を使用する。
アイコンのフォルトサイズと、アイコンとテキストの間隔のデフォルトサイズが定義されている。
ButtonDefaults.IconSizeは、ボタン内でアイコンを使用する場合のアイコンのデフォルトサイズ。
ButtonDefaults.IconSpacingは、ボタン内でアイコンとテキストを使用する場合の間隔のデフォルトサイズ。
Button(onClick = { println("Icons.Filled.Favorite") }) {
Icon(
Icons.Filled.Favorite,
contentDescription = "Icons.Filled.Favorite",
modifier = Modifier.size(ButtonDefaults.IconSize)
)
Spacer(Modifier.size(ButtonDefaults.IconSpacing))
Text(text = "Icons.Filled.Favorite")
}
拡張フローティングアクションボタンを使用する
拡張フローティングアクションボタンを表示するには、ExtendedFloatingActionButton()を使用する。
ExtendedFloatingActionButton(
text = { Text("Icons.Filled.Refresh") },
icon = { Icon(Icons.Filled.Refresh, contentDescription = "Icons.Filled.Refresh") },
onClick = { println("Icons.Outlined.Favorite") }
)
サンプルプログラム
サンプルプログラムのソースコード。
fun main() = application {
Window(
onCloseRequest = ::exitApplication,
title = "Compose for Desktop",
state = rememberWindowState(width = 340.dp, height = 380.dp)
) {
val rowModifier = Modifier.fillMaxWidth().padding(bottom=16.dp)
MaterialTheme {
Column(modifier = Modifier.fillMaxHeight().fillMaxWidth().padding(4.dp)) {
Text(text = "Icon")
Row(modifier = rowModifier) {
Icon(
Icons.Filled.Search,
contentDescription = "Icons.Filled.Search",
modifier = Modifier.width(64.dp).height(64.dp)
)
}
Text(text = "IconButton")
Row(modifier = rowModifier) {
IconButton(
modifier = Modifier.width(64.dp).height(64.dp),
onClick = { println("Icons.Filled.Home") }) {
Icon(
Icons.Filled.Home,
contentDescription = "Icons.Filled.Home",
modifier = Modifier.width(64.dp).height(64.dp)
)
}
}
Text(text = "Button")
Row(modifier = rowModifier) {
Button(onClick = { println("Icons.Filled.Favorite") }) {
Icon(
Icons.Filled.Favorite,
contentDescription = "Icons.Filled.Favorite",
modifier = Modifier.size(ButtonDefaults.IconSize)
)
Spacer(Modifier.size(ButtonDefaults.IconSpacing))
Text(text = "Icons.Filled.Favorite")
}
}
Text(text = "ExtendedFloatingActionButton")
Row(modifier = rowModifier) {
ExtendedFloatingActionButton(
text = { Text("Icons.Filled.Refresh") },
icon = { Icon(Icons.Filled.Refresh, contentDescription = "Icons.Filled.Refresh") },
onClick = { println("Icons.Outlined.Favorite") }
)
}
}
}
}
}