AndroidView与Compose框架交互实现介绍

目录

• 1、在ComposeUI中加载AndroidView控件
• 2、在AndroidView中加载ComposeUI
• 3、LiveData数据转换成State数据

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内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！