Jetpack Compose Glimmer のシェイプ

対象となる XR デバイス
このガイダンスは、次のようなタイプの XR デバイス向けのエクスペリエンスを構築する際に役立ちます。
XR デバイスのタイプについて →
ディスプレイ メガネ
XR デバイスのタイプについて →

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

図 1.Jetpack Compose Glimmer での大、中、小のシェイプの例。

シェイプのカテゴリ

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

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

シェイプをカスタマイズする

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

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

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

@Composable
fun CustomShapesSample() {
    val customShapes = GlimmerTheme.shapes.copy(
        small = RoundedCornerShape(12.dp),
        medium = RoundedCornerShape(20.dp)
    )

    val interactionSource = remember { MutableInteractionSource() }
    Box(
        Modifier
            .aspectRatio(2.5f)
            .fillMaxWidth()
            .surface(interactionSource = interactionSource, shape = customShapes.small),
        contentAlignment = Alignment.Center,
    ) {
        Text("custom small")
    }
}

デフォルト値

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

トークン デフォルトのシェイプ サイズまたは半径

small

RoundedCornerShape

24.dp

medium

RoundedCornerShape

36.dp

large

CircleShape

完全に丸い