レスポンシブ/アダプティブ レイアウトは、 あります。レスポンシブ/アダプティブ レイアウトを実装して、 ビューベースのアプリで、すべてのディスプレイ サイズ、向き、 サイズ変更可能な構成(マルチウィンドウ、 モード。
レスポンシブ デザイン
さまざまなデバイス フォーム ファクタをサポートするには、まず 利用可能な表示スペースの変動に反応するレイアウト 追加できます
ConstraintLayout
レスポンシブ レイアウトを作成するには、
ConstraintLayout
UI のベースレイアウトとして使用しますConstraintLayout
を使用すると、
他のビューとの空間関係に応じた各ビューの位置とサイズ
作成できます。すべてのビューをビューとしてまとめて移動したりサイズ変更したりして、
表示スペースの変更もできます。
ConstraintLayout
でレイアウトを作成するときは、Android Studio の Layout Editor を使用すると簡単です。Layout Editor を使用すると、新しいビューを
親ビューと兄弟ビューに対する制約の適用、ビューの設定
XML を手動で編集する必要はありません。
![](https://developer.android.com/static/images/screens_support/layout-editor_2x.png?hl=ja)
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
の幅と高さがどのように調整されるかを示しています。
幅はデバイスの向きに応じて変化します。
![](https://developer.android.com/static/images/screens_support/layout-match-parent_2x.png?hl=ja)
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 デザインを適応させるには、代替レイアウトを使用する リソースによって識別される 修飾子。
![](https://developer.android.com/static/images/screens_support/sizes-phone-tablet_2x.png?hl=ja)
画面固有のアダプティブ レイアウトを提供するには、追加の
アプリのソースコード内の 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 の変化をより詳細に示しています。 画面サイズや画面の向きに応じて異なります。
![](https://developer.android.com/static/images/screens_support/layout-adaptive-breakpoints_2x.png?hl=ja)
最小幅の修飾子の値は 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 になる。
できるだけ多くのデバイスとの互換性を確保するには、アプリを できる限り多くの画面アスペクト比に対応させましょう
![](https://developer.android.com/static/images/guide/topics/ui/foldables/fold-screen-ratios.png?hl=ja)
希望するすべての画面サイズのデバイスにアクセスできない場合 Android Emulator を使用して、エミュレートできます。 ほぼすべての画面サイズに 対応しています
デバイスをお持ちでなくても、実際のデバイスでテストしたい場合は、 Firebase Test Lab を使用して Google データセンターに設置されています。
参考情報
- マテリアル デザイン - レイアウトについて