配置と整列
子要素を正確に配置します
「配置と整列」はCoddyKit上の無料Android Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAndroid Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Android Academyコースには全4レッスンが含まれています。
子要素の配置
Column または Row の内部では、子要素の位置を 2 つの設定で制御します。alignment はレイアウトを横切る方向、arrangement はレイアウトに沿う方向を指定します。
Column の Alignment
Column では子要素が縦に積み重なります。horizontalAlignment は子要素の水平方向の位置（左、中央、右）を制御します。
Column(horizontalAlignment = Alignment.CenterHorizontally) {
Text("Centered")
Text("Also centered")
}Column の Arrangement
verticalArrangement は、子要素を垂直方向にどのように配置するかを制御します。上、中央、下、または均等配置を指定できます。
Column(verticalArrangement = Arrangement.Center) {
Text("A")
Text("B")
}Row の Alignment
Row では軸が入れ替わります。verticalAlignment は子要素の垂直方向の位置を制御し、horizontalArrangement は子要素を水平方向に配置します。
Row(verticalAlignment = Alignment.CenterVertically) {
Text("Left")
Text("Right")
}組み合わせを覚える
ヒント：alignment は交差軸、arrangement は主軸です。Column の主軸は垂直方向なので、verticalArrangement と horizontalAlignment を使います。
Arrangement のオプション
よく使う Arrangement の値：
Top/Bottom/CenterSpaceBetween— 項目間に余白を配置します。SpaceAround/SpaceEvenly
SpaceBetween
SpaceBetween は最初と最後の子要素を両端に配置し、残りを均等に分散します。左にタイトル、右にアイコンがあるトップバーに最適です。
Row(horizontalArrangement = Arrangement.SpaceBetween) {
Text("Title")
Text("Action")
}Arrangement.spacedBy
Arrangement.spacedBy(8.dp) はすべての子要素の間に固定の間隔を追加します。リスト項目を均等に配置する最もすっきりした方法です。
Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
Text("One")
Text("Two")
Text("Three")
}spacedBy と Alignment の組み合わせ
Arrangement と Alignment を組み合わせることで、レイアウトを細かく制御できます。
Column(
verticalArrangement = Arrangement.spacedBy(12.dp),
horizontalAlignment = Alignment.CenterHorizontally
) {
Text("Title")
Button(onClick = {}) { Text("Go") }
}Box の Alignment
Box では contentAlignment を使って子要素を配置できます。また、個々の子要素に Modifier.align() を指定して、それぞれの位置を設定することもできます。
Box(modifier = Modifier.fillMaxSize()) {
Text(
text = "Bottom",
modifier = Modifier.align(Alignment.BottomCenter)
)
}まとめ
ヘッダー行と、項目を均等に配置したリストです。
Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
Row(horizontalArrangement = Arrangement.SpaceBetween) {
Text("Inbox")
Text("Edit")
}
Text("Message 1")
Text("Message 2")
}クイックチェック
Column で子要素の水平方向の位置を制御するパラメーターはどれですか？
まとめ
配置：
- Alignment = 交差軸、arrangement = 主軸
- Column：
horizontalAlignment+verticalArrangement - Row：
verticalAlignment+horizontalArrangement Arrangement.spacedBy()は均等な間隔を追加します。
よくある質問
「配置と整列」レッスンは無料ですか？
はい。「配置と整列」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Android Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Android Academyコースには全4レッスンが含まれています。
「配置と整列」で何を学びますか？
子要素を正確に配置します ブラウザで直接実行するハンズオンコードでAndroid Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Android Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAndroid Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「配置と整列」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAndroid Academyレッスンでコードを書いて実行できますか？
はい。すべてのAndroid Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。