Compose二三事：初步认识

Compose 是什么？

Compose是Jetpack系列中用于构建原生Android界面的工具库，Jetpack是Google推出的一系列帮助开发者规范代码的库。简单来说就是用代码写UI，也就是声明式UI。

声明式UI和命令式UI的区别在于，声明式UI更关心做什么，而命令式UI关心怎么做。
简单来讲，我们直接使用View本身去显示内容，就是声明式，而我们要指定XML要去呈现什么内容，就是命令式。

写一个最简单的界面

下面用一个简单的界面对比一下Compose和常规的xml布局，这是一个非常简单的界面，如下。

我们常规的写布局的方式

1. 定义布局文件
2. 在Activity中引入

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Hello World!" />

</FrameLayout>

引入

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
}

如果用Compose来写

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .fillMaxHeight()
            ) {
                Text(
                    text = "Hello World!",
                    modifier = Modifier.align(Alignment.Center)
                )
            }
        }
    }
}

当然这样可能看起来比较臃肿，我们可以把布局部分独立出来。如下

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            mainContentView()
        }
    }
}

@Composable
fun mainContentView() {
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight()
    ) {
        Text(
            text = "Hello World!",
            modifier = Modifier.align(Alignment.Center)
        )
    }
}

从以上可以看出：

• Compose跟Flutter很像，如果有Flutter基础可基本上写Compose无压力
• 布局逻辑清晰，入手难度不高

为什么要推进Compose？XML有什么问题？

为什么Android选择XML作为的布局语言

• 可读性高：如果用代码写布局，很明显JAVA代码可读性非常差，布局逻辑非常不清晰
• 与业务逻辑解耦：xml语言实现与java代码物理隔离

XML加载比较耗时

通过分析setContentView源码，可以得出XML加载是个非常耗时的操作。他的耗时来源于两个操作

• 将布局文件加载到内存中：IO
• 解析文件，生成对应的View：反射

当然我们可以避开这两个操作，有两种方式

• AsyncLayoutInflater：异步加载，就是将IO和反射放到子线程去执行。
• X2C：将布局文件在编译时转换成用JAVA代码写布局

AsyncLayoutInflater存在的问题是，他并没有解决掉布局加载耗时问题，即使放到了子线程，我们还是要等待布局加载完成，才能进行view的相关操作。

X2C存在的问题是，用JAVA写布局代码很不友好，而且很多属性不支持。

Compose 对比 XML

• UI更加直观：从布局代码上来看，Compose的逻辑非常清晰，可以在Android Studio上实时预览，甚至可以在手机上实时刷新
• 布局更加灵活：基于代码的布局方式，可以更方便的动态添加或修改布局，实现更复杂的UI效果
• 更易于维护和修改：基于代码的布局文件，可以更方便的处理业务逻辑以及实现复用。省去了各种插件都想干掉的findviewbyid
• 不需要手动更新：Compose的元素会对依赖的数据自动进行订阅，数据改变了，界面自动改变，不需要手动更新

使用代码写函数还有一个XML不能实现的效果

  Column {
        repeat(4) {
            log("repeat $it")
            Text(text = "Hello $it")
        }
    }

引入Compose

Compose基础配置

• AS版本：Android Studio Arctic Fox 版本
• Gradle：7.0 +
• TargetSdk / CompileSdk：31 +
• MinSdk：21 +
• Kotlin：1.6.0+
• Compose：1.1.1

实际配置

以下是项目引入Compose后实际的依赖情况

config.gradle

ext {
    android = [
            compileSdkVersion: 33,
            buildToolsVersion: "30.0.2",
        		...
    ]
  }

主module下build.gradle

	apply plugin: 'kotlin-kapt'
	...
  
    // 启用Jetpack Compose组件特性
    buildFeatures {
        compose true
    }

    composeOptions {
        kotlinCompilerExtensionVersion '1.1.0'
        kotlinCompilerVersion "1.1.1"
    }

    kotlinOptions {
        jvmTarget = "1.8"
    }


