Jetpack Compose Glimmer は Jetpack Compose をベースに構築されており、ディスプレイ付きの AI グラス向けに設計されたコンポーザブル、コンポーネント、動作、テーマが含まれています。Glimmer を使用すると、Compose を使用してディスプレイ メガネ用のネイティブ UI を構築できます。少ないコード、パワフルなツール、直感的な Kotlin API を使用して、アプリのエクスペリエンスをすぐに動かすことができます。
Jetpack Compose Glimmer コンポーザブル
Jetpack Compose Glimmer には、AI グラスのディスプレイ向けに調整された @Composable 関数（Text、Button、ListItem など）が用意されています。Jetpack Compose Glimmer コンポーザブルには、次のような独自の特性があります。
- 簡素化されたスタイル設定: たとえば、
Surfaceコンポーネントは、光学ディスプレイの最適化のために、デフォルトで黒または透明の背景になります。 - 最適化されたデフォルトの色: Jetpack Compose Glimmer は、デフォルトで背景色に基づいてコンテンツの色を計算するため、デベロッパーがテキストの色を手動で設定する必要はほとんどありません。追加の作業なしで視認性を高めることができます。
差別化されたフォーカス: フォーカスは、リップル効果ではなくアウトラインベースの視覚的なフィードバックで示されるため、視認性が向上します。
図 1. Jetpack Compose Glimmer の 3 つのフォーカス状態。アウトラインベースの視覚的フィードバックを使用して区別されます。 最適化された高度: Jetpack Compose Glimmer では、視覚的な分離のためにボックスシャドウが限定的に使用されています
図 2. Jetpack Compose Glimmer の 5 つのレベルの標高。限られたボックスシャドウを使用して区別されます。
Jetpack Compose Glimmer コンポーネント
Jetpack Compose Glimmer には、Jetpack Compose のコンポーネントと同様に、独自に設計されたコンポーネントのセットが用意されていますが、ディスプレイ グラスの独自の視覚的およびインタラクティブなニーズに合わせて特別に最適化されています。Jetpack Compose Glimmer コンポーネントは、Jetpack Compose Glimmer のテーマでカスタマイズでき、低レベルの Compose 機能に基づいて、タップやスワイプなどのユーザー入力メソッドをデフォルトでサポートします。
特定のコンポーネントの使用方法については、次のガイドをご覧ください。
これらの高レベル コンポーネントのいずれかがユースケースに適合しない場合は、surface を使用してカスタム コンポーネントを構築できます。サーフェスは、Jetpack Compose Glimmer の最も基本的な構成要素です。これは、作成する特定のカスタム デザインやインタラクションのための空白のキャンバスです。
Jetpack Compose の Glimmer 修飾子
Jetpack Compose Glimmer の修飾子は、Compose の修飾子と同じように機能します。修飾子を使用すると、レイアウト、外観、動作をカスタマイズしてコンポーザブルを拡張できます。Jetpack Compose Glimmer には、グラス固有の視覚的フィードバックとパフォーマンスのための修飾子と独自のデフォルトが含まれています。
Jetpack Compose Glimmer のテーマ
Jetpack Compose Glimmer には、ディスプレイ グラス専用のテーマ設定システムが用意されています。Jetpack Compose Glimmer のテーマは、簡略化され最適化された色、タイポグラフィ、シェイプのパレットを実装します。これにより、ディスプレイ グラスの視認性と簡潔性が最大限に高まります。すべての Jetpack Compose Glimmer コンポーネントは、グラス固有の入力メソッドとの自動統合を目的として設計されています。Jetpack Compose Glimmer のテーマは、GlimmerTheme クラスを使用して公開されます。
他の Jetpack Compose のテーマと同様に、GlimmerTheme にはいくつかのサブシステムが含まれています。次のセクションでは、カスタマイズ可能な属性とともに、これらのサブシステムの概要を説明します。
- 色
- タイポグラフィ
- コンポーネントのスペーシング値
- 図形
- 奥行き効果のレベル
- アイコンのサイズ
色
Jetpack Compose Glimmer のカラーシステムは、加法混色ディスプレイと実際の環境向けに設計されています。標準の Android テーマとは異なり、GlimmerTheme
Colors では、半透明の暗い背景と鮮やかなアクセントが優先され、予測不可能な現実世界の照明の下でもコンテンツが読みやすくなるようになっています。
システムでは、プライマリ、セカンダリ、ニュートラルの 3 つのカラーパレットを使用します。ニュートラル カラーは空間 UI の物理的なサーフェスとして使用されることが多く、プライマリ カラーとセカンダリ カラーはインタラクションとブランディングの明確な視覚的キューを提供します。
GlimmerTheme の色の概要。タイポグラフィ
Jetpack Compose Glimmer のタイポグラフィ システムには、ディスプレイ グラスでの読みやすさと簡潔さを実現するためのさまざまなタイポグラフィ スタイルが含まれています。これらのスタイルは、コントラストを最大化し、太字のウェイト、広い文字間隔、適切な行の高さでテキストの可読性を高めるように設計されています。これらのスタイルは GlimmerTheme.typography を介して公開されます。
コンポーネントのスペーシング値
これらの値は、Jetpack Compose Glimmer コンポーネント全体で一貫したスペーシングを確保するために使用されます。これには、コンポーネントのパディング、コンポーネント間の間隔、その他の間隔要素が含まれます。これらの値を変更すると、ほとんどのコンポーネントのデフォルトのサイズ設定に影響します。
図形
Jetpack Compose Glimmer のシェイプ システムは、ディスプレイ グラスの UI で一貫性のあるミニマリストなビジュアル言語を作成するために設計された、コンポーネントの一連の標準的な角の処理と幾何学的形状を定義します。すべてのシェイプは GlimmerTheme.shapes を通じて公開されます。
奥行き効果のレベル
Jetpack Compose Glimmer コンポーネントは、階層を表すために奥行きを使用します。これにより、他のカードの上に表示される要素を視覚的に区別できます。ディスプレイ グラスの奥行きは、z 空間での配置と影の組み合わせです。リスト項目などのほとんどの上位レベルのコンポーネントでは、フォーカス状態に基づいて奥行きが自動的に適用されます。コンポーネントにフォーカスが当たると、奥行きが増し、フォーカスが外れると、通常の状態に戻ります。ただし、カスタム コンポーネントを操作する場合は、Modifier.surface または depthEffect で depthEffect パラメータを使用できます。
アイコンのサイズ
Jetpack Compose Glimmer のアイコン システムは、ディスプレイ グラスの UI の簡素化されたビジュアル言語と一貫して統合されるように設計されています。多くの場合、最適な読みやすさを実現するために、Material Symbols Rounded などの丸みを帯びた形状が活用されています。