Jetpack Compose实战教程（五）

Jetpack Compose实战教程（五）

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

文章目录

  • Jetpack Compose实战教程（五）
  • 一、前言
  • 二、本章目标
  • 三、开始编码
    • 3.1 先让自定义控件能跑起来
    • 3.2给自定义控件使用compose的方式赋值
    • 3.3如何在非composable作用域下使用被记忆的变量
    • 3.4 及时释放资源

一、前言

刚从命令式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，祝各位都能更上一层楼

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/41613.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

在linux系统centos上面安装php7gmp扩展

在linux系统centos上面安装php7gmp扩展

ps:在ubuntu上面安装gmp(最简单) $ sudo apt-get install php7.0-gmp然后再php.ini添加extensionphp_gmp.so <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<…
阅读更多...
C#Modbus通信

C#Modbus通信

目录 1&#xff0c;辅助工具。 2&#xff0c;初识Modbus。 3&#xff0c;基于ModbusRTU的通信。 3.1&#xff0c;RTU与ASCII模式区别 3.2&#xff0c;Modbus存储区 3.3&#xff0c;报文格式 3.4&#xff0c;异常代码 3.5&#xff0c;详细文档连接 。 3.6&#xff0c;代…
阅读更多...
2024 年第十四届亚太数学建模竞赛（中文赛项）浅析

2024 年第十四届亚太数学建模竞赛（中文赛项）浅析

需要完整B题资料&#xff0c;请关注&#xff1a;“小何数模”&#xff01; 本次亚太(中文赛)数学建模的赛题已正式出炉&#xff0c;无论是赛题难度还是认可度&#xff0c;该比赛都是仅次于数模国赛的独一档&#xff0c;可以用于国赛前的练手训练。考虑到大家解题实属不易&…
阅读更多...
纸飞机社工库

纸飞机社工库

收集了一些比较好用的纸飞机社工库&#xff0c;有纸飞机的可以加一下 Space X 隐私信息查询平台https://t.me/SpaceSGK_bot?startKhbOsEdELmingeek社工库 https://t.me/ingeeksgkbot?startNzM3ODE5NDM5Nw Botnet免费社工机器人https://t.me/SGK_0001_bot?start7378194397暗…
阅读更多...
TZDYM001矩阵系统源码 矩阵营销系统多平台多账号一站式管理

TZDYM001矩阵系统源码 矩阵营销系统多平台多账号一站式管理

外面稀有的TZDYM001矩阵系统源码&#xff0c;矩阵营销系统多平台多账号一站式管理&#xff0c;一键发布作品。智能标题&#xff0c;关键词优化&#xff0c;排名查询&#xff0c;混剪生成原创视频&#xff0c;账号分组&#xff0c;意向客户自动采集&#xff0c;智能回复&#xf…
阅读更多...
【C++ | 继承】C++的继承详解 及 例子源码演示

【C++ | 继承】C++的继承详解 及 例子源码演示

&#x1f601;博客主页&#x1f601;&#xff1a;&#x1f680;https://blog.csdn.net/wkd_007&#x1f680; &#x1f911;博客内容&#x1f911;&#xff1a;&#x1f36d;嵌入式开发、Linux、C语言、C、数据结构、音视频&#x1f36d; ⏰发布时间⏰&#xff1a; 本文未经允许…
阅读更多...
信用卡没逾期就万事大吉了吗？

信用卡没逾期就万事大吉了吗？

6月28日&#xff0c;中国人民银行揭晓了《2024年第一季度支付体系概览》&#xff0c;数据显示&#xff0c;截至本季度末&#xff0c;信用卡及借贷合一卡的总量为7.6亿张&#xff0c;与上一季度相比&#xff0c;这一数字微降了0.85个百分点。同时&#xff0c;报告还指出&#xf…
阅读更多...
AE的合成

AE的合成

目录 合成的概念 合成设置 预设 像素长宽比 分辨率​编辑 开始时间码和持续时间 背景颜色 合成的实战理解 在AE的操作界面中&#xff0c;当我们新建了一个项目之后&#xff0c;画面中最主要的位置显示的是新建合成 合成的概念 AE是一款专业特效合成软件&#xff0c;可…
阅读更多...
【吊打面试官系列-MyBatis面试题】MyBatis 实现一对一有几种方式?具体怎么操作的？

【吊打面试官系列-MyBatis面试题】MyBatis 实现一对一有几种方式?具体怎么操作的？

大家好&#xff0c;我是锋哥。今天分享关于 【MyBatis 实现一对一有几种方式?具体怎么操作的&#xff1f;】面试题&#xff0c;希望对大家有帮助&#xff1b; MyBatis 实现一对一有几种方式?具体怎么操作的&#xff1f; 有联合查询和嵌套查询,联合查询是几个表联合查询,只查询…
阅读更多...
【记录】如何使用IDEA2023

【记录】如何使用IDEA2023

