AndroidView与Compose框架交互实现介绍
作者:儿歌八万首
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交互,将会可能涉及到LiveData
和State
数据的交换问题。
由于在AndroidView中常用LiveData来进行数据的订阅,而在Compose中使用的是Compose特有的mutableStateOf
或者mutableListStateOf
等来进行ReCompose
,UI更新,所以当同时存在两者的时候,需要将
LiveData转换成Compose中的State对象,然后才能在Compose中实现订阅功能。
Compose库中提供了一个扩展函数来进行LiveData
和State
之间进行转换:
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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!