ビューのレイアウト

Compose を試す
Jetpack Compose は、Android に推奨される UI ツールキットです。Compose でレイアウトを操作する方法を学習します。
<ph type="x-smartling-placeholder"></ph> Compose レイアウトの基本を学ぶ →

レイアウトは、アプリのユーザー インターフェースの構造を定義します。次に例を示します。 activity です。Deployment に含まれる 階層構造を使用して作成されます。 View、 ViewGroup 説明します。View は通常、ユーザーが目にするものを描画します。 やり取りできますViewGroup は、Google Cloud プロジェクト内で View とその他の ViewGroup のレイアウト構造 オブジェクトを宣言します（図 1 を参照）。

図 1. ビュー階層の図。 UI レイアウト

View オブジェクトはウィジェットと呼ばれることが多く、次のいずれかになります。 多くのサブクラスがあります。 Button または TextView。「 ViewGroup オブジェクトは通常、レイアウトと呼ばれ、 さまざまなレイアウト構造を提供しており、 LinearLayout または ConstraintLayout。

レイアウトを宣言する方法は 2 通りあります。

  • XML で UI 要素を宣言します。Android は単純な XML を提供する View のクラスとサブクラスに対応する語彙、 たとえばウィジェットやレイアウトなどですAndroid Studio の Layout Editor（XML をビルドするため） ドラッグ&ドロップで移動できます。

  • 実行時にレイアウト要素をインスタンス化する。アプリでは、 View オブジェクトと ViewGroup オブジェクトを作成し、それらのオブジェクトの プロパティをプログラムで構成します。

XML で UI を宣言することで、アプリの表示を XML から分離できます。 制御します。また、XML ファイルを使用すると、 では、画面サイズと向きに応じたさまざまなレイアウトが提供されます。これは、 詳しくは 異なる画面をサポートする をご覧ください。

Android フレームワークには、以下のいずれかまたは両方を使用する柔軟性が備わっています。 アプリの UI を作成します。たとえば、アプリの依存関係を XML でデフォルトのレイアウトを記述し、実行時にレイアウトを変更できる。

<ph type="x-smartling-placeholder">

XML の記述

Android の XML ボキャブラリを使用すると、UI レイアウトや HTML 要素でウェブページを作成する場合と同じ方法で、画面要素内の 一連のネスト要素で構成されています

各レイアウト ファイルに含めることができるルート要素は 1 つだけです。 View または ViewGroup オブジェクト。ルートを定義すると、 追加するには、子要素としてレイアウト オブジェクトまたはウィジェットを レイアウトを定義する View 階層を段階的に作成します。対象 たとえば、次の XML レイアウトでは、垂直方向の LinearLayout を使用して、 TextView と Button を保持します。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical" >
    <TextView android:id="@+id/text"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="Hello, I am a TextView" />
    <Button android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello, I am a Button" />
</LinearLayout>

XML でレイアウトを宣言したら、 Android プロジェクトの res/layout/ 内の .xml 拡張機能 適切にコンパイルされます。

レイアウト XML ファイルの構文について詳しくは、以下をご覧ください。 レイアウト リソース。

XML リソースを読み込む

アプリをコンパイルすると、各 XML レイアウト ファイルは View リソースにコンパイルされます。レイアウト リソースをアプリの Activity.onCreate() あります。これを行うには、 setContentView(), 次の形式でレイアウト リソースへの参照を渡します。 R.layout.layout_file_name。たとえば、XML が レイアウトが main_layout.xml として保存されたら、 次のように Activity を設定します。

Kotlin

fun onCreate(savedInstanceState: Bundle) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.main_layout)
}

Java

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main_layout);
}

Android フレームワークは、onCreate() コールバック メソッドを Activity の起動時に Activity を設定します。詳細 アクティビティのライフサイクルに関する情報は、 Google Workspace の アクティビティをご覧ください。

属性

すべての View オブジェクトと ViewGroup オブジェクトは、それぞれ独自の XML 属性をサポートしています。一部の属性は View に固有です。 渡されます。たとえば、TextView は textSize をサポートします。 属性です。ただし、これらの属性は任意の View にも継承されます。 オブジェクトを宣言します。一部はすべての View に共通 継承されます。これは、以下のようにルートの View クラスから継承されるためです。 id 属性。その他の属性はレイアウトと見なされます。 パラメータ: 特定のレイアウトの向きを記述する属性 そのオブジェクトの親で定義されている、View オブジェクトの ViewGroup オブジェクト。

