Compose入门

​ 本篇文章主要是为了对Compose有一个初步了解。知道Compose是做什么的，用Compose能干什么，在目前的各种UI框架下面有些优势，参考Google官网的解释加上一些自己的理解生成的一篇文章。本人也是Compose初学者，通过每一步学习遇到哪些坑，来一起探讨Compose的学习使用。 后续会根据Compose学习，从简单布局、控件使用到各种高级动画的渲染，再到实现原理，不断输出Compose相关的系列文章。带你一起从初步认知Compose到撸出一个使用Compose完成的安卓APP。

目前google已经把compose作为默认的UI开发框架，无论是多年开发经验的安卓老司机，还是刚入门的安卓开发人员，学习使用compose已经是大势所趋。多学习一项技能对自己没什么坏处。自从2017年Compose被提出到2021年7月 Jetpack Compose 1.0 正式版发布，已经有很长时间，已经满足我们的基本开发需求，而且还在继续完善中。

一、什么是Compose

**官方解释：**Jetpack Compose是用于构建原生Android界面的新款工具包。它可简化并加快Android上的界面开发，使用更少的代码、强大的工具和直观的Kotlin API，快速打造生动而精彩的应用。

**个人理解：**为了解决安卓原始xml构建UI的弊端，对照IOS的swift、Web的Vue等声明式编程的产物。

二、为什么使用Compose

1、更少的代码：实现相同的功能，使用compose代码量更少

使用更少的代码实现更多的功能，并且可以避免各种Bug，从而使代码简洁且易维护。

2、直观

您只需要描述界面，Compose会负责处理剩余的工作。应用状态变化时，界面会自动更新。

3、加速开发

兼容现有的所有代码，方便您随时随地采用。借助实时预览和全面的Android Studio支持，实现快速迭代。

4、功能强大

直接访问Android平台API，内置对Material Design，深色主题、动画等支持，帮助您创建精美的应用。

三、Compose入门

这里将通过一个简单的登录页面，展示Compose的使用。首先看一下下图。一个登录界面，包括标题，输入账号、输入密码、登录按钮，点击登录即可拿到输入的账号密码，然后进行调取接口登录。这里使用toast展示用户输入的内容，真是项目可以直接去调用服务器接口了。

​

下面分析一下登录界面的代码，展示Compose的基本使用。

class LoginComposeUI : ComponentActivity() {

    companion object {
        fun startActivity(context: Context) {
            val intent = Intent(context, LoginComposeUI::class.java)
            context.startActivity(intent)
        }
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            LoginLayoutCompose()
        }

    }

    @OptIn(ExperimentalMaterial3Api::class)
    @Composable
    fun LoginLayoutCompose() {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .fillMaxHeight()
        ) {
            Text(
                text = "Login",
                modifier = Modifier
                    .height(44.dp)
                    .background(Color(0xFFef5a54))
                    .fillMaxWidth()
                    .wrapContentSize(Alignment.Center)
                    .align(Alignment.TopCenter),
                color = Color(0xffffffff)
            )
            var userNameText by remember {
                mutableStateOf("")
            }
            var passwordText by remember {
                mutableStateOf("")
            }
            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(0.dp, 100.dp, 0.dp, 0.dp)
            ) {
                OutlinedTextField(
                    value = userNameText,
                    onValueChange = {
                        userNameText = it
                    },
                    modifier = Modifier
                        .padding(20.dp, 20.dp, 20.dp, 0.dp)
                        .fillMaxWidth(),
                    placeholder = { Text(text = "请输入账号") })

                OutlinedTextField(
                    value = passwordText,
                    onValueChange = {
                        passwordText = it
                    },
                    modifier = Modifier
                        .padding(20.dp, 20.dp, 20.dp, 0.dp)
                        .fillMaxWidth(),
                    placeholder = { Text(text = "请输入密码") })
                Divider(modifier = Modifier.height(30.dp), color = Color(0xffffffff))
                Button(
                    onClick = {
                        val tips = "账号：$userNameText  密码：$passwordText 登录了"
                        ToastUtil.toastShort(AppUtils.getContext(), tips)
                    },
                    modifier = Modifier
                        .height(80.dp)
                        .fillMaxWidth()
                        .wrapContentSize(Alignment.TopCenter)

                ) {
                    Text(text = "Login", modifier = Modifier.wrapContentSize(Alignment.Center))
                }
            }


        }
    }


}

