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)@Composablefun 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中遇到的问题一些来分享，感觉您的阅读，希望提出您宝贵的意见。