ID

すべての View オブジェクトには、整数 ID を関連付けて、 ツリー内の View を一意に識別します。アプリが コンパイル済みの場合、この ID は整数として参照されますが、ID は通常、 レイアウト XML ファイルで、id 属性の文字列として指定します。これは すべての View オブジェクトに共通の XML 属性で、 View クラス。頻繁に使用する。内部 ID の構文は、 XML タグは次のとおりです。

android:id="@+id/my_button"

文字列の先頭にあるアット記号（@）は、 XML パーサーは ID 文字列の残りの部分を解析して展開し、 定義できます。プラス記号（+）は、新しいリソース名であることを示します。 これを作成して R.java 内のリソースに追加する必要がある 表示されます。

Android フレームワークには、他にも多くの ID リソースが用意されています。Google Cloud Storage の Android リソース ID の場合、プラス記号は必要ありませんが、 android パッケージの名前空間は次のようになります。

android:id="@android:id/empty"

android パッケージ名前空間は、参照していることを示します。 ローカル クラスではなく、android.R リソースクラスの ID を 使用します。

ビューを作成してアプリから参照するには、一般的な 次のようなパターンがあります。

  1. レイアウト ファイルでビューを定義し、 次の例をご覧ください。 
    <Button android:id="@+id/my_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/my_button_text"/>
  2. ビュー オブジェクトのインスタンスを作成し、レイアウトからキャプチャします。 通常は onCreate() メソッドを呼び出します。

    Kotlin

    val myButton: Button = findViewById(R.id.my_button)

    Java

    Button myButton = (Button) findViewById(R.id.my_button);

ビュー オブジェクトの ID を定義することは、 RelativeLayout。 相対レイアウトでは、兄弟ビューが別のビューに対して相対的にレイアウトを定義できます。 この兄弟ビューは一意の ID で参照されます。

ID はツリー全体で一意である必要はありませんが、 検索するツリーの一意の部分です。多くの場合は、 できるだけ一意の名前にすることをおすすめします。

レイアウト パラメータ

layout_something という名前の XML レイアウト属性の定義 適切な View のレイアウト パラメータが 存在する ViewGroup。

すべての ViewGroup クラスは、 ViewGroup.LayoutParams。 このサブクラスには、それぞれのサイズと位置を定義するプロパティ型が ビューグループに応じて適宜変更されます。図 2 に示すように、 ビューグループは、各子ビューのレイアウト パラメータを定義します。 ビューグループです。

図 2. レイアウトを使用したビュー階層の可視化 各ビューに関連付けられたパラメータ。

すべての LayoutParams サブクラスには、それぞれに固有の構文を設定するための 使用できます。各子要素で LayoutParams を定義する必要があります。 適していますが、別のリソースに対して 自身の子に対しては LayoutParams。

すべてのビューグループは、layout_width を使用して幅と高さを含めます。 および layout_height があり、各ビューでこれらを定義する必要があります。多数 LayoutParams には、必要に応じて余白や枠線を含めます。

幅と高さは正確な測定値で指定できますが、指定できない場合があります。 頻繁に確認したい場合は多くの場合、これらの定数のいずれかを使用して、 width または height:

  • wrap_content: ビューのサイズを サイズを小さくすることができます。
  • match_parent: ビューが親と同じ大きさになるよう指示します。 作成できます。

一般に、Terraform でレイアウトの幅と高さを指定することは、 ピクセル単位などの絶対単位を使用します。より良いアプローチは、相対測定を使用することです。 密度非依存ピクセル単位（dp）、wrap_content、 match_parent: 広告がすべての画面に表示され、 対応しています。使用可能な測定タイプは レイアウト リソース。

レイアウトの位置

ビューは長方形のジオメトリで表示されます。データには、ストレージ レイヤと 左座標と上座標、および 2 つの次元（ 指定します。位置と寸法の単位はピクセルです。

