作为Android开发者你还不会Compose吗

没有伞的孩子必须努力奔跑!你不勇敢,没人替你坚强。只有经历过地狱般的折磨,才有征服天堂的力量。只有流过血的手指才能弹出世间的绝唱。

简介

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

为什么要学习Compose

• 更少的代码
  编写更少的代码会影响到所有开发阶段：作为代码撰写者，需要测试和调试的代码会更少，出现 bug 的可能性也更小，您就可以专注于解决手头的问题；作为审核人员或维护人员，您需要阅读、理解、审核和维护的代码就更少。
  与使用 Android View 系统（按钮、列表或动画）相比，Compose 可让您使用更少的代码实现更多的功能。无论您需要构建什么内容，现在需要编写的代码都更少了。
• 直观
  Compose 使用声明性 API，这意味着只需描述界面，Compose 会负责完成其余工作。这类 API 十分直观 - 易于探索和使用。
  利用 Compose，您可以构建不与特定 activity 或 fragment 相关联的小型无状态组件。这让您可以轻松重用和测试这些组件。
  在 Compose 中，状态是显式的，并且会传递给相应的可组合项。这样一来，状态便具有单一可信来源，因而是封装和分离的。然后，应用状态变化时，界面会自动更新。
• 加速开发
  Compose 与所有的现有代码兼容：可以从 View 调用 Compose 代码，也可以从 Compose 调用 View。大多数常用库（如 Navigation、ViewModel 和 Kotlin 协程）都适用于 Compose。
  借助全面的 Android Studio 支持以及实时预览等功能，可以更快地迭代和交付代码：Android Studio 中的预览功能极大地节省了我们的时间。构建多个预览的能力也帮我们节省了时间。

基本要求

• Android Stdio版本4.3及以上。
• Kotlin语法 （重点是高阶函数部分）。

创建Jetpack Compose 工程步骤

1. 如果您位于 Welcome to Android Studio 窗口中，请点击 Start a new Android Studio project。如果您已打开 Android Studio 项目，请从菜单栏中依次选择 File > New > New Project。
2. 在 Select a Project Template 窗口中，选择 Empty Compose Activity，然后点击 Next。
3. 在Configure your project窗口中，执行以下操作：

1. 按照常规方法设置 Name、Package name 和 Save location。
2. 请注意，在 Language 下拉菜单中，Kotlin 是唯一可用的选项，因为 Jetpack Compose 仅适用于使用 Kotlin 编写的类。
3. 在 Minimum API level dropdown 菜单中，选择 API 级别 21 或更高级别。

4. 点击 Finish。

现有项目添加支持Compose

1. 配置kotlin开发环境：kotlin版本1.4.30及以上。

classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.5.20" 

2. Gradle配置：

buildFeatures {
compose true  //支持compose
}
composeOptions {
kotlinCompilerExtensionVersion compose_version  //设置kotlin编译器版本
} 

3. 添加Compose依赖:

implementation "androidx.compose.ui:ui:$compose_version"
implementation "androidx.compose.material:material:$compose_version"
implementation "androidx.compose.ui:ui-tooling-preview:$compose_version"

第一个Compose程序

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            //主题
            ComposeProjectTheme {
                // 一个带有背景颜色的容器可理解为R.layout.xxx
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    //可组合函数
                    Greeting("Android")

                }
            }
        }
    }
}
//可组合函数
@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}

@Preview(showBackground = true, showSystemUi = true, device = Devices.AUTOMOTIVE_1024p)
@Composable
fun DefaultPreview() {
    ComposeProjectTheme {
        Greeting("Android")
    }
}

页面预览

@Preview(showBackground = true, showSystemUi = true, device = Devices.AUTOMOTIVE_1024p)

@Composable
fun DefaultPreview() {
    ComposeProjectTheme {
        Greeting("Android")
    }
}

@Preview注解用来构建预览页面。参数包括，背景，是否显示系统UI，模拟设备等等。

