AndroidView與Compose框架交互實現介紹

Posted on by

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內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：