ビューの位置を取得するには、次のメソッドを呼び出します。 getLeft() および getTop()。 前者は、画像を表す長方形の左（x）座標を返します。 できます。後者は長方形の上部（y）座標を返します ビューを表します。これらのメソッドは、 その親。たとえば、getLeft() が 20 を返した場合、これは次のことを意味します。 位置は直接広告の左端から 20 ピクセル できます。

さらに、不要な計算を回避するための便利なメソッドもあります。 つまり getRight() および getBottom()。 これらのメソッドは、地図の右端と下端の座標を返します。 ビューを表す長方形になります。たとえば、getRight() を呼び出すと、 getLeft() + getWidth() の計算と同様です。

サイズ、パディング、マージン

ビューのサイズは、幅と高さで表します。ビューには 2 つのペアがある 定義できます。

1 つ目のペアは「測定された幅」と呼ばれ、 測定された高さ。これらのディメンションは、ビューの規模を定義します。 その親の中の子フォルダです。測定寸法を取得するには getMeasuredWidth() および getMeasuredHeight()。

2 つ目のペアは幅と高さと呼ばれ、 描画幅と描画高さ。これらのディメンションによって 描画時およびレイアウト後に、画面上のビューの実際のサイズに調整できます。これらの の値は、測定された幅や高さと異なる場合がありますが、必ずしも一致する必要はありません。マイページ 幅と高さを取得するには、次の関数を呼び出します。 getWidth() および getHeight()。

寸法を測定するために、ビューはパディングを考慮します。パディング ビューの左部分、上部分、右部分、下部分のピクセル数で表されます。 パディングを使用して、特定の数だけビューのコンテンツをオフセットできる ピクセルです。たとえば、左側のパディングが 2 の場合、ビューのコンテンツが 2 ピクセルプッシュされます。 選択しますパディングは、 setPadding(int, int, int, int) メソッドを呼び出し、 getPaddingLeft(), getPaddingTop(), getPaddingRight(), および getPaddingBottom()。

ビューではパディングを定義できますが、マージンはサポートしていません。ただし、 ビューグループはマージンに対応しています詳しくは、 ViewGroup、 ViewGroup.MarginLayoutParams をご覧ください。

ディメンションについて詳しくは、このモジュールの ディメンション。

余白やパディングはプログラムで設定するだけでなく、 XML レイアウトに追加します。

  <?xml version="1.0" encoding="utf-8"?>
  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical" >
      <TextView android:id="@+id/text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="16dp"
                android:padding="8dp"
                android:text="Hello, I am a TextView" />
      <Button android:id="@+id/button"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_marginTop="16dp"
              android:paddingBottom="4dp"
              android:paddingEnd="8dp"
              android:paddingStart="8dp"
              android:paddingTop="4dp"
              android:text="Hello, I am a Button" />
  </LinearLayout>

上記の例では、マージンとパディングが適用されています。「 TextView の余白とパディングが周囲全体に適用されます。 Button は、それらをさまざまなアプリケーションに対して個別に適用し、 使用できます。

<ph type="x-smartling-placeholder">

一般的なレイアウト

ViewGroup クラスの各サブクラスは、 その中にネストしたビューを表示します。最も柔軟なレイアウト タイプは、 レイアウト階層を浅く維持するための最適なツールを提供します。 ConstraintLayout。

Android に組み込まれている一般的なレイアウト タイプの一部を以下に示します。 説明します。

<ph type="x-smartling-placeholder">
線形レイアウトを作成する

子を水平または垂直の 1 行に整理し、 ウィンドウの長さが画面の長さを超えた場合にスクロールバーを表示します。

WebView でウェブアプリを作成する

ウェブページを表示します。

動的リストを作成する

レイアウトのコンテンツが動的である場合や、事前に決定されていない場合、 RecyclerView または のサブクラス AdapterView。 メモリを使用するため、通常は RecyclerView のほうが適しています。 AdapterView よりも効率的です。

RecyclerView と AdapterView には以下が含まれます。

リスト

スクロール可能な 1 列のリストが表示されます。

グリッド

スクロール可能な列と行のグリッドが表示されます。

RecyclerView は、より多くの可能性と オプション カスタムラベルを作成する Layout Manager。

アダプタビューにデータを入力する

新しい P-MAX キャンペーンを AdapterView ListView など または GridView 作成者 AdapterView インスタンスを Adapter, 外部ソースからデータを取得して View を作成する 各データエントリを表す名前です。