前言&#xff1a; 记录IDEA2023的激活与安装 第一步&#xff1a;官网下载安装包&#xff1a; 下载地址&#xff1a;https://www.jetbrains.com/idea/download/other.html 这个最好选择2023版本&#xff0c;用着很nice。 安装步骤就不详解了&#xff0c;无脑下一步就可以了…
阅读更多...
【并发编程】-3.锁的类型、CAS、UNSAFE、原子操作

【并发编程】-3.锁的类型、CAS、UNSAFE、原子操作

锁的类型 可重入锁和不可重入锁 可重入锁&#xff1a;一个线程可以多次抢占同一个锁&#xff1b;Synchronized、ReentrantLock都是可重入锁&#xff0c;用Synchronized进行锁的可重入测试&#xff0c;在同一个线程中定义childMethod()和childMethod2()两个方法&#xff0c;在这…
阅读更多...
使用Github Actions自建Docker镜像仓库

使用Github Actions自建Docker镜像仓库

使用Github Actions自建Docker镜像仓库 背景使用Github Actions自建Docker镜像仓库fork项目[docker_image_sync](https://github.com/xqxyxchy/docker_image_sync)获取云厂商容器镜像服务信息配置github secrets运行github action配置需要同步的镜像同步后效果华为云配置 背景 …
阅读更多...
VCS+Vivado联合仿真BUG

VCS+Vivado联合仿真BUG

场景&#xff1a; 在vcsvivado联合仿真过程中&#xff0c;对vivado导出的shell脚本修改&#xff0c;修改某些source文件路径&#xff0c;vcs编译时会报Permission Denied。 问题描述 对shell脚本修改如下&#xff1a; 修改仅为注释掉某一行&#xff0c;下面变为source文件新…
阅读更多...
昇思25天学习打卡营第07天|函数式自动微分

昇思25天学习打卡营第07天|函数式自动微分

神经网络的训练主要使用反向传播算法&#xff0c;模型预测值&#xff08;logits&#xff09;与正确标签&#xff08;label&#xff09;送入损失函数&#xff08;loss function&#xff09;获得loss&#xff0c;然后进行反向传播计算&#xff0c;求得梯度&#xff08;gradients&…
阅读更多...
hid-ft260驱动学习笔记 1 - 驱动模块注册与注销

hid-ft260驱动学习笔记 1 - 驱动模块注册与注销

目录 1. ft260_driver_init初始化 1.1 tty设备 1.1.1 申请tty驱动设备 1.1.2 初始化tty驱动程序 1.1.3 注册tty设备 1.2 hid设备 2. ft260_driver_exit注销模块 3. 调试 hid-ft260.c的最底部可以看到该驱动的注册与注销接口的申明。 module_init(ft260_driver_init); …
阅读更多...
eclipse ide中文件编码的修改，解决中文乱码的问题。

eclipse ide中文件编码的修改，解决中文乱码的问题。

1、先上一张图&#xff1a; 记得之前设置过&#xff0c;但是稍微一变&#xff0c;环境编码又到了ISO-8859-1了&#xff0c;然后就出现了乱码。 2、设置eclipse的编码&#xff1a; Preferences--General -- Content Types -- Text -- Java Properties File -- Default encoding…
阅读更多...
使用myCobot280和OAK-D OpenCV DepthAI摄像头制作一个实时脸部跟踪的手机支架！

使用myCobot280和OAK-D OpenCV DepthAI摄像头制作一个实时脸部跟踪的手机支架！

引言 由于YouTube和Netflix的出现&#xff0c;我们开始躺着看手机。然而&#xff0c;长时间用手拿着手机会让人感到疲劳。这次我们制作了一个可以在你眼前保持适当距离并调整位置的自动移动手机支架&#xff0c;让你无需用手拿着手机。请务必试试&#xff01; 准备工作 这次我们…
阅读更多...
Vue3从入门到精通(三)

Vue3从入门到精通(三)

vue3插槽Slots 在 Vue3 中&#xff0c;插槽&#xff08;Slots&#xff09;的使用方式与 Vue2 中基本相同&#xff0c;但有一些细微的差异。以下是在 Vue3 中使用插槽的示例&#xff1a; // ChildComponent.vue <template><div><h2>Child Component</h2&…
阅读更多...
昇思25天学习打卡营第08天|模型训练

昇思25天学习打卡营第08天|模型训练

模型训练 模型训练一般分为四个步骤&#xff1a; 构建数据集。定义神经网络模型。定义超参、损失函数及优化器。输入数据集进行训练与评估。 现在我们有了数据集和模型后&#xff0c;可以进行模型的训练与评估。 ps&#xff1a;这里的训练和Stable Diffusion中的训练是一样…
阅读更多...
进程的概念

进程的概念

一.进程和程序的理解 首先抛出结论&#xff1a;进程是动态的&#xff0c;暂时存在于内存中&#xff0c;进程是程序的一次执行&#xff0c;而进程总是对应至少一个特定的程序。 程序是静态的&#xff0c;永久的存在于磁盘中。 程序是什么呢&#xff1f;程序其实就是存放在我们…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023