Jetpack Compose实战教程（五）

Jetpack Compose实战教程（五）

第五章 如何在Compose UI中使用基于命令式UI的自定义View

---

---

一、前言

刚从命令式UI转向compose ui的小伙伴往往会有一个疑问，如果我的项目代码中用到了一些第三方的sdk，它们里面有一些自定义控件，我总不能去改别人的源码，用compose ui 重写一遍吧，成本多大啊。或者我自己项目本身就写了一些自定义控件，功能很多的，全部要用compose重写一遍，成本也很高。不用慌，compose提供了一个支持调用命令式UI的自定义View的组件。

二、本章目标

能完整的把目前项目中暂时无法用compose重写的控件熟练的运用至compose中

友情提醒，如果各位看官有不懂的代码可以先看一下之前的章节，循序渐进，如果还是有不懂的，可以给我留言

三、开始编码

3.1 先让自定义控件能跑起来

这里我以引用的第三方sdk的自定义控件（腾讯自研的pag动画）举例

BaseTheme {Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {ConstraintLayout {//AndroidView这个就是支持我们调用命令式UI的组件了，在factory中声明这个控件是什么AndroidView(factory = {PAGView(it).apply {this.composition = PAGFile.Load(assets, Constant.PagConstant.getSourceByName("002901"))this.setRepeatCount(0)this.play()}})}}}

运行之后，程序正常运行跑了起来，但它是铺满屏幕的，我们实际使用时，可能需要指定它的位置和大小，这里提供两个方案：

BaseTheme {Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {ConstraintLayout {AndroidView(factory = {PAGView(it).apply {//方案一，使用我们熟知的kotlin代码来指定大小val params = ConstraintLayout.LayoutParams(200f.dp2px().toInt(),200f.dp2px().toInt())this.layoutParams = paramsthis.composition = PAGFile.Load(assets, Constant.PagConstant.getSourceByName("002901"))this.setRepeatCount(0)this.play()}}, modifier = Modifier //方案二，使用compose 的modifier来指定大小.width(200.dp).height(200.dp))}}}

两个方案都可以将这个PAGView的大小和宽高指定为200dp，但建议使用方案二，因为如果这个AndroidView是需要依赖其它compose控件的位置而发生改变的话，那么方案一就无效了。

3.2给自定义控件使用compose的方式赋值

上述代码我们是写死了动画的执行资源以及执行次数的，那么想要动态改变它，要怎么处理呢？
在实现这个逻辑之前，我需要先解释一个东西，上述代码只贴了compose ui的具体代码，它的完整代码是这样的：

override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContent(content = {viewRoot()})}@Composable
fun viewRoot() {BaseTheme {Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {ConstraintLayout {AndroidView(factory = {PAGView(it).apply {//方案一，使用我们熟知的kotlin代码来指定大小val params = ConstraintLayout.LayoutParams(200f.dp2px().toInt(),200f.dp2px().toInt())this.layoutParams = paramsthis.composition = PAGFile.Load(assets, Constant.PagConstant.getSourceByName("002901"))this.setRepeatCount(0)this.play()}}, modifier = Modifier //方案二，使用compose 的modifier来指定大小.width(200.dp).height(200.dp))}}}}

请留意这个 @Composable注解，它代表了viewRoot 这个函数可以使用compose 的相关代码，这是因为compose有要求，所有compose ui的代码，只能在Composable作用域下执行。这意味着，如果我们是要在kotlin代码中去动态改变值的话，那么我们就不能使用compose ui的相关参数，我们先来看在使用compose ui相关参数的办法：

BaseTheme {Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {ConstraintLayout {//这里我们定义了一个用于观察的可变参数var compositionValue = remember {mutableStateOf(PAGFile.Load(assets, Constant.PagConstant.getSourceByName("002901")))}var testBoolean = false //定义一个boolean变量AndroidView(factory = {PAGView(it).apply {this.composition = compositionValue.value //然后将它的值赋值给PAGView使用this.setRepeatCount(0)this.play()}}, modifier = Modifier.width(200.dp).height(200.dp).clickable {testBoolean = !testBoolean //点击一次就改变一次值，从而改变PAGView播放的动画资源if(testBoolean){compositionValue.value = PAGFile.Load(assets, Constant.PagConstant.getSourceByName("002201"))}else{compositionValue.value = PAGFile.Load(assets, Constant.PagConstant.getSourceByName("002901"))}})}}}

代码写完了，然后运行一下，发现点击之后并没有任何变化，这里就要提及一下AndroidView的这个组件了，我们先点击进去看一下AndroidView里面都干了啥：

@Composable
@UiComposable
fun <T : View> AndroidView(factory: (Context) -> T,modifier: Modifier = Modifier,update: (T) -> Unit = NoOpUpdate
) {AndroidView(factory = factory,modifier = modifier,update = update,onRelease = NoOpUpdate)
}

如果再点击里面的AndroidView则能看到它的具体实现，但我们目前所引用的这个，就能解决我们的问题，先不做过深讲解，我们先来看上面的几个函数，factory是我们声明了这个自定义View是啥，我们上述的代码是初始化了这个PAGView，并给它赋了值，但如果要它的参数动态改变的话，我们要使用update函数，将代码改成如下：

BaseTheme {Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {ConstraintLayout {var compositionValue = remember {mutableStateOf(PAGFile.Load(assets, Constant.PagConstant.getSourceByName("002901")))}var testBoolean = falseAndroidView(factory = {PAGView(it).apply {this.composition = compositionValue.valuethis.setRepeatCount(0)this.play()}}, modifier = Modifier.width(200.dp).height(200.dp).clickable {testBoolean = !testBooleanif(testBoolean){compositionValue.value = PAGFile.Load(assets, Constant.PagConstant.getSourceByName("002201"))}else{compositionValue.value = PAGFile.Load(assets, Constant.PagConstant.getSourceByName("002901"))}},update = {it.composition = compositionValue.value //将数据的改动设置到update函数中来})}}}

再次运行，得到了我们想要的效果。细心的网友应该会发现一些问题，为什么上面的compositionValue要用remember括起来，并且里面还用了一个mutableStateOf来初始化参数值，直接像testBoolean一样不行吗？
所谓实践出真知，那么我们来修改一下代码，改成如下：

BaseTheme {Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {ConstraintLayout {var compositionValue = PAGFile.Load(assets, Constant.PagConstant.getSourceByName("002901"))var testBoolean = falseAndroidView(factory = {PAGView(it).apply {this.composition = compositionValuethis.setRepeatCount(0)this.play()}}, modifier = Modifier.width(200.dp).height(200.dp).clickable {testBoolean = !testBooleanif(testBoolean){compositionValue = PAGFile.Load(assets, Constant.PagConstant.getSourceByName("002201"))}else{compositionValue = PAGFile.Load(assets, Constant.PagConstant.getSourceByName("002901"))}},update = {it.composition = compositionValue})}}}

运行，发现点击并没有改变PAGView的播放资源 这是因为，compose是使用观察者模式，通过记录每个参数的变化来刷新UI的，而我们自行定义的参数，并不能让compose记住它的值的变化。

3.3如何在非composable作用域下使用被记忆的变量

好，接下来，假设我们有这么一个需求，我们要监听手机电量的变化，当电量低的时候，播放一个电量比较低的PAG动画，而监听电量的变化是通过系统的广播来实现的，这就意味着我们需要把 compositionValue这个变量提取出来，变成整个Activity的局部变量，才能在收到电量广播的变化时，修改它的值，于是我们依葫芦画瓢，写出如下代码：

private var compositionValue = remember {mutableStateOf(PAGFile.Load(assets, Constant.PagConstant.getSourceByName("002901")))}override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContent(content = {viewRoot()})}

然而，当我们刚把这个代码复制上去的时候，android studio就提示编译错误了

再次提醒我们，@Composable调用只能发生在@Composable函数的上下文中，所以我们需要做一些简单的改动，提示编译错误的是remember这个函数，我们将它干掉即可

private var compositionValue = mutableStateOf(PAGFile.Load(assets, Constant.PagConstant.getSourceByName("002901")))override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContent(content = {viewRoot()})}@Composable
fun viewRoot() {BaseTheme {Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {ConstraintLayout {var testBoolean = falseAndroidView(factory = {PAGView(it).apply {this.composition = compositionValue.valuethis.setRepeatCount(0)this.play()}}, modifier = Modifier.width(200.dp).height(200.dp).clickable {testBoolean = !testBooleanif(testBoolean){compositionValue.value = PAGFile.Load(assets, Constant.PagConstant.getSourceByName("002201"))}else{compositionValue.value = PAGFile.Load(assets, Constant.PagConstant.getSourceByName("002901"))}},update = {it.composition = compositionValue.value})}}}}

这样编译是没有报错了，但当我们运行时，Logcat抛给了我们另外一个错误：

很明显，我们在初始化compositionValue的时候，不能在参数那里直接调用PAGFile.Load(assets, Constant.PagConstant.getSourceByName(“002901”))，此时界面还没绘制，读取资源文件会报空指针，然后我们尝试修改一下：

private var compositionValue = mutableStateOf(PAGFile)
@Composableoverride fun viewRoot() {compositionValue.value = PAGFile.Load(assets, Constant.PagConstant.getSourceByName("002901"))BaseTheme {Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {ConstraintLayout {var testBoolean = falseAndroidView(factory = {PAGView(it).apply {this.composition = compositionValue.valuethis.setRepeatCount(0)this.play()}}, modifier = Modifier.width(200.dp).height(200.dp).clickable {testBoolean = !testBooleanif(testBoolean){compositionValue.value = PAGFile.Load(assets, Constant.PagConstant.getSourceByName("002201"))}else{compositionValue.value = PAGFile.Load(assets, Constant.PagConstant.getSourceByName("002901"))}},update = {it.composition = compositionValue.value})}}}}

此时android studio又报编译错误了

原来这个PAGFile的构造函数是私有的，于是我们只能改成这样：

private var pagFile:PAGFile?=null //我们定义一个为空的PAGFile，然后赋值给compositionValueprivate var compositionValue = mutableStateOf(pagFile)@Composableoverride fun viewRoot() {//然后尽可能早的给compositionValue赋值一个真实的数据compositionValue.value = PAGFile.Load(assets, Constant.PagConstant.getSourceByName("002901"))BaseTheme {Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {ConstraintLayout {var testBoolean = falseAndroidView(factory = {PAGView(it).apply {this.composition = compositionValue.valuethis.setRepeatCount(0)this.play()}}, modifier = Modifier.width(200.dp).height(200.dp).clickable {testBoolean = !testBooleanif(testBoolean){compositionValue.value = PAGFile.Load(assets, Constant.PagConstant.getSourceByName("002201"))}else{compositionValue.value = PAGFile.Load(assets, Constant.PagConstant.getSourceByName("002901"))}},update = {it.composition = compositionValue.value})}}}}

运行，程序按我们的要求跑起来了。那么举一反三，设置播放次数 以及何时播放，都可以用外部参数来控制，这里建议大家亲自尝试一下

3.4 及时释放资源

我们再回到刚才AndroidView的实现这里

@Composable
@UiComposable
fun <T : View> AndroidView(factory: (Context) -> T,modifier: Modifier = Modifier,update: (T) -> Unit = NoOpUpdate
) {AndroidView(factory = factory,modifier = modifier,update = update,onRelease = NoOpUpdate)
}

它还有一个函数 onRelease，当我们需要在生命周期结尾的时候释放资源，就需要用到它了，那么我们来编写一下代码

private var pagFile:PAGFile?=nullprivate var compositionValue = mutableStateOf(pagFile)@Composableoverride fun viewRoot() {compositionValue.value = PAGFile.Load(assets, Constant.PagConstant.getSourceByName("002901"))BaseTheme {Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {ConstraintLayout {var testBoolean = falseAndroidView(factory = {PAGView(it).apply {Log.e("test","初始化资源")this.composition = compositionValue.valuethis.setRepeatCount(0)this.play()}}, modifier = Modifier.width(200.dp).height(200.dp).clickable {testBoolean = !testBooleanif(testBoolean){compositionValue.value = PAGFile.Load(assets, Constant.PagConstant.getSourceByName("002201"))}else{compositionValue.value = PAGFile.Load(assets, Constant.PagConstant.getSourceByName("002901"))}},update = {Log.e("test","加载资源")it.composition = compositionValue.value},onRelease = {Log.e("test","释放资源")it.freeCache()})}}}}

本章内容至此结束，各位看官一定要亲自编写代码，才能更加熟练的使用compose ui，祝各位都能更上一层楼