dependencies {
    ...
    // Compose 库的主体包
    implementation 'androidx.compose.material:material:1.3.1'
    implementation "com.google.accompanist:accompanist-systemuicontroller:0.28.0"
    // 将 Activity 支持 Compose
    implementation 'androidx.activity:activity-compose:1.5.0'
    // Compose ui 预览
    implementation 'androidx.compose.ui:ui-tooling:1.1.1'
    implementation 'androidx.compose.ui:ui-util:1.3.3'
    // Compose ui 相关的基础支持
    implementation 'androidx.compose.ui:ui:1.1.1'
    // Compose 基于 ui 层封装的更实用的组件库 (Border, Background, Box, Image, Scroll, shapes, animations, etc.)
    implementation 'androidx.compose.foundation:foundation:1.1.1'
    // Compose ViewModels 存储数据
    implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.5.0'
    // Compose LiveData
    implementation 'androidx.compose.runtime:runtime-livedata:1.1.1'
}
	...

项目下build.gradle

...
buildscript {
    dependencies {
        ...
        classpath "com.android.tools.build:gradle:7.0.4"
				...
    }
}

gradle.properties

KotlinVersion=1.6.10

kotlin 升级后的问题

废弃了 ‘kotlin-android-extensions’ 插件。这个插件非常好用，可以直接通过id来引用View实例，但是他也存在一些问题

• 销毁之后的空指针问题

KAE通过生成缓存解决findviewbyid问题，但是Activity的onDestory和Fragment的onDestoryView之后会清除缓存，这里导致的问题就是如果在这个生命周期时做一些view的操作，会出现空指针问题
如下代码会出现崩溃

import kotlinx.android.synthetic.main.activity_main.*
class MainFragment : Fragment() {
    ...

    override fun onDestroyView() {
        super.onDestroyView()

        textView.text = "Crash!"
    }
}

而下面不会

lateinit var textView: TextView

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)
    textView = view.findViewById(R.id.textView)
}

override fun onDestroyView() {
    super.onDestroyView()

    textView.text = "Nothing happened."
}

当然KAE也存在一些小问题，比如不存在的id等等，这些影响不大，还有个问题是它不支持Compose。我们可以使用viewbinding作为替代方案，它比KAE更安全

Gradle升级问题

• maven依赖http的需要新增allowInsecureProtocol属性

        maven {
            url "..."
            allowInsecureProtocol = true
        }

• 上传aar的方式变为publishing

...
apply plugin: 'maven-publish'

task androidSourcesJar(type: Jar) {
    archiveClassifier.set('sources')
    from android.sourceSets.main.java.srcDirs
}

publishing {
    repositories {
        maven {
            //文件发布到下面目录
            url = MAVEN_URL
            credentials {
                username MAVEN_USERNAME
                password MAVEN_PASSWORD
            }
        }
    }

    publications {
        aar(MavenPublication){
            groupId = groupId1
            artifactId artifactId1
            version versionName
            artifact androidSourcesJar
        }
    }
}

引入Compose的影响

• 包体积：因为引入了新的库和依赖，所以会有所增加，不过Google的拆包都比较细，可以只引入需要的库。根据Google官方的统计，约会增加2~3M
• 编译速度：Compose基于Kotlin编写，并且引入了一些新的编译工具和插件，对编译速度有一定的影响。不过如果使用构建缓存，编译速度影响不大，另外，Compose支持即时刷新界面

总结

Compose是未来Android的趋势，这是肯定的。但是他跟kotlin一样，不是一种“必须使用”的方案，他会逐步的替代XML，成为主流的开发方式。

仍需要跟进的问题

• Compose的绘制原理是什么，Compose的Text和TextView区别在哪
• Compose比XML快吗？

参考

使用 Jetpack Compose 更快地打造更出色的应用

Android Jetpack Compose —— 集成到现有项目中

要再见了吗，Kotlin Android Extension

扔物线compose

ChatGPT