【Kotlin/Android】Jetpack Composeの使い方！UI実装方法

build.gradle.kts(Module: app)
dependencies {

    implementation(libs.androidx.core.ktx)
    implementation(libs.androidx.lifecycle.runtime.ktx)
    implementation(libs.androidx.activity.compose)
    implementation(platform(libs.androidx.compose.bom))
    implementation(libs.androidx.ui)
    implementation(libs.androidx.ui.graphics)
    implementation(libs.androidx.ui.tooling.preview)
    implementation(libs.androidx.material3)
    testImplementation(libs.junit)
    androidTestImplementation(libs.androidx.junit)
    androidTestImplementation(libs.androidx.espresso.core)
    androidTestImplementation(platform(libs.androidx.compose.bom))
    androidTestImplementation(libs.androidx.ui.test.junit4)
    debugImplementation(libs.androidx.ui.tooling)
    debugImplementation(libs.androidx.ui.test.manifest)
}

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.amefure.testcomposeapp.ui.theme.TestComposeAppTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // Android 10以降でエッジ部分までコンテンツを描画する設定を有効化
        enableEdgeToEdge()
        // setContentでActivityとCompose UIを紐づけ
        setContent {
            // アプリ全体のテーマを適用(名称はアプリ名に依存)
            // ui/Theme.kt に定義されている
            TestComposeAppTheme {
                // 基本レイアウトの枠組みを提供
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    // UI要素
                    Greeting(
                        name = "Android",
                        modifier = Modifier.padding(innerPadding)
                    )
                }
            }
        }
    }
}

// Composable関数であることを定義
@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    // 文字列を画面に表示するためのComposeのコンポーネント
    Text(
        text = "Hello $name!",
        modifier = modifier
    )
}

// プレビュー
@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    TestComposeAppTheme {
        Greeting("Android")
    }
}

setContent { }

// Composable関数であることを定義
@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    // 文字列を画面に表示するためのComposeのコンポーネント
    Text(
        text = "Hello $name!",
        modifier = modifier
    )
}

@Composable
fun Text(
    text: String,
    modifier: Modifier = Modifier,
    color: Color = Color.Unspecified,
    fontSize: TextUnit = TextUnit.Unspecified,
    fontStyle: FontStyle? = null,
    fontWeight: FontWeight? = null,
    fontFamily: FontFamily? = null,
    letterSpacing: TextUnit = TextUnit.Unspecified,
    textDecoration: TextDecoration? = null,
    textAlign: TextAlign? = null,
    lineHeight: TextUnit = TextUnit.Unspecified,
    overflow: TextOverflow = TextOverflow.Clip,
    softWrap: Boolean = true,
    maxLines: Int = Int.MAX_VALUE,
    minLines: Int = 1,
    onTextLayout: ((TextLayoutResult) -> Unit)? = null,
    style: TextStyle = LocalTextStyle.current
)

Button(
    onClick = {
        Log.d("Button", "Button Taped")
    }
) {
    Text("Button")
}

@Composable
fun Greeting(name: String) {
    val expanded = remember { mutableStateOf(false) }

    Surface(
        color = MaterialTheme.colorScheme.primary,
        modifier = Modifier.padding(vertical = 4.dp, horizontal = 8.dp)
    ) {
        Row(modifier = Modifier.padding(24.dp)) {
            Column(modifier = Modifier.weight(1f)) {
                Text(text = "Hello, ")
                Text(text = name)
            }
            ElevatedButton(
                onClick = { expanded.value = !expanded.value }
            ) {
                Text(if (expanded.value) "Show less" else "Show more")
            }
        }
    }
}

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    TestComposeAppTheme {
        Greeting("Android")
    }
}

@Preview(
    showBackground = true,
    widthDp = 150,
    heightDp = 150,
    name = "Greeting Preview",
    uiMode = Configuration.UI_MODE_NIGHT_MASK
)
@Composable
fun DarkThemePreview() {
    TestComposeAppTheme {
        Greeting("Android")
    }
}