当前位置：首页 > news >正文

Compose和AndroidView的交互

news 来源：原创 2024/4/27 11:30:04

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方法中调用。