このページは Cloud Translation API によって翻訳されました。

ビューを使用したレスポンシブ / アダプティブデザイン

レスポンシブ/アダプティブレイアウトは、あります。レスポンシブ/アダプティブレイアウトを実装して、ビューベースのアプリで、すべてのディスプレイサイズ、向き、サイズ変更可能な構成（マルチウィンドウ、モード。

レスポンシブデザイン

さまざまなデバイスフォームファクタをサポートするには、まず利用可能な表示スペースの変動に反応するレイアウト追加できます

ConstraintLayout

レスポンシブレイアウトを作成するには、 ConstraintLayout UI のベースレイアウトとして使用しますConstraintLayout を使用すると、他のビューとの空間関係に応じた各ビューの位置とサイズ作成できます。すべてのビューをビューとしてまとめて移動したりサイズ変更したりして、表示スペースの変更もできます。

ConstraintLayout でレイアウトを作成するときは、Android Studio の Layout Editor を使用すると簡単です。Layout Editor を使用すると、新しいビューを親ビューと兄弟ビューに対する制約の適用、ビューの設定 XML を手動で編集する必要はありません。

**図 3.** `ConstraintLayout` を表示している Android Studio の Layout Editor。

詳しくは、レスポンシブ UI を作成する ConstraintLayout など）。

レスポンシブな幅と高さ

レイアウトをさまざまな表示サイズにレスポンシブにするには、次のコマンドを使用します。幅には wrap_content、match_parent、または 0dp (match constraint) を指定します。ビューコンポーネントの高さ:

wrap_content: ビューは、ビューに含まれるコンテンツに合わせてサイズを設定します。
match_parent: 親ビュー内で可能な限り拡大します。
0dp (match constraint): ConstraintLayout で、次のように指定します。 match_parent。ビューはビュー内の使用可能なスペースをすべて占有し、必要があります。

例:

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="@string/lorem_ipsum" />

図 4 は、ディスプレイとしての TextView の幅と高さがどのように調整されるかを示しています。幅はデバイスの向きに応じて変化します。

TextView は、利用可能なすべてのスペース（match_parent）を埋めるように幅を設定します。コンテナの高さに必要なスペースと同程度の高さをテキスト（wrap_content）。これにより、ビューをさまざまなディスプレイに適応させることができます。テキストの量の違いを分析できます

LinearLayout を使用している場合、また、レイアウトに基づいて子ビューを展開することもできます。 weight ビューは比例的に埋めます表示されます。ただし、ネストされた LinearLayout で重みを使用するには、システムが複数のレイアウトパスを実行して、各レイアウトパスのサイズを決定する UI のパフォーマンスが低下します。

ConstraintLayout では、ほぼすべてのレイアウトを LinearLayout にはパフォーマンスへの影響がないため、ネストされた LinearLayout～ ConstraintLayout。次に、制約を使用して重み付けされたレイアウトを定義できます。チェーンします。

アダプティブデザイン

アプリのレイアウトは、さまざまなディスプレイサイズに対して常にレスポンシブである必要があります。ただし、レスポンシブレイアウトであっても、マルチウィンドウモードのディスプレイに表示されます。たとえば、ここで作成する UI には、スマートフォン向けに設計されているため、。アダプティブデザインでは、ユーザーに合わせて最適化された代替レイアウトが提供されます。指定します。

リストと詳細 UI の SlidingPaneLayout

リスト / 詳細 UI は通常、画面に表示されます。大画面の場合、リストペインと詳細ペインは通常は横並びになりますリスト内のアイテムを選択すると、アイテム情報が UI を変更せずに詳細ペインに表示されます。2 つのペインは残ります。並べて表示することもできます。ただし、小さい画面では 2 つのペインが別々に表示され、表示領域全体を占有します。リストペインの項目が選択したアイテムの情報が詳細ペインに置き換わります。クリックします。「戻る」操作を行うと、詳細ペインに代わってリストペインが表示されます。

SlidingPaneLayout どちらがユーザーエクスペリエンスなのかを判定するロジックを次のように指定します。

<?xml version="1.0" encoding="utf-8"?>
<androidx.slidingpanelayout.widget.SlidingPaneLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="280dp"
        android:layout_height="match_parent"
        android:layout_gravity="start" />

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="300dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        app:defaultNavHost="true"
        app:navGraph="@navigation/item_navigation" />

</androidx.slidingpanelayout.widget.SlidingPaneLayout>

