【Android】＜Kotlin＞Jetpack Composeを使ったUI構築の基本と実践的な例を徹底解説！

2025年1月27日

すだ

みなさまこんにちは〜！
メモリアインクのすだです。

本日は、
KotlinのJetpack Composeを使ったUIの実装について
実際のコードを利用して徹底解説していきます！

この記事を読んでわかること…
・Jetpack Composeとは？
・Composable関数でUIを構築する基本

環境

Kotlin (ver 1.9.0)
Android Studio (Giraffe | 2022.3.1 Patch 3)

Jetpack Composeとは？

Jetpack Composeは、Googleが提供するAndroidアプリのための宣言的UIツールキットです。
従来のXMLベースのUI構築を置き換える形で、よりシンプルで効率的なUI作成を可能にします。

Jetpack Composeを使ったUIの実装は、以下のような特徴があります。▼

宣言的UI: UIをKotlinコードだけで記述でき、状態に基づいてUIが自動的に更新される。
モダンな設計: Kotlinを活用した最新の開発技術を採用。
時間短縮: 再利用可能なComposable関数で開発効率が向上。

また、Jetpack Compose と XML ファイルを使用した従来の Android UI 開発には、以下のような違いがあります。

UIの作り方

Compose: Kotlinのコードだけで画面を作る。XMLファイルは不要。
XML: XMLファイルで画面を作り、Kotlin/Javaから操作する。

動きのある画面の作りやすさ

Compose: 状態（State）を変えると画面が自動で更新される。
XML: 状態が変わったときに画面を手動で更新する必要がある。

部品の使いやすさ

Compose: 小さい部品（Composable関数）を簡単に作って使い回せる。
XML: 部品を使い回すにはカスタムViewを作る必要がある。

動きの速さ

Compose: 必要な部分だけを更新するので速い。
XML: 画面全体を再描画することがあり、Composeより遅くなる場合がある。

↓

端的に表すと
ComposeはKotlinだけで画面が作れる最新の方法で、動きのある画面や効率的な作業に向いている
XMLは昔からある方法で、慣れている人には安心感があるが、手間が増えることもある

Jetpack Composeを始めるための準備

Composeをプロジェクトに導入するには、build.gradleに以下の依存関係を追加します。

android {
    compileSdk 34

    defaultConfig {
        minSdk 21
        targetSdk 34
    }
}

dependencies {
    implementation "androidx.compose.ui:ui:1.5.0"
    implementation "androidx.compose.material3:material3:1.1.1"
    implementation "androidx.compose.ui:ui-tooling:1.5.0"
    implementation "androidx.lifecycle:lifecycle-runtime-ktx:2.6.1"
}

Composable関数でUIを構築する基本

Jetpack Composeでは、UI要素はすべて@Composableアノテーションを持つ関数で記述されます。

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MainScreen() // MainScreen関数を描画
        }
    }
}

@Composable
fun Greeting(name: String) {
    Text(text = "Hello, $name!")
}

@Composable
fun MainScreen() {
    Column {
        Greeting(name = "John")
        Greeting(name = "Jane")
    }
}

5行目：

setContentを使い、ComposeのUIツリーを表示します。

12行目：

Textコンポーネントを使って文字列を描画しています。
${name}を使って、文字列に動的な値を埋め込んでいます。

17行目：

Columnコンポーネントを使用して、縦方向にコンテンツを配置します。
Greeting(name = "John")とGreeting(name = "Jane")を呼び出し、2つの「挨拶メッセージ」を縦に並べて表示します。

ビルドすると以下の画面表示になります。

レイアウトの構築（Row, Column, Box）

Composeには、UIレイアウトを簡単に構築するための要素が用意されています。

Row: 横方向のレイアウト。
Column: 縦方向のレイアウト。
Box: 重ね合わせが可能なレイアウト。

組み合わせると以下のように実装できます。

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            LayoutExample() // LayoutExample関数を描画
        }
    }
}

@Composable
fun LayoutExample() {
    Column(modifier = Modifier.padding(16.dp)) {
        Row {
            Text(text = "Item 1", modifier = Modifier.weight(1f))
            Text(text = "Item 2", modifier = Modifier.weight(1f))
        }
        Box(
            modifier = Modifier
                .size(100.dp)
                .background(Color.Red)
        ) {
            Text("Inside Box", modifier = Modifier.align(Alignment.Center))
        }
    }
}

12行目：

Column
- UI要素を縦に並べるためのレイアウトコンポーネントです。
- 内側に配置された要素は自動的に縦方向に積み重なります。
modifier = Modifier.padding(16.dp):
- Column全体に16dpの余白を追加しています。
- この余白によって、内容が画面の端から少し内側に配置されます。

13行目~：

Row
- UI要素を横方向に並べるためのレイアウトコンポーネントです。
Textコンポーネント
- 「Item 1」と「Item 2」を表示しています。
modifier = Modifier.weight(1f)
- weightはスペースを均等に分割するために使われます。
- ここでは、それぞれのTextが同じ割合（1f）でRowの幅を占有するようになっています。
- 例えば、Rowの幅が100dpの場合、「Item 1」と「Item 2」はそれぞれ50dpずつ幅を持ちます。

17行目~：

Box
- UI要素を重ねて配置するためのレイアウトコンポーネントです。
- 基本的には単一の矩形エリアを定義し、その中で要素を自由に配置できます。
modifier = Modifier.size(100.dp)
- このBoxのサイズを100dp × 100dpに設定しています。
modifier = Modifier.background(Color.Red)
- ボックスの背景色を赤に設定しています。
内部のText
- 「Inside Box」という文字を描画しています。
Modifier.align(Alignment.Center)
- テキストをBoxの中央に配置しています。

ビルドすると以下の画面表示になります。

状態管理とUIの更新

Composeは、状態の変更に応じてUIを自動的に再描画します。

@Composable
fun Counter() {
    var count by remember { mutableStateOf(0) }

    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        Text(text = "Count: $count")
        Button(onClick = { count++ }) {
            Text("Increment")
        }
    }
}

3行目：

var count
- この変数は現在のカウント値を保持します。
mutableStateOf(0)
- ComposeでUIを更新するための「状態」を保持します。
- 初期値として0を設定しています。
remember
- Composeのコンポーネントが再コンポーズされても（再描画されても）値を保持するために使用します。
- これがないと、再描画時にcountがリセットされてしまいます。