レイアウトの基本

ヒーロー レイアウトの基本のイラスト

レイアウトは、コンポーザブルなど、ユーザーがアプリを操作するためのビジュアル構造を定義します。Android には、コンテンツの表示と配置を行うためのさまざまなライブラリ、標準的な開始点、手法が用意されています。

使ってみる

アプリの構造とアプリのコンテンツを構成する方法を学び、Android レイアウトの設計を始めましょう。

要点

レイアウトの向き

ユーザーが遭遇する可能性のあるさまざまなアスペクト比、サイズクラス、解像度を考慮します。アプリが横向きと縦向きの両方で、さまざまな画面サイズとフォーム ファクタで優れたユーザー エクスペリエンスを提供することを確認します。

詳しくは、レイアウトの適応と標準レイアウトに関するガイダンスをご覧ください。

デバイスのセーフエリア

ディスプレイ カットアウト、エッジ ツー エッジ インセット、エッジ ディスプレイ、ソフトウェア キーボード、システムバーなどの UI の一部を含む、Honor デバイスのセーフ エリアを尊重します。ユーザーがキーボードを操作するための柔軟なレイアウトを提供します。

すべきこと

ユーザー入力をフォーカスします。キーボードが表示されている場合は、入力をフォーカスされた状態に移動するか、テキスト入力をキーボードに添付することを検討してください。

すべきでないこと

入力を非表示にします。画面が小さい場合、ユーザーは画面をスクロールできることを知らないか、スクロールできない可能性があります。
インタラクションのエルゴノミクス

メイン ナビゲーションなどの重要な操作は、手の届く画面領域に配置します。フローティング アクション ボタン（FAB）は、目立つ場所に配置されたアクセスしやすいインタラクション ポイントです。

封じ込めグループ

コンテインメントを使用して関連コンテンツをグループ化し、コンテンツとアクションをユーザーに案内します。明示的包含を使用して、関連するアクションを含むコンテンツをグループ化するカード。

アライメント

類似したコンテンツと UI 要素の間で一貫した配置を提供する。

すべきこと

同様の要素間の間隔を一定にする。

すべきでないこと

要素間のスペースが不均一だと、デザインが雑に見えて読みにくくなります。
重要なやり取り

1 つのビューにアクションを詰め込みすぎないようにします。

レイアウトの仕様をメモする

カスタム レイアウトを構築する際は、配置、制約、重力という用語を使用して、レイアウト内のコンテンツの配置方法を記述します。画像を適切に表示するために、画像がコンテナにどのように反応するかを含めます。