基本構造とUIの構築ガイド【Jetpack Compose入門②】

Jetpack Composeとは？
1. Jetpack Composeの概要
2. Jetpack Composeのメリット
Jetpack Composeの基本構造
1. Composable関数とは
2. Composable関数の組み合わせ
UIの基本コンポーネント
Jetpack Composeの状態管理
1. rememberとmutableStateOf
2. ViewModelとの連携
Jetpack Composeのテーマ設定
1. MaterialThemeの利用
2. カスタムテーマの適用
まとめ

Jetpack Composeとは？

Jetpack Composeの概要

Jetpack Composeは、Googleが提供する最新のAndroid UIツールキットです。これまでのXMLを使ったUI構築ではなく、KotlinのコードのみでUIを作成できるのが特徴です。宣言型UIフレームワークであり、ReactやFlutterと似たプログラミングスタイルを持っています。

Jetpack Composeのメリット

シンプルなコード: XMLを使わず、KotlinコードのみでUIを記述できるため、コードの可読性が向上します。
リアクティブなUI: 状態の変更に応じてUIが自動的に更新されるため、手動で更新する必要がありません。
拡張性が高い: カスタムコンポーネントの作成が容易で、アニメーションやテーマの設定も直感的に行えます。
統合が簡単: 既存のAndroid Viewと共存できるため、徐々に導入することが可能です。

Jetpack Composeの基本構造

Composable関数とは

Jetpack Composeでは、UIを構築するために@Composableアノテーションを使用します。このアノテーションが付いた関数を「Composable関数」と呼び、これがUIコンポーネントの基本単位になります。

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

このGreeting関数は、テキストを表示するシンプルなComposable関数です。

Composable関数の組み合わせ

Composable関数は、他のComposable関数を組み合わせてより複雑なUIを構築できます。

@Composable
fun MyScreen() {
    Column {
        Greeting(name = "World")
        Greeting(name = "Jetpack Compose")
    }
}

このように、Columnを使って複数のGreeting関数を垂直方向に配置できます。

UIの基本コンポーネント

テキスト表示（Text）

テキストを表示するにはTextコンポーネントを使用します。

Text(text = "こんにちは、Jetpack Compose！")

スタイルを追加することも可能です。

Text(
    text = "Styled Text",
    fontSize = 24.sp,
    fontWeight = FontWeight.Bold,
    color = Color.Blue
)

ボタン（Button）

ボタンを作成するにはButtonコンポーネントを使用します。

Button(onClick = { /* ボタンがクリックされたときの処理 */ }) {
    Text(text = "Click me")
}

画像（Image）

画像を表示するにはImageコンポーネントを使用します。

Image(
    painter = painterResource(id = R.drawable.sample_image),
    contentDescription = "Sample Image"
)

レイアウトコンポーネント

Column（縦方向レイアウト）

Column {
    Text(text = "Item 1")
    Text(text = "Item 2")
    Text(text = "Item 3")
}

Row（横方向レイアウト）

Row {
    Text(text = "Item A")
    Text(text = "Item B")
    Text(text = "Item C")
}

Box（重ね合わせ）

Box {
    Text(text = "Foreground Text")
    Image(painter = painterResource(id = R.drawable.background), contentDescription = "")
}

Jetpack Composeの状態管理

rememberとmutableStateOf

Jetpack Composeでは、状態を管理するためにrememberとmutableStateOfを使用します。

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

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

rememberを使うことで、画面が再描画されても状態が保持されます。

ViewModelとの連携

Jetpack ComposeはAndroidのViewModelと連携して状態を管理することも可能です。

class MyViewModel : ViewModel() {
    var count by mutableStateOf(0)
        private set

    fun increment() {
        count++
    }
}

@Composable
fun Counter(viewModel: MyViewModel = viewModel()) {
    Column {
        Text(text = "Count: ${viewModel.count}")
        Button(onClick = { viewModel.increment() }) {
            Text(text = "Increment")
        }
    }
}

Jetpack Composeのテーマ設定

MaterialThemeの利用

Jetpack Composeでは、MaterialThemeを利用してデザインを統一できます。

MaterialTheme(
    colors = lightColors(
        primary = Color.Blue,
        secondary = Color.Green
    )
) {
    MyScreen()
}

カスタムテーマの適用

独自のカスタムテーマを作成することも可能です。

@Composable
fun MyCustomTheme(content: @Composable () -> Unit) {
    MaterialTheme(
        colors = lightColors(
            primary = Color.Magenta,
            secondary = Color.Yellow
        ),
        typography = Typography(),
        shapes = Shapes(),
        content = content
    )
}

まとめ

Jetpack Composeは、Kotlinを用いたシンプルかつ強力なUIフレームワークで、従来のXMLベースの開発よりも直感的にUIを構築できます。本記事では、基本構造、コンポーネント、状態管理、テーマの適用方法を紹介しました。今後、さらに高度なアニメーションや複雑なUIデザインにも対応できるよう、習熟を深めていくことが重要です。