Zenn
🔖

Jetpack Compose 主要ライブラリ・コンポーザブル解説集

に公開
Kotlin
compose
jetpckcompose
tech

Jetpack Compose でアプリを作る際に、よく使う基本的な部品（コンポーザブル）を紹介します。「これを使うと何ができるの？」がパッとわかるように、簡単な説明とコード例をまとめました。

1. Scaffold (スキャフォールド)

🌟 これができる！

アプリの基本的な骨組み（画面上部のバー、下部のメニュー、丸いボタンなど）をサクッと作れます！画面全体のレイアウトを整える土台となり、ごちゃごちゃしないキレイな画面構成の第一歩です。

💻 コード例

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.foundation.layout.padding

@OptIn(ExperimentalMaterial3Api::class) // TopAppBar などが Experimental のため
@Composable
fun MyScaffoldScreen() {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("アプリのタイトル") },
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary
                )
            )
        },
        floatingActionButton = {
            FloatingActionButton(onClick = { /* ボタンが押された時の処理 */ }) {
                Icon(Icons.Filled.Add, contentDescription = "追加ボタン")
            }
        },
        bottomBar = {
            BottomAppBar(
                containerColor = MaterialTheme.colorScheme.primaryContainer,
                contentColor = MaterialTheme.colorScheme.primary
            ) {
                Text("フッター情報など", modifier = Modifier.padding(start = 16.dp))
            }
        }
    ) { innerPadding ->
        // ここに画面のメインコンテンツを書きます
        // innerPadding は、Scaffold の部品 (TopAppBarなど) と重ならないようにするための余白情報です
        Text(
            text = "こんにちは、Scaffold の世界へ！",
            modifier = Modifier.padding(innerPadding).padding(16.dp) // innerPaddingを適用し、さらに内側に余白を追加
        )
    }
}

📝 もう少し詳しく

  • topBar: 画面上部に表示するバー（TopAppBar をよく使います）。
  • bottomBar: 画面下部に表示するバー（BottomAppBar や NavigationBar など）。
  • floatingActionButton: 画面上に浮いているように見える丸いボタン（FAB）。
  • content: 上記以外のメインコンテンツを表示する部分。引数として渡される innerPadding をコンテンツの一番外側の Modifier.padding() に適用することで、他のバーとコンテンツが重なるのを防ぎます。

2. Column (カラム) / Row (ロウ)

🌟 これができる！

複数の部品を「縦一列」(Column) または「横一列」(Row) にキレイに整列させられます！アプリの画面レイアウトを作る上での超基本となる部品です。

💻 コード例

import androidx.compose.foundation.layout.*
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun MyLayoutScreen() {
    Column( // 部品を縦に並べます
        modifier = Modifier.padding(16.dp).fillMaxWidth(),
        horizontalAlignment = Alignment.CenterHorizontally, // 水平方向（Column内では横方向）に中央揃え
        verticalArrangement = Arrangement.spacedBy(8.dp)    // 各部品の間に8dpの間隔を空ける
    ) {
        Text("縦に並ぶ要素１")
        Text("縦に並ぶ要素２")
        Row( // 部品を横に並べます
            verticalAlignment = Alignment.CenterVertically,   // 垂直方向（Row内では縦方向）に中央揃え
            horizontalArrangement = Arrangement.SpaceAround // 各部品の周囲に均等にスペースを配置
        ) {
            Text("横並びA")
            Text("横並びB")
            Text("横並びC")
        }
    }
}

📝 もう少し詳しく

  • Column: 中に入れた部品（子要素）を上から下に順番に配置します。
  • Row: 中に入れた部品（子要素）を左から右に順番に配置します。
  • modifier: サイズ、パディング（余白）、背景色などを指定できます。
  • horizontalAlignment (Columnの場合) / verticalAlignment (Rowの場合): 子要素の揃え位置を指定します（例: 中央揃え、端揃え）。
  • verticalArrangement (Columnの場合) / horizontalArrangement (Rowの場合): 子要素同士の間隔や配置方法を指定します（例: 等間隔に配置）。

3. Text (テキスト)

🌟 これができる！

画面に文字を表示できます！アプリでユーザーに情報を見せるための最も基本的な部品です。

💻 コード例

import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.sp // sp は文字サイズ用の単位

