🏌️

Jetpack Composeに入門してみる

JboyHashimoto

2023/08/17に公開

Overview

公式によると
Jetpack Compose は、ネイティブ UI をビルドする際に推奨される Android の最新ツールキットです。Android での UI 開発を簡素化し、加速します。少ないコード、パワフルなツール、直感的な Kotlin API を使用してアプリをすぐに動かすことができます。

summary

使い方を簡単に解説
昔からある方法だと、xmlを使ってUIを作りますが、新しい方法だとKotlinのコードを書いて直感的に作ることができます。
魅力的なUIフレームワークですが、ネイティブならではのルールがあって結構ハマりました!
下の方にUIを作る関数を定義して、MainActivityクラスの中で、呼び出すと、テキストを表示することができます。

package com.example.mycompose

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.example.mycompose.ui.theme.MyComposeTheme

class MainActivity : ComponentActivity() {
    // onCreateとは、Activityが作成された時に呼ばれる
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // setContentは、ComposeのUIを表示するための関数
        setContent {
            // MyComposeThemeは、テーマを設定するための関数
            MyComposeTheme {
                // Surfaceは、Material Designのコンポーネントの一つ
                Surface(
                    modifier = Modifier.fillMaxSize(),// fillMaxSizeは、画面いっぱいに表示するための関数
                    color = MaterialTheme.colorScheme.background// colorSchemeは、Material Designの色を設定するための関数
                ) {
                    // ここで、Textを表示する関数を呼び出す
                    GreetingText(message = "Happy Birthday Sam!")
                }
            }
        }
    }
}

// 新しく作る関数には、@Composableアノテーションをつける
@Composable
// 新しい関数を定義する
fun GreetingText(message: String, modifier: Modifier = Modifier) {
    Row {
        Text(
            text = message
        )
        Text(
            text = message
        )
    }
    Column {
        Text(
            text = message
        )
        Text(
            text = message
        )
    }
}

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    MyComposeTheme {
//        Greeting("Android")
        GreetingText(message = "Happy Birthday Sam!")
    }
}

この書き方でもUIは作ることはできる
Columnで囲まないと、Textが重なって表示されるので、Columnでラップして使います。

Cloumn
縦向きの場合

package com.example.mycompose

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.example.mycompose.ui.theme.MyComposeTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // setContentは、ComposeのUIを表示するための関数
        setContent {
            Column {
                Text(text = "Hello")
                Text(text = "World")
            }

        }
    }
}

Row
横向きの場合

package com.example.mycompose

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.example.mycompose.ui.theme.MyComposeTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // setContentは、ComposeのUIを表示するための関数
        setContent {
            Row {
                Text(text = "Hello")
                Text(text = "World")
            }

        }
    }
}