首先这里没有原来安卓的xml文件，直接写的Compose布局来定义UI界面

1、设置Activity的Content

原来的setContent一般是通过设置view或者设置View的xml布局来实现，然后通过FindviewById方式拿到View实例

setContentView(view)

看上面的代码，Compse实现的UI直接设置给setContent即可，无需在使用Xml定义布局

 setContent {
            LoginLayoutCompose()
        }

2、可组合函数

给LoginLayoutCompose设置@Composable注解，代表此方法是可组合函数，可以被其他可以组合函数调用。

3、熟悉Compose中简单的布局

​ LoginLayoutCompose函数中第一个就box函数布局，设置 modifier中fillMaxWidth和fillMaxHeight表示匹配父窗体，撑满整个屏幕。

modifier = Modifier
    .fillMaxWidth()
    .fillMaxHeight()

里面首先是顶部的Login标题部分Text函数，可以设置标题内容，字体颜色、字体大小、背景颜色。

Text(
    text = "Login",
    modifier = Modifier
        .height(44.dp)
        .background(Color(0xFFef5a54))
        .fillMaxWidth()
        .wrapContentSize(Alignment.Center)
        .align(Alignment.TopCenter),
    color = Color(0xffffffff)
)

接下来是Column布局函数，设置padding表示距离顶部100dp。宽度匹配父窗体。该布局户主要是竖向一个一个排列布局中的组合函数。类似LinearLayout设置成 android:orientation=“vertical” 的效果。

Column(
    modifier = Modifier
        .fillMaxWidth()
        .padding(0.dp, 100.dp, 0.dp, 0.dp)
)

Column布局中，通过OutlinedTextField函数添加二个输入框，输入账号和密码，其中value设置初始值，onValueChange在输入框变化时候回调赋值给userNameText，modifier可以设置输入框一些属性；placeholder设置没有输入时候占位置展示内容。这几个属性是OutlinedTextField函数的基本使用。

OutlinedTextField(
    value = userNameText,
    onValueChange = {
        userNameText = it
    },
    modifier = Modifier
        .padding(20.dp, 20.dp, 20.dp, 0.dp)
        .fillMaxWidth(),
    placeholder = { Text(text = "请输入账号") })

可组合函数Button是界面中login按钮的UI布局，在Column函数布局中以此排列。onClick方法在用户点击按钮时候回调。

Button(
    onClick = {
        val tips = "账号：$userNameText  密码：$passwordText 登录了"
        ToastUtil.toastShort(AppUtils.getContext(), tips)
    },
    modifier = Modifier
        .height(80.dp)
        .fillMaxWidth()
        .wrapContentSize(Alignment.TopCenter)

) {
    Text(text = "Login", modifier = Modifier.wrapContentSize(Alignment.Center))
}

每个可组合函数中都有modifier参数供可组合函数设置，里面主要包括布局的一些基本属性，这里只是简单的描述一下，暂时知道他是干什么的就可以，后边章节将会重点描述modifier怎么使用，里面的每个属性是用来什么的。modifier也是compose中重要组成部分，所有的可组合函数都包括这个属性。

​ 本章到这里基本结束了，主要介绍Compose是什么，为什么使用Compose，Compose入门使用基本。后边章节将会介绍Compose中各种布局的使用。以后深入了解Compose各种组件，在开发Compose中遇到的问题一些来分享，感觉您的阅读，希望提出您宝贵的意见。