に含まれる 2 つのビューの layout_width 属性と layout_weight 属性 SlidingPaneLayout は SlidingPaneLayout の動作を決定します。この例では、ウィンドウが両方のビューを表示するのに十分な大きさ（幅 580 dp 以上）である場合、ペインが横並びで表示されますただし、ウィンドウの幅が 580 dp: 各ペインが互いにスライドして個別にアプリ全体を占有クリックします。

ウィンドウの幅が、指定された最小幅の合計（580 dp）より大きい場合は、 layout_weight 値を使用すると、2 つのペインのサイズを比例配分できます。たとえば、リストペインには太さがないため、常に幅 280 dp になります。ただし、詳細ペインは 580 dp を超える水平方向のスペースを常に埋めます。これは、ビュー layout_weight 設定の関数です。

代替レイアウトリソース

さまざまなディスプレイサイズに UI デザインを適応させるには、代替レイアウトを使用するリソースによって識別される修飾子。

**図 5.** 同じアプリで、ディスプレイサイズごとに異なるレイアウトを使用する。

画面固有のアダプティブレイアウトを提供するには、追加のアプリのソースコード内の res/layout/ ディレクトリ。それぞれにディレクトリを作成する別のレイアウトを必要とする画面構成があるとします。次に画面を追加します構成修飾子を layout ディレクトリ名に追加します（例: 利用可能な幅が 600 dp の画面では layout-w600dp）。

構成修飾子は、利用可能な表示領域を表します。作成できますシステムでは、システムデコレーション（例: ナビゲーションバーなど）やウィンドウ構成の変更（マルチウィンドウモード）を使用することがあります。

Android Studio で代替レイアウトを作成するには、レイアウトバリエーションを使用して画面に合わせて最適化するビューで UI を開発する。

最小幅の修飾子

画面サイズの「最小幅」の修飾子を使用すると、最小幅（密度非依存）を持つディスプレイのレイアウトピクセル（dp）です。

Android では、画面サイズを dp の単位として記述することで、以下を実現できます。特定のディスプレイサイズ向けに設計されたレイアウトで、異なる可能性があります。

たとえば、最適化された main_activity という名前のレイアウトを作成できます。異なるバージョンのファイルを作成して、スマートフォンやタブレットにディレクトリ:

res/layout/main_activity.xml           # For phones (smaller than 600dp smallest width)
res/layout-sw600dp/main_activity.xml   # For 7" tablets (600dp wide or wider)

最小幅の修飾子は、ディスプレイの 2 つの辺の最小を指定します。方向は関係ありません。したがって、全体の表示サイズを指定します。

他の最小幅の値と、一般的な画面サイズの対応を次に示します。

320 dp: 小型のスマートフォン画面（240x320 ldpi、320x480 mdpi、480x800 hdpi など）
480 dp: 5 インチ未満の大画面スマートフォン（480x800 mdpi）
600 dp: 7 インチタブレット（600x1024 mdpi）
720 dp: 10 インチタブレット（720x1280 mdpi、800x1280 mdpi など）

次の図は、画面 dp の変化をより詳細に示しています。画面サイズや画面の向きに応じて異なります。

**図 6.** さまざまな画面サイズをサポートするための推奨幅ブレークポイント。

最小幅の修飾子の値は dp です。重要なのはシステムがピクセル密度を考慮した後に利用できるディスプレイ領域の面積（未加工のピクセル解像度ではない）。

最小幅などのリソース修飾子を使用して指定したサイズは、 実際の画面サイズとは異なります。代わりに、サイズでは横または高さが アプリウィンドウで使用できる dp 単位。Android システムはシステム UI の画面の一部（例: 上部のステータスバーに表示されます。このため、画面の一部がいくつか用意されていますアプリがマルチウィンドウモードで使用されている場合、アプリは、そのアプリを含むウィンドウのサイズにのみアクセスできます。Google サイズ変更されると、構成がトリガーされます。新しいウィンドウのサイズにシステムが適切なレイアウトファイルを選択できるようにします。このリソースは宣言する修飾子のサイズでは、アプリに必要なスペースのみを指定する必要があります。システム UI が使用するスペースは、システムにより追加します。

利用可能な幅の修飾子

ディスプレイの最小幅に基づいてレイアウトを変更するのではなく、使用可能な幅または高さに応じてレイアウトを変更できます。たとえば、画面が表示されたときに常に 2 ペインレイアウトを使用したい場合は、幅は 600 dp 以上です。この幅は、デバイスが横向きまたは縦向きになっている。その場合は、 使用可能な幅修飾子を次のように定義します。