@Composable
fun MyTextExamples() {
    Column {
        Text("こんにちは、Jetpack Compose!")
        Text(
            text = "これは赤い太字の大きな文字です。",
            color = Color.Red,
            fontSize = 24.sp,
            fontWeight = FontWeight.Bold
        )
        Text(
            text = "複数行のテキストも\n改行コードで\n表示できます。"
        )
    }
}

📝 もう少し詳しく

  • text: 表示したい文字列を指定します。
  • color: 文字の色を指定します。
  • fontSize: 文字の大きさを sp という単位で指定します。
  • fontWeight: 文字の太さ（例: FontWeight.Bold で太字）を指定できます。
  • その他、フォントファミリー、文字間隔、行の高さなど、様々なスタイルを指定可能です。

4. Button (ボタン)

🌟 これができる！

ユーザーがタップ（クリック）できるボタンを作成できます！「これを実行して！」というユーザーのアクションを促すための重要な部品です。

💻 コード例

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.height
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Send
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun MyButtonExamples() {
    var count by remember { mutableStateOf(0) } // ボタンで変化させるための状態

    Column {
        Button(onClick = {
            count++ // ボタンが押されたらカウントを増やす
            println("通常ボタンが押されました！カウント: $count")
        }) {
            Text("押してね！ ($count)")
        }

        Spacer(Modifier.height(8.dp)) // 少し間隔を空ける

        OutlinedButton(onClick = { /* 枠線ボタンの処理 */ }) {
            Text("枠線だけのボタン")
        }

        Spacer(Modifier.height(8.dp))

        TextButton(onClick = { /* テキストボタンの処理 */ }) {
            Text("文字だけのボタン")
        }

        Spacer(Modifier.height(8.dp))

        ExtendedFloatingActionButton( // アイコン付きの少し大きめなボタン
            text = { Text("送信") },
            icon = { Icon(Icons.Filled.Send, contentDescription = "送信アイコン") },
            onClick = { /* 送信処理 */ }
        )
    }
}

📝 もう少し詳しく

  • onClick: ボタンがタップされたときに実行したい処理を { } の中に書きます。
  • Button: 標準的な塗りつぶしボタン。
  • OutlinedButton: 枠線のみのボタン。
  • TextButton: 文字のみのボタン。背景や枠線がありません。
  • ExtendedFloatingActionButton: アイコンとテキストを表示できる、少し大きめの目立つボタン。
  • ボタンの中に Text や Icon を入れて、ボタンの見た目をカスタマイズできます。

5. Image (イメージ)

🌟 これができる！

アプリ内に画像を表示できます！アイコンや写真などを表示して、アプリをより魅力的で分かりやすくします。

💻 コード例

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
// R.drawable.my_icon のようなリソースIDを使うために、実際のプロジェクトでは
// res/drawable フォルダに画像ファイル (例: my_icon.png) を配置する必要があります。
// このサンプルコードを試すには、適当な画像をプロジェクトに追加してください。
// import com.your.package.R // あなたのプロジェクトのRクラスをインポート

@Composable
fun MyImageExamples() {
    Column {
        // drawableリソースから画像を表示
        // Image(
        //     painter = painterResource(id = R.drawable.my_icon), // 例: my_icon.png
        //     contentDescription = "アプリのアイコン", // 画像の説明（アクセシビリティ用）
        //     modifier = Modifier.size(100.dp)
        // )

        Text("↑上のコメントアウトを解除して、自分のプロジェクトの画像を表示してみてください。")
        Text("ネットワーク上の画像を表示するには、Coil や Glide といった外部ライブラリを使うのが一般的です。")
    }
}

📝 もう少し詳しく

  • painterResource(id = ...): アプリの drawable フォルダに入っている画像リソースを指定します。
  • contentDescription: 画像の内容を説明するテキスト。視覚障碍のあるユーザーのためのアクセシビリティ機能で使われます。省略せずに設定しましょう。
  • Modifier を使って、画像のサイズ、形（円形クリップなど）、配置を調整できます。
  • インターネット上の画像を表示する場合は、Coil や Glide、Picasso といった画像読み込みライブラリを使うのが一般的で便利です。

6. LazyColumn (レイジーカラム) / LazyRow (レイジーロウ)

🌟 これができる！

たくさんの項目からなるリストやグリッドを、アプリが重くならずにスムーズに表示できます！SNSのタイムラインや商品一覧画面のように、スクロールして多くの情報を見せるのに最適です。

💻 コード例

