タブレットを含む 3 億台を超える Android 大画面デバイス 今日では折りたたみ式デバイス、ChromeOS デバイス、車載ディスプレイ、テレビなどが使用されており、 継続的に追加されています増え続ける状況に合わせて最適なユーザー エクスペリエンスを提供するため 多様な大画面デバイスに対応 標準のスマートフォンで アダプティブ アプリ。
アダプティブ アプリとは
アダプティブ アプリは、主にアプリのディスプレイの変化に基づいてレイアウトを再構築します。 ウィンドウのサイズが変わります。しかしアダプティブ アプリは、 テーブルトップやブックの形状など、折りたたみ式デバイスの形状の変化 画面密度とフォントサイズの変化などです
異なるイベントに応じて UI 要素を引き延ばしたり縮小したりする代わりに、 アダプティブ アプリはレイアウト コンポーネントを置き換え、コンテンツの表示と非表示を切り替えます。 たとえば、標準のスマートフォンの場合、アダプティブ アプリによって下部 大画面ではナビゲーション レールを使用します。大画面では アダプティブ アプリは、2 ペインのリスト詳細レイアウトなど、より多くのコンテンツを表示します。オン 小さな画面では、リストや詳細はコンテンツが少なくなります。
急速に変化するスマートフォン中心の時代、アプリは全画面表示で動作していました。現在、アプリは デバイス画面とは無関係に任意のサイズのウィンドウでマルチ ウィンドウ モードを使用する 指定します。ウィンドウ サイズはいつでも変更できます。そのため 1 台のデバイスで 適応型であることが必要です。
アダプティブ アプリは、デバイスを問わず、あらゆるデバイスで適切に動作し、見栄えが良くなります。
アダプティブ UI を作成する理由
ユーザーは、アプリがすべてのデバイスで問題なく動作し、 高度な機能を多数備えていますマルチウィンドウ モードでのユーザーのマルチタスク: アプリのエクスペリエンスと生産性が向上します
標準的なスマートフォンでのシングルタスクに限定されているアプリは、拡大するユーザーを逃す 多様な可能性の基盤です
Google Play
Google Play では、タブレットと折りたたみ式デバイス専用のアプリ コレクションを提供しています。 おすすめを表示することで、ユーザーが質の高いアプリを見つけることができます。
Play は大画面向けに最適化されたアプリやゲームを、最適化されていないものよりも上位にランク付けする 。ランキングは、大画面アプリの品質に関するガイドラインに基づいています。高 ランキングでは 複数のデバイスを使用しているユーザーに 大画面専用の評価やレビューをスマートフォンで確認しています。
Google Play ストアの大画面の品質基準を満たしていないアプリには、 警告が表示されます。この警告は、アプリによって 大画面のデバイスではあまりうまくいかない
アダプティブ アプリを作成して Google Play での見つけやすさを高め、 アプリをダウンロードできるデバイスの数。
ご利用方法
プランニングからアプリ開発まで、アプリ開発のあらゆる段階でアダプティブ デザインを検討する 説明します。グラフィック デザイナーにアダプティブ デザインについて通知します。アプリを設計して、 管理と拡張が可能で、すぐに使えるアプリを開発できます。 将来のフォーム ファクタやウィンドウ モードにも対応します。
すべてのディスプレイ サイズと構成をサポートするアダプティブ アプリを作成するには、次の操作を行います。 次のとおりです。
- ウィンドウ サイズクラスを使用してレイアウトを決定する
- Compose Material 3 Adaptive ライブラリを使用してビルドする
- タップ以外の入力をサポートする
- すべてのデバイスタイプでテストする
ウィンドウ サイズクラス
アプリ ウィンドウの寸法はデバイスによって異なる場合や、同じデバイス間で異なる場合がある アプリが全画面表示になっている場合でも、 デバイスの向きが異なれば、アスペクト比も異なります。イン マルチ ウィンドウ モード、アプリのウィンドウ サイズ、アスペクト比、画面の向きは、 画面とは異なります。
アダプティブ アプリは、ユーザーの判断と管理に関する問題を単純化して一般化する アプリ ウィンドウのみを考慮し、ウィンドウ サイズ、アスペクト比、向き レイアウトのレンダリング時に使用します。これはアプリ ウィンドウが全画面表示のときも機能します。
ウィンドウ サイズクラスは、アプリ ウィンドウをコンパクト、中、または ウィンドウの幅または高さに基づいて拡張されます。
以下を使用して、アプリの WindowSizeClass を計算します。
Compose の currentWindowAdaptiveInfo() トップレベル関数
マテリアル 3 のアダプティブ ライブラリ。この関数は、次のコマンドを実行すると
WindowAdaptiveInfo: windowSizeClass が含まれます。アプリ
ウィンドウ サイズクラスが変更されるたびに更新を受信します。
val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
コンテンツ ペイン
アクティビティのレイアウトは「画面」と呼ばれることもあります。たとえば、 ホーム画面、リスト画面、アイテム詳細画面などを用意します。「 各アクティビティがデバイス画面全体に表示されるという意味です。
ただし、拡大幅をサポートするのに十分な大きさのデバイス画面では、 ウィンドウ サイズクラスでは、複数のアクティビティ画面を同時に画面上に表示できます。 ペインは、個々のアクティビティのコンテンツ表示をより正確に表す用語です。
ウィンドウ サイズクラスを使用すると、表示するコンテンツ ペインの数を決定できる マテリアル デザインで指定されているマルチペイン レイアウト。
ペインは操作可能です。コンパクトと中程度のウィンドウ サイズクラスでは、アプリは シングルペインデスティネーションに移動したときに 1 つのペインが表示されます。
展開されたウィンドウ サイズクラスでは、アプリは関連するコンテンツを複数の カスタマイズすることもできます。いずれかのペインに移動すると、次の画面が表示されます。 2 ペイン レイアウトにします。ウィンドウ サイズがコンパクトまたは中程度に変更されると、 アダプティブ アプリは、ナビゲーション デスティネーションとして、リストまたは できます。
|
<ph type="x-smartling-placeholder"> |
<ph type="x-smartling-placeholder"> |
Compose マテリアル 3 アダプティブ
Jetpack Compose はアダプティブ アプリを作成するための最新の宣言型アプローチ 複数のレイアウト ファイルの重複やメンテナンスの負担がなくなります。
Compose マテリアル 3 アダプティブ ライブラリには、 ナビゲーション コンポーネント、マルチペイン レイアウト、 折りたたみ形状とヒンジの位置:
NavigationSuiteScaffold: ナビゲーション バーを自動的に切り替えます ナビゲーション レールとナビゲーション レールを提供します。ListDetailPaneScaffold: 「リストと詳細」正規 URL を実装します 説明します。アプリのウィンドウ サイズに合わせてレイアウトを調整します。インフラストラクチャ リソースのリストと 開いたウィンドウ サイズで横並びペインに表示されたリストアイテム コンパクトと中程度のウィンドウ サイズに関するリストや詳細だけを 。
SupportingPaneScaffold: 補助ペインの正規 URL を実装します。 説明します。開いたウィンドウにメイン コンテンツ ペインと補助ペインを表示します コンパクトと中程度のウィンドウ サイズではメイン コンテンツ ペインのみが表示され、 。
Compose マテリアル 3 アダプティブ ライブラリは、 アダプティブ アプリの開発です。
構成と連続性
アダプティブ アプリは、構成変更後も継続性を維持します。
設定の変更は、アプリのウィンドウのサイズ変更、 折りたたみ式デバイス、画面密度やフォントが変わります。
デフォルトでは、構成を変更するとアプリのアクティビティが再作成され、
失われます。連続性を維持するため、アダプティブ アプリは状態を
アクティビティの onSaveInstanceState() メソッドまたは ViewModel 内。
ポスチャー
アダプティブ アプリは、折りたたみ式デバイスの形状の変化に対応します。ポスチャー テーブルトップ形状とブック形状があります
Jetpack WindowManager の WindowInfoTracker インターフェースを使用すると、次のことができます。
デバイスの DisplayFeature オブジェクトのリストを取得します。ディスプレイ
features は FoldingFeature.State で、デバイスが動作しているかどうかを示します。
完全に開くか、半開きにします。
Compose Material 3 Adaptive ライブラリは、
currentWindowAdaptiveInfo() トップレベル関数。次の値を返します。
windowPosture を含む WindowAdaptiveInfo のインスタンス。
タップ以外の入力
ユーザーは多くの場合、外付けキーボード、トラックパッド、マウス、タッチペンを大型の 。これらの周辺機器により、ユーザーの生産性、入力精度、 ユーザー補助を重視していますほとんどの ChromeOS デバイスには キーボードとトラックパッドが組み込まれています。
アダプティブ アプリは外部入力デバイスをサポートしますが、ほとんどの処理は外部入力デバイスに対して行われます。 次のように記述できます。
Jetpack Compose 1.7 以降: キーボードのタブ ナビゲーションとマウスまたは トラックパッドのクリック、選択、スクロールはデフォルトでサポートされています。
Jetpack
androidx.compose.material3ライブラリ: ユーザーが以下の操作を行えるようにします。 タッチペンを使用して任意のTextFieldコンポーネントに変換します。キーボード ショートカット ヘルパー: Android プラットフォームとアプリのキーボードを作成します ショートカットを作成します。アプリのキーボード ショートカットを キーボード ショートカット ヘルパーを
onProvideKeyboardShortcuts()ウィンドウ コールバック。
アダプティブ アプリは、あらゆるサイズのフォーム ファクタに完全に対応できるよう、すべての できます。
アダプティブ アプリをテストする方法
さまざまな画面とウィンドウ サイズ、さまざまなデバイス構成をテストします。 ホスト側のスクリーンショットと Compose プレビューを使用して、アプリのレイアウトを確認します。 Android Studio エミュレータと、以下でホストされているリモート Android デバイスでアプリを実行します。 Google データセンター。
大画面アプリの品質に関するガイドライン
大画面アプリの品質に関するガイドライン: アダプティブ アプリが正常に動作するようにします タブレット、折りたたみ式デバイス、ChromeOS デバイスで使用できます。このガイドラインには、 を使用して、クリティカル ユーザー ジャーニーに対するアプリの機能を検証できます。ただし、 ガイドラインは大画面に焦点を当てており、すべての画面サイズと互換性があります。
複数の構成
Compose 1.7 以降の DeviceConfigurationOverride インターフェース
を使用すると、デバイス設定の各種要素をオーバーライドできます。API
さまざまなデバイス構成を局所的にシミュレートできます。
コンポーズ可能なコンテンツを選択しますたとえば、1 つまたは複数のコンテナを
任意の UI サイズを 1 台のデバイスでテストスイートを 1 回実行、または
ダウンロードします。
DeviceConfigurationOverride.then() 拡張関数を使用すると、次のことができます。
複数の構成パラメータ（フォントサイズ、言語 / 地域、テーマ、
すべて同時に変更することもできます。
ホスト側のスクリーンショット
ホスト側のスクリーンショット テストは、Google Pixel 8 Pro の カスタマイズすることもできます。ホスト側のスクリーンショットを使用して、1 対 1 の UI をテストする 表示サイズもさまざまです
詳しくは、Compose プレビューのスクリーンショットのテストをご覧ください。
Compose プレビュー
Compose プレビューを使用すると、Android のデザインビューでアプリの UI を確認できる
できます。プレビューでは、@PreviewScreenSizes などのアノテーションが使用されます。
@PreviewFontScale、@PreviewLightDark を使用すると、コンポーザブル
コンテンツをさまざまな構成で保存できます。プレビューを操作することもできます。
また、Android Studio では、次のようなユーザビリティに関する一般的な問題もハイライト表示されます。 幅が広すぎる場合です
詳細については、コンポーザブルのプレビューを使用して UI をプレビューするをご覧ください。
エミュレータ
Android Studio には、さまざまなレイアウト サイズをテストするためのさまざまなエミュレータが用意されています。
- サイズ変更可能なエミュレータ: スマートフォン、タブレット、折りたたみ式デバイスをエミュレートし、 その場で切り替えることができ
- Google Pixel Fold エミュレータ: Google Pixel Fold の大画面折りたたみ式スマートフォンをエミュレート
- Google Pixel Tablet エミュレータ: Google Pixel Tablet の大画面デバイスをエミュレート
- デスクトップ エミュレータ: 自由形式のウィンドウ処理、マウスオーバー、 キーボード ショートカット
リモート デバイス ストリーミング
Google データセンターでホストされているリモートの Android デバイスに安全に接続して、 最新の Google Pixel デバイスや Samsung デバイスでアプリをテストできます。アプリのインストールとデバッグ、実行 ADB コマンドを使用し、デバイスを回転させたり折りたたんだりすることで、 多種多様です
リモート デバイス ストリーミングが Android Studio に統合されています。詳しくは Firebase による Android デバイス ストリーミングをご覧ください。
参考情報
- I/O プレゼンテーション: アダプティブな Android アプリの構築