Android compose入门学习

Jetpack Compose 是用于构建原生 Android 界面的新工具包。它使用更少的代码、强大的工具和直观的 Kotlin API，可以帮助您简化并加快 Android 界面开发。

由于 Compose 基于 Kotlin 构建，因此可以与 Java 编程语言完全互操作，并且可以直接访问所有 Android 和 Jetpack API。它与现有的 UI 工具包也是完全兼容的，因此你可以混合原来的 View 和现在新的View。学过Flutter的就会发现，Compose的写法跟Flutter的写法如出一辙。

引入Compose功能

1.创建Compse项目

2.gradle配置

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

    buildFeatures {
        compose true
    }

并引入Compose的相关引用，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 组合函数

1.Compose函数不同于普通的函数，它需要使用大写字母开头，和普通函数做区分。
2.Compose函数需要使用@Composable注解修饰，表示这是一个可组合函数。

@Composable
fun UIUse() {

}

Preview函数

@Preview表示该函数可以在Android Studio中预览。

@Preview
@Composable
fun UIUse() {

}

基础控件的使用

在setContent中添加当前页面的根布局

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 = "这是内容",
            modifier = Modifier
                .size(150.dp, 110.dp)
                .clip(RectangleShape),
            contentScale = ContentScale.Crop
        )

Column、Row
Column可以创建一个垂直布局，Row可以创建一个水平布局。
同样有Modifier.padding().width().border().background()等属性。
horizontalAlignment = Alignment.CenterHorizontally表示水平居中对齐；
verticalAlignment = Alignment.CenterVertically表示垂直居中对齐。

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

}

结合起来后：

@Preview
@Composable
fun UIUse() {

    Column(Modifier.padding(10.dp, 50.dp)
        , horizontalAlignment = Alignment.CenterHorizontally) {
        Image(
            painter = painterResource(id = R.mipmap.test),
            contentDescription = "这是内容",
            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")
            }
        }
    }
}

样式为：

创建列表：
可使用LazyColumn或者LazyRow来实现垂直、水平列表

@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 = "这里是文本内容",
                fontSize = 11.sp)
        }
    }
}