Jetpack之Compose修炼（一）-六虎

1. 简介

敞开成长之旅！这是我参加「日新方案 12 月更文应战」的第1天，点击查看活动概况

任何的新技术的呈现都有其需求解决的问题，Compose当然也不破例

Compose首要解决的问题就是原生Android的UI开发，随着近年大前端趋势的愈演愈烈，React的声明式UI也家喻户晓，推动了新一代UI的变革，Compose在规划方面对此也多有借鉴

Jetpack Compose官方主页

1.1. 特点

从官方给出的文档来看，首要有以下几个特点：

更少的代码
直观
加速开发
功用强壮

在后续的开发中将会逐渐体会到它所带来的好处

更少的代码

首要是现在提倡低代码开发，Compose在代码方面进行了改善，相关于传统的XML布局、View的承继和对应的指令式操作，Compose只需求开发者关注UI的描绘，而且使用了愈加简洁的语法用以描绘UI

直观

相关于XML的布局方式，Compose增加了代码的可读性，直接用函数描绘界面的结构

加速开发

Compose提倡使用组合，这一点也与React傍边的组件思想有异曲同工之妙，能够增强代码的复用性，一同加速开发的效率

功用强壮

Compose的代码能够与原来传统的布局兼容，而且兼容到API 21，对各常用三方库都兼容，稳定兼容正是强壮的一方面

2. 指令式UI与声明式UI

假如之前有接触过React，可能对这二者的区别现已有所了解了
Android在显现界面方面的流程其实也和JS一样，显现找到对应的UI元素，然后进行相应的操作，比如设置属性，获取内容之类的，这就是指令式UI

在Android中，咱们经过XML或许new出View类型的对象生成UI布局之后，会调用findViewById()等办法去找到布局里对应的元素，然后经过回来的对象执行操作这种场景就像是找人就事，分为找、做两个过程，看上去其实还好，但是当你需求找的人多了，问题就来了 —— 我要找100个人，每个人有不同的使命（写代码的毕竟是人，情况复杂了犯错的概率也就上升了），此时不仅代码量大大增加，呈现问题的危险也增加了，一同还会有可读性的问题

而声明式UI相对更简略，只需求搭建好UI的描绘，其他的数据处理交给专门的逻辑，假如打个比方的话，这就像是大型公司的架构，将公司的结构安排好，比及事务来的时分，从上层传递下去，由对应部分负责处理，相当于早已摆好了姿势，一方面也是一种大局观的表现

3. 规划准则

3.1. 一切皆为函数

在Compose傍边，组件是Composable函数，经过@Composable注解，将函数作为组件，彼此直接能够进行组合，而且Composable函数只能在Composable函数中被调用

而且，在Compose傍边，不包含类的概念，因而一切组件都是Kotlin中所谓的顶层函数

3.2. 组合优于承继

承继带来方便的一同，也引起了一系列问题，比如说代码功用的冗余，可读性变差等
在Android中有各种各样的View，它们都直接或间接承继了View，这也就导致有些东西也许用不到，但仍是硬生生地承继过来了

Compose是期望经过使用组件进行组合，像搭积木一样，把需求的组合到一同，拼出想要的，一方面能够复用，另一方面也是减少了无用的部分

3.3. 单一数据源

单一数据源的准则是声明式UI的重要准则
简略来讲就是组件UI的变化需求概括为一个原因，这样才干保证UI状态的可控，不然会有更多的同步开支以及产生数据问题的危险

在UI交互方面，数据总是坚持自上而下的活动，而事件则是自下而上的传递

4. 环境搭建

Android官网的Android Studio下载

首要就是需求版别比较新的Android Studio，现在Android官网上能够下载到的现已是能够支撑的了，官网上还顺便有Compose开发的样例图片

点击下载Android Studio，装置过程对应的阐明在当前页面的下方也能够找到，“Install Android Studio”就是对应的装置阐明，点击跳转便能够查看，里面也有对应的辅导视频，过程这儿就不赘述了

Android Studio的装置阐明

5. 第一个Compose应用

5.1. 创立

直接打开Android Studio，从头开始创立一个Compose项目
新建项目的时分，从供给的项目模板中挑选“Empty Compose Activity”，这就是Compose项目的模版，然后挑选“Next”下一步

接着简略填写一下项目的信息，“Finish”完结项目的创立

等待项目创立完结后，能够看到，Android Studio为咱们创立了一些模板代码，默认生成一个MainActivity，承继自ComponentActivity，右侧是预览页面

其他先不做，现在先直接运行一下

这就是Compose应用的一个HelloWorld Demo，正如各个技术入门的传统一般，接下来对其间的代码进行剖析

5.2. 剖析

学习要知其然，知其所以然，在学习运用后需求进一步深入剖析原理，才干力求精进
从前仅仅对已有的程序进行简略的执行，下面关于代码的逻辑进行简要的剖析，了解为何能够在屏幕上呈现“Hello Android!”的成果

正如刚刚所看到的，代码首要会集在Android Studio为咱们创立的MainActivity.kt傍边，除去顶部的包名以及包导入，其他内容如下所示：

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeDemoTheme {
                // A surface container using the 'background' color from the theme
                Surface(color = MaterialTheme.colors.background) {
                    Greeting("Android")
                }
            }
        }
    }
}
@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    ComposeDemoTheme {
        Greeting("Android")
    }
}

Composable组件

onCreate()是Activity的生命周期回调，除此以外，下面有两个办法，它们都带有@Composable注解，这两个办法就是Composable组件，代表两个UI控件

咱们的项目中并没有加载XML布局文件，setContent{}正是经过这种名为Composable组件的办法加载的布局

Greeting()这个办法能够传入参数，name就是传入的参数，然后内部调用了Text()办法，将字符串拼接后的成果再传给Text()，其实Text()也是一个Composable组件，如同本来的TextView一样，用于显现文本字符串，因此Greeting简略封装了一层，或许说是组合了文本控件的功用，使其根据传进来的name参数显现文本，Greeting("Android")自然就输出了“Hello, Android!”

别的，Composable组件都是顶层函数，也就是独自声明在Kotlin文件的最外层的函数，这样能够恣意进行调用，而且Composable函数只能被Composable函数调用，这就形成了树形的调用结构，在这儿扮演树根的就是setContent{}块，setContent{}接受Composable组件作为内容

组件预览

触及UI界面的开发埋着头盲写可不行，需求随时预览开发的效果才干愈加高效精准

在DefaultPreview()这个Compose组件上还有一个@Preview注解，这就是用来预览组件的
在Composable组件有参数一同又没有给默认值的情况下是没有办法进行预览的

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    ComposeDemoTheme {
        Greeting("Android")
    }
}

给Composable加上@Preview注解后，打开右侧的预览面板便能够预览对应的组件了

关于页面的修改后需求编译，重新刷新预览，保证显现正确

假如有多个@Preview标示的Composable组件，能够一同预览，替换@Preview的参数在UI适配的时分会愈加有效率

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    ComposeDemoTheme {
        Greeting("Android")
    }
}
@Preview(showBackground = true, uiMode = Configuration.UI_MODE_NIGHT_YES)
@Composable
fun DefaultPreviewNight() {
    ComposeDemoTheme {
        Greeting("Android")
    }
}

Jetpack之Compose修炼（一）