0Pricing
Android Academy · レッスン

Column、Row、Box

一般的なレイアウトにComposableを配置します

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

Composable の配置

Composable を互いに相対的に配置するために、Compose には基本的なレイアウト用 Composable が 3 つあります。Column、Row、Box です。

Column：縦方向の積み重ね

Column は子要素を上から下へ縦方向に積み重ねます。

Column {
    Text("First")
    Text("Second")
    Text("Third")
}

Row：横方向の積み重ね

Row は子要素を左から右へ横並びに配置します。

Row {
    Text("Left")
    Text("Middle")
    Text("Right")
}

Box：重ね合わせ

Box はレイヤーのように、子要素を互いに重ねて配置します。後から配置した子要素が、先に配置した子要素の上に描画されます。バッジ、オーバーレイ、背景などに便利です。

Box {
    Image(
        painter = painterResource(R.drawable.photo),
        contentDescription = null
    )
    Text("Caption")
}

子要素は Content Lambda

各レイアウトは末尾に content lambda を受け取ります。その中で呼び出した Composable がすべて子要素になります。XML はなく、子要素は単なる関数呼び出しです。

レイアウトのネスト

レイアウトは自由にネストできます。Column の中に Row を配置すると、グリッドのような構造や行のリストを作成できます。

Column {
    Row {
        Text("A")
        Text("B")
    }
    Row {
        Text("C")
        Text("D")
    }
}

Column と LinearLayout の比較

XML を使った経験がある場合、Column は縦方向の LinearLayout、Row は横方向の LinearLayout に相当します。Box は簡易的な FrameLayout に相当します。

デフォルトのサイズ

デフォルトでは、レイアウトのサイズは子要素に合わせた大きさになります（wrap content）。Modifier.fillMaxSize() などの Modifier を使うと、利用可能な領域全体に広げられます。詳しくは次のレッスンで説明します。

Box の contentAlignment

Box では contentAlignment を使って、すべての子要素を揃えられます。たとえば、すべてを中央に配置できます。

Box(contentAlignment = Alignment.Center) {
    Text("Centered")
}

適切なレイアウトの選択

方向に応じて選びます。縦方向には Column、横方向には Row、重ね合わせや 1 つの子要素の中央配置には Box を使います。ほとんどの画面では、この 3 つを組み合わせます。

まとめ

3 つすべてを使った小さなプロフィールレイアウトです。

@Composable
fun Profile() {
    Column {
        Box(contentAlignment = Alignment.Center) {
            Image(
                painter = painterResource(R.drawable.avatar),
                contentDescription = null
            )
        }
        Row {
            Text("Posts ")
            Text("Followers")
        }
    }
}

クイックチェック

子要素を互いに重ねて配置するレイアウトはどれですか？

まとめ

基本的なレイアウトは 3 つです。

  • Column — 縦方向の積み重ね
  • Row — 横方向の積み重ね
  • Box — 重なり合うレイヤー。contentAlignment でコンテンツを中央揃えにできます。

これらを自由にネストして、あらゆる画面を構築できます。

よくある質問

「Column、Row、Box」レッスンは無料ですか？

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

「Column、Row、Box」で何を学びますか？

一般的なレイアウトにComposableを配置します ブラウザで直接実行するハンズオンコードでAndroid Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「Column、Row、Box」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

  1. Column、Row、Box
  2. Modifierシステム
  3. 配置と整列
  4. LazyColumnによるリスト
← Android Academyに戻る