1、在ComposeUI中加载AndroidView控件

Compose中可以加载AndroidView还是比较简单的,直接引入AndroidView来加载AndroidView布局文件。

@Composable
fun Greeting(name: String) {
    Column {
        Text(text = "Hello $name!")
        LoadAndroidView(name)
    }
}
/**
 * Compose中加载AndroidView
 */
@Composable
fun LoadAndroidView(name: String) {
    var tvTittle: TextView? = null
    AndroidView(factory = {
        //加载AndroidView布局。
        LayoutInflater.from(it).inflate(R.layout.activity_main, null).apply {
            tvTittle = findViewById(R.id.tvTittle)
        }
    }) {
        //更新UI数据
        tvTittle?.text = name
    }
}

factory参数主要是用来初始化AndroidView布局,将AndroidView布局通过工厂模式转换成ComposeUI加载到Compose中,只会执行一行,第二个回调函数,主要是用来更新UI数据,ReCompose可能会执行,所以我么初始化AndroidView的代码应该放在factory参数中。

2、在AndroidView中加载ComposeUI

AndroidView中引入ComposeView直接在AndroidView的布局文件中加入androidx.compose.ui.platform.ComposeView

控件,在代码中初始化ComposeView,调用setContent方法,就可以使用ComposeUI了。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <TextView
        android:id="@ id/tvTittle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="我是AndroidView" />
    <androidx.compose.ui.platform.ComposeView
        android:id="@ id/composeView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>
class LoadComposeActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        findViewById<ComposeView>(R.id.composeView).apply { 
            setContent { 
                Column {
                    Text(text = "我是ComposeView")
                }
            }
        }
    }
}

3、LiveData数据转换成State数据

LiveData是JetPack组件的一部分,主要是在AndroidView中用来监听数据的变化,并且具有生命感知的,只有在Activity等处于活动才会触发数据更新。

State是Compose中特有的用来更新Ui的数据框架。比如常用的mutableStateOf , mutableListStateOf等。

当AndroidView和Compose交互,将会可能涉及到LiveDataState数据的交换问题。

由于在AndroidView中常用LiveData来进行数据的订阅,而在Compose中使用的是Compose特有的mutableStateOf或者mutableListStateOf等来进行ReCompose ,UI更新,所以当同时存在两者的时候,需要将

LiveData转换成Compose中的State对象,然后才能在Compose中实现订阅功能。

Compose库中提供了一个扩展函数来进行LiveDataState之间进行转换:

1、导入runtime-livedata库

implementation 'androidx.compose.runtime:runtime-livedata:1.2.0'

2、将LiveData数据转换成State数据

private val tittleLv = MutableLiveData("Android")
private fun initView() {
    findViewById<ComposeView>(R.id.composeView).setContent {
        val tittle by tittleLv.observeAsState()
        Column {
            Text(text = tittle.orEmpty(),Modifier.clickable {
                tittleLv.value="测试LiveData转换State"
            })
        }
    }
}

调用observeAsState扩展函数可以将LiveData对象直接转换成State对象,在Compose中使用。

上面代码给Text加了个点击事件改变LiveData数据,Compose中的文本同步改变是成功的。

需要注意的是,observeAsState函数只能在Compose方法中调用。

到此这篇关于AndroidView与Compose交互实现介绍的文章就介绍到这了,更多相关AndroidView Compose内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax!

AndroidView与Compose框架交互实现介绍的更多相关文章

  1. php微信公众平台交互与接口详解

    这篇文章主要为大家详细介绍了php微信公众平台开发,交互与接口,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  2. Ajax简单的异步交互及Ajax原生编写

    一提到异步交互大家就会说ajax,仿佛ajax这个技术已经成为了异步交互的代名词.那下面将研究ajax的核心对象

  3. 一文详解 Compose Navigation 的实现原理

    这篇文章主要介绍了一文详解 Compose Navigation的实现原理,文章通告围绕主题展开详细的相关内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下

  4. 使用Compose制作抖音快手视频进度条Loading动画效果

    这篇文章主要为大家介绍了使用Compose制作抖音快手视频进度条Loading动画效果,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

  5. node.js+jQuery实现用户登录注册AJAX交互

    本篇文章主要介绍了用Node.js当作后台、jQuery写前台AJAX代码实现用户登录和注册的功能的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧

  6. 前端ajax的各种与后端交互的姿势

    本篇文章主要介绍了前端ajax的各种与后端交互的相关知识,具有很好的参考价值。下面跟着小编一起来看下吧

  7. 利用Jetpack Compose实现绘制五角星效果

    这篇文章主要为大家介绍了Jetpack Compose如何使用自定义操作符实现绘制五角星效果,文中的示例代码讲解详细,感兴趣的小伙伴可以了解一下

  8. javascript表单域与json数据间的交互第1/3页

    找了几个javascript的框架,都没有找到我想要的: 提供函数,把某个表单的所有域封装成json数据格式的对象,唯有自己实现一个。

  9. AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】

    这篇文章主要介绍了AngularJS实现与Java Web服务器交互操作的方法,结合实例形式较为详细的分析了AngularJS前台ajax提交与javascript后台处理的完整流程与实现技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下

  10. 详解angularJS自定义指令间的相互交互

    本篇文章主要介绍了详解angularJS自定义指令间的相互交互,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

随机推荐

  1. Flutter 网络请求框架封装详解

    这篇文章主要介绍了Flutter 网络请求框架封装详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  2. Android单选按钮RadioButton的使用详解

    今天小编就为大家分享一篇关于Android单选按钮RadioButton的使用详解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧

  3. 解决android studio 打包发现generate signed apk 消失不见问题

    这篇文章主要介绍了解决android studio 打包发现generate signed apk 消失不见问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

  4. Android 实现自定义圆形listview功能的实例代码

    这篇文章主要介绍了Android 实现自定义圆形listview功能的实例代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  5. 详解Android studio 动态fragment的用法

    这篇文章主要介绍了Android studio 动态fragment的用法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  6. Android用RecyclerView实现图标拖拽排序以及增删管理

    这篇文章主要介绍了Android用RecyclerView实现图标拖拽排序以及增删管理的方法,帮助大家更好的理解和学习使用Android,感兴趣的朋友可以了解下

  7. Android notifyDataSetChanged() 动态更新ListView案例详解

    这篇文章主要介绍了Android notifyDataSetChanged() 动态更新ListView案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下

  8. Android自定义View实现弹幕效果

    这篇文章主要为大家详细介绍了Android自定义View实现弹幕效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  9. Android自定义View实现跟随手指移动

    这篇文章主要为大家详细介绍了Android自定义View实现跟随手指移动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. Android实现多点触摸操作

    这篇文章主要介绍了Android实现多点触摸操作,实现图片的放大、缩小和旋转等处理,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

返回
顶部