import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items // items(List) を使うために必要
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun MyLazyListScreen() {
    val itemList = (1..100).map { "アイテム $it" } // 100個のアイテムリストを作成

    LazyColumn(
        modifier = Modifier.padding(8.dp)
    ) {
        item { // リストの先頭に単一のアイテムを追加
            Text("これはリストのヘッダーです", style = MaterialTheme.typography.headlineSmall)
        }

        items(itemList) { anItem -> // itemList の各要素に対して処理
            Text(
                text = anItem,
                modifier = Modifier.fillMaxWidth().padding(vertical = 12.dp)
            )
        }

        item { // リストの末尾に単一のアイテムを追加
            Text("これがリストのフッターです", style = MaterialTheme.typography.labelSmall)
        }
    }
}

📝 もう少し詳しく

  • LazyColumn: 縦方向にスクロールするリスト。
  • LazyRow: 横方向にスクロールするリスト。
  • Column や Row と違い、画面に表示されている部分のアイテムだけを描画・保持するため、非常に多くのアイテムがあってもパフォーマンスが良いです（だから "Lazy" = 遅延読み込み）。
  • items(list) { ... }: リストデータを受け取り、各アイテムに対応するコンポーザブルを生成します。
  • item { ... }: 単一のアイテム（ヘッダーやフッターなど）を追加できます。

7. Card (カード)

🌟 これができる！

関連する情報をひとまとめにして、影が付いたカードのような見た目でオシャレに表示できます！情報を区切ってスッキリと見せたいときに便利です。

💻 コード例

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun MyCardExample() {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp),
        elevation = CardDefaults.cardElevation(defaultElevation = 4.dp), // カードの影の深さ
        colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surfaceVariant) // カードの背景色
    ) {
        Column(
            modifier = Modifier.padding(16.dp) // カード内部の余白
        ) {
            Text(
                text = "カードのタイトル",
                style = MaterialTheme.typography.titleLarge,
                color = MaterialTheme.colorScheme.onSurfaceVariant
            )
            Text(
                text = "ここにカードの詳しい内容を書きます。いくつかの情報がまとまっていると見やすいですね。",
                style = MaterialTheme.typography.bodyMedium,
                color = MaterialTheme.colorScheme.onSurfaceVariant
            )
        }
    }
}

📝 もう少し詳しく

  • elevation: カードに影を付けて立体的に見せる効果。CardDefaults.cardElevation() で指定します。
  • colors: カードの背景色や文字色を指定できます。CardDefaults.cardColors() を使います。
  • Card の中に Column や Row を使って、さらに情報を整理して配置することが多いです。

8. Modifier (モディファイア)

🌟 これができる！

部品（コンポーザブル）の見た目や振る舞いを細かくカスタマイズできる魔法の道具です！サイズ、余白、背景色、枠線、クリックイベントの処理など、本当に色々なことができます。Compose を使いこなす上で欠かせない超重要アイテム！

💻 コード例

import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

@Composable
fun MyModifierExample() {
    Box( // Boxは子要素を重ねて配置したり、Alignmentで位置を指定したりするのに便利
        modifier = Modifier
            .size(200.dp, 100.dp) // 幅200dp, 高さ100dpに設定
            .background(Color.LightGray) // 背景を薄い灰色に
            .padding(16.dp) // 内側に16dpの余白
    ) {
        Text(
            text = "Modifierすごい！",
            modifier = Modifier
                .fillMaxWidth() // 親要素の幅いっぱいに広がる
                .background(Color.Yellow) // このTextの背景は黄色
                .border(2.dp, Color.Blue) // 青い枠線（2dpの太さ）
                .padding(8.dp) // テキストの周りにさらに余白
                .align(Alignment.Center) // Boxの中で中央に配置
                .clickable {
                    println("テキストがクリックされました！")
                }
        )
    }
}

📝 もう少し詳しく

  • Modifier は、ほとんど全てのコンポーザブルの引数として渡すことができます。
  • .padding(): 内側の余白。
  • .size(): 幅や高さを指定。
  • .fillMaxWidth(), .fillMaxHeight(), .fillMaxSize(): 親要素に対して可能な限り広がる。
  • .background(): 背景色。
  • .border(): 枠線。
  • .clickable {}: タップされたときの処理。
  • このように、. (ドット) で繋げて複数の効果を連続して指定していくのが一般的です（チェーン呼び出し）。指定する順番が重要になることもあります。

Discussion