MENU

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

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

IconButton コンポーザブルは、アイコンにボタン機能が付いたUI部品です。

目次

IconButtonの基本的な使い方

IconButtonコンポーザブルを使ってアイコンボタンを表示するには次のように書きます。

IconButton(
        onClick = { /* アイコンをタップした時の処理 */ }
) {
    // 表示するアイコン
    Icon(
        Icons.Filled.Favorite, 
        contentDescription = "Favorite"
    )
}

表示するアイコンの箇所にはIconコンポーザブルを定義します。

Iconコンポーザブルの使い方は以下の記事で解説しているので、こちらを参照ください。

IconButtonを使ったサンプル

import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.runtime.Composable

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material.*
import androidx.compose.material.icons.filled.FavoriteBorder
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

@Composable
fun IconButtonExample() {
    // ボタンの状態を保持するためのState
    var isFavorite by remember { mutableStateOf(false) }

    Column(
        modifier = Modifier.padding(16.dp)
    ) {
        Text(
            text = if (isFavorite) "お気に入りです" else "お気に入りではありません",
            color = if (isFavorite) Color.Red else Color.Black,
            style = MaterialTheme.typography.h5
        )
        IconButton(
            onClick = { isFavorite = !isFavorite },
            modifier = Modifier.padding(8.dp)
        ) {
            Icon(
                // お気に入りの状態によってアイコンを切り替える
                if (isFavorite) Icons.Filled.Favorite else Icons.Filled.FavoriteBorder,
                contentDescription = "お気に入り"
            )
        }
    }
}

この例では、ハートのアイコンを使ってお気に入りの状態を切り替えます。IconButton をクリックすると、isFavorite の状態が切り替わり、それに応じてアイコンが変化します。

Share
  • URLをコピーしました!

Comment

コメントする

目次