res/layout/main_activity.xml         # For phones (smaller than 600dp available width)
res/layout-w600dp/main_activity.xml  # For 7" tablets or any screen with 600dp available width
                                     # (possibly landscape phones)

アプリで利用可能な高さが気になる場合は、 利用可能な高さの修飾子。たとえば、layout-h600dp は、画面の高さが 600dp 以上

向きの修飾子

すべてのサイズのバリエーションを 1 つのサイズに最小幅と使用可能な幅の修飾子を組み合わせたものではなく、ユーザーがポートレートを切り替えたときのユーザーエクスペリエンスも変更したい 3 つあります

そのため、port 修飾子または land 修飾子をレイアウトディレクトリに追加します。できます。ただし、向きの修飾子はサイズ修飾子の後に配置してください。例:

res/layout/main_activity.xml                # For phones
res/layout-land/main_activity.xml           # For phones in landscape
res/layout-sw600dp/main_activity.xml        # For 7" tablets
res/layout-sw600dp-land/main_activity.xml   # For 7" tablets in landscape

すべての画面構成修飾子について詳しくは、アプリリソースの概要をご覧ください。

ウィンドウサイズクラス

ウィンドウサイズクラスは、アダプティブバナーを作成するのに役立つできます。ブレークポイントは、アプリが使用できる表示領域を、 compact、medium、expanded。幅と高さは個別に指定しますそのためアプリには、幅と高さに対応するウィンドウサイズクラスが必ずあります。あります。

アダプティブレイアウトをプログラムで適用する手順は次のとおりです。

ウィンドウサイズクラスのブレークポイントに基づいてレイアウトリソースを作成する
次のコマンドを使用して、アプリの幅と高さのウィンドウサイズクラスを計算します。 WindowSizeClass#compute() Jetpack WindowManager からライブラリ
現在のウィンドウサイズクラスのレイアウトリソースをインフレートする

で確認できます。

詳しくは、ウィンドウサイズをご覧ください。クラス。

フラグメントによる UI コンポーネントのモジュール化

複数のディスプレイサイズ向けにアプリを設計する場合は、フラグメントを使用して UI ロジックを個別のコンポーネントに分解して、アクティビティ間で UI の動作を複製する。次に、複数のフラグメントを結合して、大画面でマルチペインレイアウトを作成したり、小さな画面でもアクティビティを分けることができます。

たとえば、リストと詳細パターン（ SlidingPaneLayout）は、リストを含むフラグメントと、リストアイテムを含む別のフラグメント表示されます。大画面では、フラグメントを並べて表示できます。オン個別に画面いっぱいに表示されます。

詳しくは、フラグメントの概要をご覧ください。

アクティビティの埋め込み

アプリが複数のアクティビティで構成されている場合、アクティビティの埋め込みを使用すると、次のことができます。アダプティブ UI を簡単に作成できます。

アクティビティの埋め込みは、複数のアクティビティまたはアクティビティの複数のインスタンスを表示します。同時に実行することもできます。大画面ではアクティビティは並べて表示できます。積み重ねた小画面定義します。

アプリがアクティビティをどのように表示するかを定義するには、XML を作成します。構成ファイルを使用して、表示サイズに応じて調整します。別の方法として、Jetpack WindowManager API できます。

アクティビティの埋め込みは、デバイスの向きの変更と折りたたみ式デバイスをサポートします。デバイスの回転または折りたたみと展開に合わせて、アクティビティの積み重ねと積み重ねを解除する。

詳細については、ご利用内容をご覧くださいエンベディングをご覧ください。

画面サイズとアスペクト比

さまざまな画面サイズとアスペクト比でアプリをテストして、UI を確認するスケーリングできます。

Android 10（API レベル 29）以降では、さまざまなアスペクト比がサポートされています。折りたたみ式デバイスのフォームファクタは、アスペクト比が 21:9 のときなど、縦長の画面と正方形のアスペクト比は 1:1 になる。

できるだけ多くのデバイスとの互換性を確保するには、アプリをできる限り多くの画面アスペクト比に対応させましょう

希望するすべての画面サイズのデバイスにアクセスできない場合 Android Emulator を使用して、エミュレートできます。ほぼすべての画面サイズに対応しています

デバイスをお持ちでなくても、実際のデバイスでテストしたい場合は、 Firebase Test Lab を使用して Google データセンターに設置されています。

参考情報

マテリアルデザイン - レイアウトについて