Jetpack Compose Glimmer のボタン

対象の XR デバイス

このガイダンスは、このようなタイプの XR デバイス向けのエクスペリエンスを構築する際に役立ちます。

XR デバイスの種類について →

AI メガネ

XR デバイスの種類について →

Jetpack Compose Glimmer の Button コンポーネントは、AI グラスの入力に最適化されたインタラクティブなコンポーネントです。有効、ホバー、押下状態の視覚的なフィードバックを明確に提供し、ユーザーのアクションをガイドします。

図 1. Jetpack Compose Glimmer のさまざまなスタイルのボタンの例。

例: ボタンのバリエーション

@Composable
fun GlimmerButtonExample() {
    Column(
        verticalArrangement = Arrangement.spacedBy(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier.fillMaxWidth()
    ) {
        // Basic Button
        Button(onClick = { /* Do something */ }) {
            Text("Test Button 1")
        }

        // Button with a leading icon
        Button(
            onClick = { /* Do something */ },
            leadingIcon = {
                Icon(
                    painter = painterResource(id = R.drawable.ic_favorite),
                    contentDescription = "Favorite icon"
                )
            }
        ) {
            Text("Test Button 2")
        }

        // Button with leading and trailing icons
        Button(
            onClick = { /* Do something */ },
            leadingIcon = {
                Icon(
                    painter = painterResource(id = R.drawable.ic_favorite),
                    contentDescription = "Favorite icon"
                )
            },
            trailingIcon = {
                Icon(
                    painter = painterResource(id = R.drawable.ic_favorite),
                    contentDescription = "Favorite icon"
                )
            }
        ) {
            Text("Test Button 3")
        }
    }
}

コードに関する主なポイント

• ボタン アイコンは、painterResource を使用してローカル XML ベクター型ドローアブル（R.drawable.ic_favorite）をソースとし、Icons.Default ライブラリの依存関係を置き換えてアセットの読み込みを最適化します。
• leadingIcon パラメータと trailingIcon パラメータを使用して、アイコン コンポーザブルをボタン レイアウトに挿入します。これにより、Jetpack Compose Glimmer がアイコンの柔軟な配置をサポートしていることがわかります。
• ボタンはデフォルトのサイズ設定を使用します。これにより、明示的なサイズ変更子を使用しなくても、標準の Jetpack Compose Glimmer デザイン仕様に合わせて内部パディングとテキスト スケーリングが自動的に管理されます。