MENU

【Jetpack Compose】Icon Composableの使い方 | アイコンを表示する

Android Jetpack Compose
記事内に商品プロモーションが含まれる場合があります

Icon コンポーザブルは、アプリ内でアイコンを表示するためのUI部品です。

目次

Iconの基本的な使い方

Icon コンポーザブルを使ってアイコンを表示するには、Icon コンポーザブルを呼び出し、表示したいアイコンのリソースを指定します。

import androidx.compose.material.Icon
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.*
import androidx.compose.runtime.Composable

@Composable
fun MyComposable() {
    Icon(
        Icons.Filled.Email,
        contentDescription = "Email"
    )
}

この例ではEmailのアイコンが表示しています。

contentDescription パラメータには、アイコンの内容を記入します。

このテキストは、アクセシビリティやスクリーンリーダー向けに使用されますが、不要であれば省略可能です。

アイコンのサイズを変更する

アイコンのサイズを変更するには、modifier を使用します。

@Composable
fun MyComposable() {
    Icon(
        Icons.Filled.Home,
        modifier = Modifier.size(48.dp), // サイズを48dpに設定
        contentDescription = "Home"
    )
}

アイコンの色を変更する

アイコンの色を変更するには、引数tint に色を指定します。

import androidx.compose.material.Icon
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color

@Composable
fun MyComposable() {
    Icon(
        Icons.Filled.Home,
        contentDescription = "Home",
        tint = Color.Blue
    )
}

使えるアイコンを増やすには？

Jetpack Composeの Material Icons は基本的なアイコンセットを提供していますが、より多くのアイコンを使いたい場合、MaterialIconsExtended を利用することができます。

これを使うには、material-icons-extended ライブラリを追加します。

Gradleの build.gradle に次の依存関係を追加します。

dependencies {
    // 使えるマテリアルアイコンを追加
    implementation("androidx.compose.material:material-icons-extended:1.3.0")
}
Android Jetpack Compose
Share

Comment

コメントする

目次