Android には、便利な Adapter のサブクラスがいくつか用意されています。 さまざまな種類のデータを取得し、 AdapterView。最も一般的なアダプターは次の 2 つです。

ArrayAdapter
データソースが配列の場合は、このアダプターを使用します。デフォルトでは ArrayAdapter は、以下を呼び出して各配列アイテムのビューを作成します。 toString() 各アイテムにコンテンツを配置し、TextView に配置します。

たとえば、テーブルに表示させたい文字列の配列がある場合、 ListView は、次のコマンドを使用して新しい ArrayAdapter を初期化します。 コンストラクタを使用して、各文字列と文字列配列のレイアウトを指定します。

Kotlin

    val adapter = ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, myStringArray)

Java

    ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
            android.R.layout.simple_list_item_1, myStringArray);

このコンストラクタの引数は次のとおりです。

  • アプリ Context
  • 各文字列に対応する TextView を含むレイアウト 配列
  • 文字列配列

次に呼び出します setAdapter() ListView:

Kotlin

    val listView: ListView = findViewById(R.id.listview)
    listView.adapter = adapter

Java

    ListView listView = (ListView) findViewById(R.id.listview);
    listView.setAdapter(adapter);

各アイテムの外観をカスタマイズするには、 配列内のオブジェクトの toString() メソッド。または 各アイテムのビューが表示されますが TextView。たとえば、Pod を ImageView （ArrayAdapter クラスを拡張し、 オーバーライド getView() 各アイテムに必要なビューのタイプを返します。

SimpleCursorAdapter
このアダプターは、データが Cursor。 SimpleCursorAdapter を使用する場合は、使用するレイアウトを指定する Cursor の各行と列のどの列が 目的のレイアウトのビューに挿入する Cursor。 たとえば、ユーザーの名前と電話番号のリストを作成する場合、 Cursor を返すクエリを実行して、 各行に名前と数字の列が含まれています。マイページ 次に、抽出する列を指定する文字列配列を作成します。 各結果のレイアウトで使用する Cursor と整数 各列に対応するビューを指定する配列。 place:

Kotlin

    val fromColumns = arrayOf(ContactsContract.Data.DISPLAY_NAME,
                              ContactsContract.CommonDataKinds.Phone.NUMBER)
    val toViews = intArrayOf(R.id.display_name, R.id.phone_number)

Java

    String[] fromColumns = {ContactsContract.Data.DISPLAY_NAME,
                            ContactsContract.CommonDataKinds.Phone.NUMBER};
    int[] toViews = {R.id.display_name, R.id.phone_number};

SimpleCursorAdapter をインスタンス化するときは、 Cursor が含められ、 これら 2 つの配列:

Kotlin

    val adapter = SimpleCursorAdapter(this,
            R.layout.person_name_and_number, cursor, fromColumns, toViews, 0)
    val listView = getListView()
    listView.adapter = adapter

Java

    SimpleCursorAdapter adapter = new SimpleCursorAdapter(this,
            R.layout.person_name_and_number, cursor, fromColumns, toViews, 0);
    ListView listView = getListView();
    listView.setAdapter(adapter);

次に、SimpleCursorAdapter が行ごとにビューを作成します。 用意されているレイアウトを使用して Cursor を fromColumns アイテムを対応する toViews に変換する 表示されます。

アプリのライフサイクル中に、基盤となるデータを 読み取る必要がある場合は、 notifyDataSetChanged()。 これにより、アタッチされたビューに、データが変更されたことが通知され、ビューが更新されます できます。

クリック イベントを処理する

AdapterView の各項目でのクリック イベントに応答できます。 実装することで、 AdapterView.OnItemClickListener 行うことができます。例:

Kotlin

listView.onItemClickListener = AdapterView.OnItemClickListener { parent, view, position, id ->
    // Do something in response to the click.
}

Java

// Create a message handling object as an anonymous class.
private OnItemClickListener messageClickedHandler = new OnItemClickListener() {
    public void onItemClick(AdapterView parent, View v, int position, long id) {
        // Do something in response to the click.
    }
};

listView.setOnItemClickListener(messageClickedHandler);

参考情報

Google Chat でレイアウトがどのように使用されるか、 ヒマワリ デモアプリ（GitHub）