美文网首页Android
Compose和AndroidView的交互

Compose和AndroidView的交互

作者: 儿歌八万首 | 来源:发表于2022-08-08 13:41 被阅读0次

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

    相关文章

      网友评论

        本文标题:Compose和AndroidView的交互

        本文链接:https://www.haomeiwen.com/subject/qmywwrtx.html