Jetpack Compose Glimmer の内容

Jetpack Compose Glimmer は Jetpack Compose をベースに構築されており、 コンポーズ可能関数、コンポーネント、動作、テーマが含まれています。これらはディスプレイ付き AI グラス向けに設計されています。Glimmer を使用すると、Compose を使用してディスプレイ グラス用のネイティブ UI を構築できます。少ないコード、パワフルなツール、直感的な Kotlin API を使用して、アプリのエクスペリエンスをすぐに動かすことができます。

Jetpack Compose Glimmer のコンポーズ可能関数

Jetpack Compose Glimmer には、@Composable 関数など、AI グラスのディスプレイ向けに調整された関数が用意されています。TextButtonListItemJetpack Compose Glimmer のコンポーズ可能関数には、次のような特徴があります。

• シンプルなスタイル設定: たとえば、Surface コンポーネントは、光学ディスプレイの最適化のためにデフォルトで 黒または透明の背景になります。
• 最適化されたデフォルトの色: Jetpack Compose Glimmer は、デフォルトで背景色に基づいてコンテンツ の色を計算するため、デベロッパーがテキストの色を手動で設定する必要はほとんどありません。追加の作業なしで可読性を高めることができます。

• 差別化されたフォーカス: フォーカスは、リップル効果ではなくアウトラインベースの視覚的な フィードバックを使用して示されるため、視認性が向上します。

  

• 最適化された Elevation: Jetpack Compose Glimmer では、視覚的な分離に限定的なボックスシャドウを使用します 。

  

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 修飾子と同じように機能します。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 の物理サーフェスとして使用されることが多く、プライマリ カラーとセカンダリ カラーは、インタラクションとブランディングの明確な視覚的キューを提供します。

タイポグラフィ

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 の簡略化された視覚言語と一貫して統合されるように設計されています。多くの場合、最適な可読性を実現するために、マテリアル シンボル Rounded などの丸みを帯びた形状を活用しています。