Jetpack Compose Glimmer のシェイプ

対象の XR デバイス

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

XR デバイスのタイプについて →

XR デバイスのタイプについて →

Jetpack Compose Glimmer では、サーフェスはシェイプを使用して、視覚的な境界と丸みを定義します。Shapes クラスは、さまざまなタイプのコンポーネントを対象とした、さまざまなレベルの丸みを提供します。

図形のカテゴリ

GlimmerTheme クラスは、3 つの標準シェイプ サイズを定義します。

• 小: 同じサイズの 4 つの角を持つ形状。カードなどのコンポーネントに使用されます。デフォルトでは、24.dp の RoundedCornerShape です。
• 中: 小と大の中間のサイズで、同じサイズの 4 つの角を持つシェイプ。これは最も一般的に使用されるシェイプであり、サーフェスで使用されるデフォルトです。デフォルトでは、36.dp の RoundedCornerShape です。
• 大: 4 つの角が完全に丸められた図形。このシェイプは、ボタンなどのコンポーネントに使用されます。デフォルトでは CircleShape です。

例: GlimmerTheme からシェイプを取得してコンポーネントに適用する

まず、GlimmerTheme.shapes から定義済みのシェイプを取得します。

@Composable
fun ShapesSample() {
    val shapes = GlimmerTheme.shapes
    GlimmerLazyColumn {
        item { ShapeItem("small", shape = shapes.small) }
        item { ShapeItem("medium", shape = shapes.medium) }
        item { ShapeItem("large", shape = shapes.large) }
    }
}
ShapesSamples.kt

次に、これらのシェイプを一部のコンポーネントに適用できます。

@Composable
private fun ShapeItem(name: String, shape: Shape, modifier: Modifier = Modifier) {
    Box(
        modifier.aspectRatio(2.5f).fillMaxWidth().surface(shape = shape),
        contentAlignment = Alignment.Center,
    ) {
        Text(name)
    }
}
ShapesSamples.kt

図形をカスタマイズする

Shapes クラスは @Immutable です。既存のテーマのシェイプのコピーを作成し、コピー関数を使用して特定の値のオーバーライドを行うことができます。こうすることで、テーマの構造を維持しながら、アプリのブランドに合わせて特定の半径を調整できます。

例: 特定のシェイプ値をオーバーライドする

次のコードは、特定のシェイプ値をオーバーライドします。

val customShapes = GlimmerTheme.shapes.copy(
    small = RoundedCornerShape(12.dp),
    medium = RoundedCornerShape(20.dp)
)

デフォルト値

GlimmerTheme で特に指定されていない場合、システムはデフォルトで次の値を使用します。