Compose For Desktopでアイコンを表示する

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") }
                    )
                }
            }
        }
    }
}

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください