Jetpack Compose 是用于構(gòu)建原生 Android 界面的新工具包。它使用更少的代碼、強大的工具和直觀的 Kotlin API，可以幫助您簡化并加快 Android 界面開發(fā)。

由于 Compose 基于 Kotlin 構(gòu)建，因此可以與 Java 編程語言完全互操作，并且可以直接訪問所有 Android 和 Jetpack API。它與現(xiàn)有的 UI 工具包也是完全兼容的，因此你可以混合原來的 View 和現(xiàn)在新的View。學(xué)過Flutter的就會發(fā)現(xiàn)，Compose的寫法跟Flutter的寫法如出一轍。

引入Compose功能

1.創(chuàng)建Compse項目

2.gradle配置

在app下的build.gradle的Android塊中添加，

    buildFeatures {
        compose true
    }

并引入Compose的相關(guān)引用，compose_version為1.0.0

    androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_version"
    debugImplementation "androidx.compose.ui:ui-tooling:$compose_version"
    implementation "androidx.compose.ui:ui:$compose_version"
    implementation "androidx.compose.material:material:$compose_version"
    implementation "androidx.compose.ui:ui-tooling-preview:$compose_version"

Composable 組合函數(shù)

1.Compose函數(shù)不同于普通的函數(shù)，它需要使用大寫字母開頭，和普通函數(shù)做區(qū)分。
2.Compose函數(shù)需要使用@Composable注解修飾，表示這是一個可組合函數(shù)。

@Composable
fun UIUse() {

}

Preview函數(shù)

@Preview表示該函數(shù)可以在Android Studio中預(yù)覽。

@Preview
@Composable
fun UIUse() {

}

基礎(chǔ)控件的使用

• 在setContent中添加當(dāng)前頁面的根布局

setContent { }

• 添加Text文本組件

Text("XML Layout")
        Text("Android Devs")
        Text("Jetpack Compose")

• Box類似于Android中的ViewGroup，它是一個視圖容器，可以在其中裝載其他的組件

Box(
                modifier = Modifier
                    .background(Color.Yellow)
                    .size(200.dp)
            ) {
                Text("XML Layout")
            }

• 添加圖片使用Image

Image(
            painter = painterResource(id = R.mipmap.test),
            contentDescription = "這是內(nèi)容",
            modifier = Modifier
                .size(150.dp, 110.dp)
                .clip(RectangleShape),
            contentScale = ContentScale.Crop
        )

• Column、Row
  Column可以創(chuàng)建一個垂直布局，Row可以創(chuàng)建一個水平布局。
  同樣有Modifier.padding().width().border().background()等屬性。
  horizontalAlignment = Alignment.CenterHorizontally表示水平居中對齊；
  verticalAlignment = Alignment.CenterVertically表示垂直居中對齊。

Column(Modifier.padding(10.dp, 50.dp)
        , horizontalAlignment = Alignment.CenterHorizontally) {

}

結(jié)合起來后：

@Preview
@Composable
fun UIUse() {

    Column(Modifier.padding(10.dp, 50.dp)
        , horizontalAlignment = Alignment.CenterHorizontally) {
        Image(
            painter = painterResource(id = R.mipmap.test),
            contentDescription = "這是內(nèi)容",
            modifier = Modifier
                .size(150.dp, 110.dp)
                .clip(RectangleShape),
            contentScale = ContentScale.Crop
        )

        Text("XML Layout")
        Text("Android Devs")
        Text("Jetpack Compose")

        Row(verticalAlignment = Alignment.CenterVertically) {
            Box(
                modifier = Modifier
                    .background(Color.Yellow)
                    .size(200.dp)
            ) {
                Text("XML Layout")
            }
        }
    }
}

樣式為：

• 創(chuàng)建列表：
  可使用LazyColumn或者LazyRow來實現(xiàn)垂直、水平列表

@Composable
fun listViewUse() {
    var list = ArrayList<String>()
    list.add("Android")
    list.add("Compose")
    list.add("XMLLayout")

    LazyColumn {
        items(list) { name->
            messageCard(name)
        }
    }
}

@Composable
fun messageCard(name: String) {
    Row(modifier = Modifier.padding(all = 12.dp)) {
        Image(
            painter = painterResource(id = R.mipmap.test_head),
            contentDescription = name,
            modifier = Modifier
                .size(42.dp)
                .clip(CircleShape)
                .border(1.5.dp, MaterialTheme.colors.secondary, CircleShape),
            contentScale = ContentScale.Crop
        )

        Spacer(modifier = Modifier.width(10.dp))
        
        Column {
            Text(text = name,
                color = MaterialTheme.colors.secondaryVariant,
                style = MaterialTheme.typography.subtitle2,
                fontSize = 16.sp)

            Spacer(modifier = Modifier.width(12.dp))

            Text(text = "這里是文本內(nèi)容",
                fontSize = 11.sp)
        }
    }
}

樣式為：