[移动开发]Android~Compose系列（一）

目标

• 认识 Compose
• 学习 Compose 的基本布局
• Compose 的状态管理

Compose 的 Column、Row、Box 基本布局

这个三种基本布局的示意如图

代码示范

Column

@Preview("column")
@Composable
fun ColumnLayout() {
   Column(
       modifier = Modifier
           .background(Color(0xFF063142))
           .padding(16.dp)
           .size(150.dp)
   ) {
       Text(
           text = "", modifier = Modifier
               .fillMaxWidth()
               .height(50.dp)
               .background(Color(0xFFFFFF00))
       )
       Text(
           text = "", modifier = Modifier
               .fillMaxWidth()
               .weight(1f, true)
               .background(Color(0xFF4385F4))
       )
       Text(
           text = "", modifier = Modifier
               .fillMaxWidth()
               .weight(1f, true)
               .background(Color(0xFF3CDB85))
       )
   }
}

注：16.dp是之前布局中的dp，这个的转换必须在有context的内容下才能进行转换为px等

Row

@Preview("row")
@Composable
fun RowLayout() {
    Row(
        modifier = Modifier
            .size(200.dp)
            .background(Color(0xFF063142))
    ) {
        Text(
            text = "", modifier = Modifier
                .fillMaxHeight()
                .width(50.dp)
                .background(Color(0xFFFFFF00))
        )
        Text(
            text = "", modifier = Modifier
                .fillMaxHeight()
                .weight(1f, true)
                .background(Color(0xFF4385F4))
        )
        Text(
            text = "", modifier = Modifier
                .fillMaxHeight()
                .width(50.dp)
                .background(Color(0xFF3CDB85))
        )
    }
}

Box

@Preview("box")
@Composable
fun BoxLayout() {
    Box(modifier = Modifier.size(200.dp)) {
        Text(
            text = "", modifier = Modifier
                .background(Color(0xFF063142))
                .fillMaxSize()
        )
        Column(
            modifier = Modifier.fillMaxSize(),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(
                text = "",
                modifier = Modifier
                    .size(
                        100.dp, 100.dp
                    )
                    .background(Color.Yellow)
            )
        }

    }
}

Modifier 的使用

Compose的一个重要的样式属性：修饰符。类似于Style，常用的属性大小，布局，行为和外观。因为Compose是函数式的编程语言，所以这个属性非常灵活。需要注意的

• 有序
• 手势（点击、滚动、拖动，滑动，多点触控，旋转、缩放）

列表

列表我们这边来实现一个简易的需求，一个通讯录的个人信息展示。

先实现 Item 布局

@Preview
@Composable
fun ContactListItem(
    @PreviewParameter(ContactDefault::class) contact: Contact
) {
    val context = LocalContext.current

    Row(
        modifier = Modifier
            .background(Color(0xFFF6F6F6))
            .padding(10.dp)
            .height(60.dp)
            .fillMaxWidth()
            .background(Color.White, RoundedCornerShape(10.dp))
            .clickable {
                Toast
                    .makeText(context, "contact:${contact.toString()}", Toast.LENGTH_SHORT)
                    .show()
            }
            .padding(6.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {

        Text(
            text = "",
            modifier = Modifier
                .size(40.dp, 40.dp)
                .background(color = contact.userIcon, shape = CircleShape),
        )

        Column(Modifier.padding(10.dp, 0.dp, 0.dp, 0.dp)) {
            Text(text = contact.userName, fontSize = 16.sp)
            Text(text = contact.email, fontSize = 10.sp, color = Color(0x52030303))
        }
    }
}

拼接 Item 成为 List

@Preview
@Composable
fun ContactList() {
    val dataSource = mockData()
    MyComposeTheme() {
        LazyColumn() {
            dataSource.forEach { contact ->
                item {
                    ContactListItem(contact)
                }
            }
        }
    }
}

总结 List 的实现
通过上面两步发现整体的编码过程只考虑了 Item 和 DataSource 进行遍历即可。LazyColumn进行懒加载和复用，很明显比 RecycleView 和 ListView 高效明了，如果需要加载不同的 Item 只需要在遍历进行判断，加载不一样的 Item 即可。需要注意的是@PreviewParameter(ContactDefault::class)对于预览函数的使用，这个主要是结合 AndroidStudio 进行预览的方法，这个方法的接口为PreviewParameterProvider，重写values方法，返回mock的数据。

Compose 的状态管理

在 Android 的以往的 xml 的布局中，ViewModel 是使用 Observable 对数据进行封装，根据 xml 生产监听的代码。在 Compose 中使用 remember {mutableStateOf()}的值，当值变化后，就会执行触发改变。

例子

@Preview("state_manager")
@Composable
fun StateManagerView() {

    var name by rememberSaveable { mutableStateOf("") }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp)
    ) {
        Text(text = "Hello")
        OutlinedTextField(value = name,
            onValueChange = { name = it },
            label = { Text(text = "name") }
        )
    }
}

Compose 是什么

进过以上的实操和体验后，我们来看看Android Compose的定义和说明：
用于构建原生界面的新款 Android 工具包。它可简化并加快 Android 上的界面开发。使用更少的代码、强大的工具和直观的 Kotlin API，快速让应用生动而精彩。有以下的特点

• 声明性编程，减少了遍历树，内部管理状态
• 简单的组合函数
• 动态内容

上手体验，先跟随文档进行简易的编码，有了整体的认知后，进行小需求去实现，看看自己理解的盲区在哪里，之后去修复。本篇文章转自同事未完成的技术分享。

总结

Compose 和之前的 View 比较

学习资料

1. Jetpack Compose 官方出品，全面详尽
2. compose-samples 有详尽的代码，方便手动编译和改动
3. 本文Git源码：https://github.com/Hynsn/SimpleGallery/tree/master/app_kt