Jetpack Compose Academy · レッスン

ArrangementとAlignment

子要素の位置と間隔を正確に設定します。

「ArrangementとAlignment」はCoddyKit上の無料Jetpack Compose Academyレッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはJetpack Compose Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Jetpack Compose Academyコースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

Two Words, Two Jobs

Layout control comes down to arrangement and alignment. They sound similar but they do different jobs. Let's untangle them. 🧭

Arrangement: Along the Main Axis

Arrangement controls spacing along the layout's main axis: vertical for a Column, horizontal for a Row.

Alignment: Across the Cross Axis

Alignment controls position on the other axis: horizontal in a Column, vertical in a Row. It lines children up sideways.

Grouping at One End

Arrangement.Top, Center, and Bottom pack children together at one end of a Column, leaving the rest as empty space.

Column(verticalArrangement = Arrangement.Center) {
    Text("A")
    Text("B")
}

Spreading Children Out

Use SpaceBetween, SpaceAround, or SpaceEvenly to distribute extra space among children instead of bunching them up.

Row(horizontalArrangement = Arrangement.SpaceEvenly) {
    Text("A")
    Text("B")
    Text("C")
}

SpaceBetween vs SpaceEvenly

SpaceBetween hugs the edges with no outer gaps, while SpaceEvenly adds equal gaps everywhere, including before the first and after the last child.

Fixed Gaps with spacedBy

For a consistent gap, use Arrangement.spacedBy. It inserts the exact distance you give between every adjacent child.

Column(verticalArrangement = Arrangement.spacedBy(12.dp)) {
    Text("A")
    Text("B")
}

Column's Cross-Axis Alignment

In a Column the cross axis is horizontal, so horizontalAlignment chooses Start, CenterHorizontally, or End for the children.

Column(horizontalAlignment = Alignment.End) {
    Text("Right side")
}

Row's Cross-Axis Alignment

In a Row the cross axis is vertical, so verticalAlignment picks Top, CenterVertically, or Bottom for the children.

Row(verticalAlignment = Alignment.Bottom) {
    Text("Aligned bottom")
}

Combine Both for Layout

You usually set both at once: arrangement spaces children along the main axis while alignment positions them on the cross axis.

Column(
    verticalArrangement = Arrangement.Center,
    horizontalAlignment = Alignment.CenterHorizontally
) { Text("Dead center") }

Effect Needs Extra Space

Arrangement only shows when the container is bigger than its children. A wrap-content Column has no spare room to redistribute.

Quick Check

Let's confirm which axis each setting controls.

Recap: Arrangement & Alignment

You learned the split: arrangement spaces children along the main axis, alignment positions them on the cross axis. Combine both for precise layouts.

よくある質問

「ArrangementとAlignment」レッスンは無料ですか？

はい。「ArrangementとAlignment」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Jetpack Compose Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Jetpack Compose Academyコースには全4レッスンが含まれています。

「ArrangementとAlignment」で何を学びますか？

子要素の位置と間隔を正確に設定します。ブラウザで直接実行するハンズオンコードでJetpack Compose Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Jetpack Compose Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのJetpack Compose Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン4/4です。

「ArrangementとAlignment」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このJetpack Compose Academyレッスンでコードを書いて実行できますか？

はい。すべてのJetpack Compose Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Jetpack Compose Academyに戻る