Jetpack Compose入門：レイアウトの基本

はじめに

今回お話しするJetpack Compose（ジェットパック・コンポーズ）とは、AndroidアプリのUIを簡単に作るための仕組みです。

Android公式ドキュメント（Compose レイアウトの基本¹）を参考にして初心者の方にわかりやすい基本的なレイアウトの使い方を紹介していきます！

従来のXMLレイアウトとは違い、KotlinコードだけでUIを構築できるのが魅力です。

Jetpack Composeでは、UIを関数で定義します。
ボタン、テキスト、画像などの「部品（Composable）」をColumnやRowなどの「レイアウトコンポーネント」で並べていくイメージです。
今回はあわせてiOSのSwiftUIだとどう書けるか、比較しながら見ていきます。

基本レイアウト

Column（縦に並べる）

要素を縦方向に並べることができる。
SwiftではVStackが同じ役割をしている。

Jetpack Compose

Column {
    Text("上に表示")
    Text("下に表示")
}

SwiftUI

VStack {
    Text("上に表示")
    Text("下に表示")
}

Row（横に並べる）

要素を横方向に並べることができる。
SwiftではHStackが同じ役割をしている。

Jetpack Compose

Row {
    Text("左")
    Text("右")
}

SwiftUI

HStack {
    Text("左")
    Text("右")
}

Box（重ねる）

要素を重ねて表示できる。

Jetpack Compose

Box {
    Text("背景テキスト")
    Text("上に重ねるテキスト")
}

SwiftUI

ZStack {
    Text("背景テキスト")
    Text("上に重ねるテキスト")
}

Modifier

Modifierは、レイアウトをカスタマイズするための仕組み。
サイズ、色、余白など、様々なプロパティを簡単に設定できる。
チェーンでModifierをつけるスタイルは両者とても似ています。

padding()：余白を追加
background(Color.Red)：背景色

Jetpack Compose

Text(
    text = "Hello",
    modifier = Modifier
        .padding(16.dp)
        .background(Color.Yellow)
)

SwiftUI

Text("Hello")
    .padding(16)
    .background(Color.yellow)

上記で出てきたpaddingについてもう少し触れていきます。

padding

余白はまとめて指定も可能で、上下左右を個別に設定することもできる。

上下左右すべてに16dpの余白

Jetpack Compose

Modifier.padding(16.dp)

左右に24dp、上下に8dpの余白

Jetpack Compose

Modifier.padding(horizontal = 24.dp, vertical = 8.dp)

それぞれの方向に、好きな値で余白をつける

Jetpack Compose

Modifier.padding(
    start = 16.dp,
    top = 8.dp,
    end = 24.dp,
    bottom = 12.dp
)

方向の名前の覚え方

• start：左（※左から始まる言語の場合）
• end：右
• top：上
• bottom：下

レイアウトのちょっと応用

Columnの中にRowを入れる、といった入れ子構造もComposeなら簡単。

Jetpack Compose

Column {
    Text("タイトル")

    Row {
        Text("項目1")
        Text("項目2")
    }
}

よく使うUI部品

Button（ボタン）

クリックした後のアクションを指定して使用。
SwiftではButtonもほぼ同じ書き方。

Jetpack Compose

Button(onClick = {
    /* 処理を書く */
}) {
    Text("クリックしてね")
}

SwiftUI

Button(action: {
    // 処理を書く
}) {
    Text("クリックしてね")
}

TextField（テキスト入力）

文字を入力するためのフィールド。
状態（text）をrememberで保持して使用。

Jetpack Compose

var text by remember { mutableStateOf("") }

TextField(
    value = text,
    onValueChange = { text = it },
    label = { Text("名前を入力") }
)

SwiftUI

@State private var text: String = ""

TextField("名前を入力", text: $text)

remember とは？

remember²は、「一時的な状態（変数）」を保持する仕組み。

簡単に言うと
「再描画時に値が消えないようにしてくれる」ものです。

SwiftUIで使う @State と remember は、ほぼ同じ役割。

レイアウトのプレビュー

Preview機能³は両方ともIDE（Android Studio / Xcode）でリアルタイムに確認可能。
@Preview アノテーションをつければ、AndroidStudio上でUIの見た目をすぐに確認できる。

Jetpack Compose

@Preview
@Composable
fun MyLayoutPreview() {
    Column {
        Text("Hello Compose!")
    }
}

SwiftUI

#Preview {
    VStack {
        Text("Hello SwiftUI!")
    }
}

まとめ

今回覚えたポイントを整理すると、Jetpack Composeでは以下のような基本的なレイアウトや機能を使って、直感的にUIを構築できます。

レイアウトの目的	Jetpack Compose	SwiftUI
縦に並べる	Column	VStack
横に並べる	Row	HStack
重ねる	Box	ZStack
Modifier	Modifier	View Modifier
ネスト構造	Column + Row	VStack + HStack
プレビュー	@Preview	PreviewProvider

Composeは「コードを書く感覚でUIを作れる」ため、慣れるととてもスピーディに開発が進められます。
まずはシンプルなレイアウトから触って慣れていくのがオススメです。

1. https://developer.android.com/develop/ui/compose/layouts/basics?hl=ja ↩

2. https://developer.android.com/reference/kotlin/androidx/compose/runtime/package-summary#remember(kotlin.Function0) ↩

3. https://developer.android.com/develop/ui/compose/tooling/previews?hl=ja ↩