ビューのレイアウト
レイアウトは、アプリのユーザー インターフェースの構造を定義します。次に例を示します。
activity です。Deployment に含まれる
階層構造を使用して作成されます。
View
、
ViewGroup
説明します。View
は通常、ユーザーが目にするものを描画します。
やり取りできますViewGroup
は、Google Cloud プロジェクト内で
View
とその他の ViewGroup
のレイアウト構造
オブジェクトを宣言します(図 1 を参照)。
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 を
使用します。
ビューを作成してアプリから参照するには、一般的な 次のようなパターンがあります。
- レイアウト ファイルでビューを定義し、
次の例をご覧ください。
<Button android:id="@+id/my_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/my_button_text"/>
- ビュー オブジェクトのインスタンスを作成し、レイアウトからキャプチャします。
通常は
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 に示すように、
ビューグループは、各子ビューのレイアウト パラメータを定義します。
ビューグループです。
すべての 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
は、それらをさまざまなアプリケーションに対して個別に適用し、
使用できます。
一般的なレイアウト
ViewGroup
クラスの各サブクラスは、
その中にネストしたビューを表示します。最も柔軟なレイアウト タイプは、
レイアウト階層を浅く維持するための最適なツールを提供します。
ConstraintLayout
。
Android に組み込まれている一般的なレイアウト タイプの一部を以下に示します。 説明します。
<ph type="x-smartling-placeholder">動的リストを作成する
レイアウトのコンテンツが動的である場合や、事前に決定されていない場合、
RecyclerView
または
のサブクラス
AdapterView
。
メモリを使用するため、通常は RecyclerView
のほうが適しています。
AdapterView
よりも効率的です。
RecyclerView
と
AdapterView
には以下が含まれます。
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)