Jetpack Compose Glimmer のテキスト

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

Jetpack Compose Glimmer の Text コンポーネントでは、色、フォントサイズ、フォント スタイル、フォントの太さ、フォント ファミリー、文字間隔、テキストの配置など、さまざまなテキスト プロパティを設定できます。

Jetpack Compose Glimmer のテキストは、色の一致をインテリジェントに管理するという点で独自性があります。たとえば、色のオーバーライドが指定されていない場合、テキストは、そのテキストが配置されている最も近いサーフェスによって提供されるコンテンツの色にデフォルト設定されます。

例: ボックス内にテキストの見出しを作成する

@Composable
fun TextSample() {
      Text(
      text = "This is a sample heading",
      style = GlimmerTheme.typography.titleLarge )
}

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

  • 色が指定されていないため、このテキストは最も近いサーフェスを参照して、最も読みやすい色（通常は白）を選択します。

サイズ

Jetpack Compose Glimmer のタイポグラフィ スケールは、標準のモバイル マテリアル デザインよりも大幅に大きくなっています。TitleLarge や BodyLarge などのスタイルはどちらも 30.sp で、Caption は 18.sp です。

スタイル サイズ（sp） 重量 行の高さ

titleLarge

30

750

36.sp

titleMedium

24

750

28.sp

titleSmall

20

750

28.sp

bodyLarge

30

520

36.sp

bodyMedium

24

520

36.sp

bodySmall

20

520

28.sp

説明

18

650

24.sp

Google Sans Flex を使用する

Google Sans Flex は、Jetpack Compose Glimmer の一部として提供される、AI グラス専用に選択されたバリアブル フォントです。フォントの丸みを帯びた角と調整可能な軸により、最適な光学サイズ設定が可能になり、テキストが読みやすく、一目でわかるようになります。可能な場合は、アプリとシステム間のユーザーの一貫性を高めるため、ディスプレイ グラスに表示されるすべてのテキストに Google Sans Flex を使用します。

Google Sans Flex を使用するには、アプリの依存関係に glimmer-google-fonts ライブラリを追加し、GlimmerTheme にフォントをグローバルに適用します。

@Composable
fun GoogleSansFlexTypographySample() {
    val typography = createGoogleSansFlexTypography()
    GlimmerTheme(typography = typography) {
        Text("Hello World", style = GlimmerTheme.typography.titleLarge)
    }
}