编程思想

声明式编程

长期以来，Android视图层次结构一直可以表示为界面控件树，由于应用程序的状态会因用户交互等因素而发生变化，因此界面层次结构需要更新以显示当前的数据，最常见的更新方式就是通过findViewById 等函数遍历view树，找到对应的view，然后调用view的相应的方法进行更新。而Compose是根据数据变化而自动更新UI层次结构。

可组合函数

@Composable
fun Greeting(isLogin:Boolean = false) {
   val content = if (isLogin)  "登录成功" else "请登录"
    Text(text = "Hello $content!")
}

可组函数不仅可以写展示页面也可以写逻辑代码

• @Composable注释修饰，作用是提示Compose编译器，此函数可将数据转化为页面。
• 可接收参数，也可以包含逻辑处理。
• 没有返回值，只是用来构建屏幕的状态。
• 在构建页面的时候不能影响其他地方。
  可以通过定义一组接收数据并发出页面的可组合函数来构建界面。

重组

在Android View中，如果想要修改某个控件，需要调用控件的方法，而在Compose中，可以使用新的数据再次调用可组合函数进行修改，这就导致函数进行重组，重组就是系统根据需要使用新数据重新绘制的函数来重组组合，Compos可以智能的仅重组已更改的控件。

@Composable
fun Greeting(isLogin:Boolean = false) {
   val content = if (isLogin)  "登录成功" else "请登录"
    Text(text = "Hello $content!")
}

当Compose根据新数据进行重组时，它仅调用可能已更改的函数或者lambda，跳过其余函数或lambda，通过跳过所有未更改的参数的函数或lambda，Compose就可以重组了。

可组合函数如果被频繁进行调用，如动画，为了避免动画执行过程中的卡顿，尽量使用后台协程中执行，并将值结果作为参数传递给可组合函数。

Compose跟原生的View到底是什么关系？是跟Flutter一样完全基于Skia引擎渲染，还是说和原生View一样？

override fun onResume() {
    super.onResume()
    //测量布局
    window.decorView.postDelayed({
        ( window.decorView as? ViewGroup)?.let {
          printViewCount(it,1)
        }

    },300)
}
fun printViewCount(view: View,index:Int){
    Log.e(TAG, "布局 第: $index 层 --$view")
   if (view is ViewGroup){
       view.children.forEach {
           printViewCount(it,index+1)
       }
   }
}

我们通过日志打印，在页面展示出来后，第三秒还是遍历当前页面的整个布局层次，来看一下布局层次是否和我们代码添加的一致.

通过日志分析可以看出来，布局的最后一层是AndroidComposeView，没有我们代码添加的布局，那么我们添加的布局在哪？

我们先看布局结构层次

public fun ComponentActivity.setContent(
    parent: CompositionContext? = null,
    content: @Composable () -> Unit
) {
    val existingComposeView = window.decorView
        .findViewById<ViewGroup>(android.R.id.content)
        .getChildAt(0) as? ComposeView

    if (existingComposeView != null) with(existingComposeView) {
        setParentCompositionContext(parent)
        setContent(content)
    } else ComposeView(this).apply {
        // Set content and parent **before** setContentView
        // to have ComposeView create the composition on attach
        setParentCompositionContext(parent)
        setContent(content)
        // Set the view tree owners before setting the content view so that the inflation process
        // and attach listeners will see them already present
        setOwners()
        setContentView(this, DefaultActivityContentLayoutParams)
    }
}

性能提升

1. APK体积减小
2. 代码行数减少
   Compose 没有xml文件，kotlin代码相应减少
3. 构建速度加快
   Android原生在解析xml时，需要遍历xml中布局的每一个层级，拿的控件进行渲染。

喜欢Compose的同学，请关注或收藏一下本篇文章，后续跟随小编一起学习Compose。有精通Compose的同学欢迎评论区留言！