Android View與Compose互相呼叫範例探究

2023-02-01 18:00:28

1. 前言

Compose 具有超強的相容性，相容現有的所有程式碼，Compose 能夠與現有 View 體系並存，可實現漸進式替換。這就很有意義了，我們可以在現有專案中一小塊一小塊逐步地替換Compose，或者在舊專案中實現新的需求的時候，使用Compose。

今天，我們就來演示一下，Compose和Android View怎麼互相呼叫，以及在雙層巢狀(原生View巢狀Compose，Compose中又巢狀原生View)的情況下，在最外層原生View中，怎麼獲取到Compose內部的原生View。

2. Android傳統View呼叫Compose

2.1 新建傳統View體系的Android專案

新建專案的時候選擇 Empty Activity

2.2 專案新增Compose設定

2.2.1 在android程式碼塊新增

在app的build.config android程式碼塊中新增

buildFeatures {
compose true
}
composeOptions {
kotlinCompilerExtensionVersion '1.1.1'
}

2.2.2 在dependencies中新增依賴

在app的build.config dependencies程式碼塊中新增

dependencies {
//...省略...

def compose_ui_version = '1.1.1'
implementation "androidx.compose.ui:ui:$compose_ui_version"
implementation "androidx.compose.ui:ui-tooling-preview:$compose_ui_version"
androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_ui_version"
debugImplementation "androidx.compose.ui:ui-tooling:$compose_ui_version"
debugImplementation "androidx.compose.ui:ui-test-manifest:$compose_ui_version"

implementation 'androidx.activity:activity-compose:1.3.1' //kotlin對應版本1.6.20
implementation 'androidx.compose.material:material:1.1.1'
}

2.3 定義Compose函數

在MainActivity.kt中定義Compose函數

@Composable
fun ComposeContent() {
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        Text(text = "Hello world!")
    }
}

2.4 修改xml檔案

在activity_main.xml中新增androidx.compose.ui.platform.ComposeView

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
    <androidx.compose.ui.platform.ComposeView
        android:id="@+id/compose_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

2.5 關聯Compose函數

在MainActivity.kt中，先通過findViewById找到ComposeView，然後通過composeView.setContent將Android 傳統View和Compose建立關聯。

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    val composeView : ComposeView = findViewById(R.id.compose_view)
    composeView.setContent {
        ComposeContent()
    }
}

2.6 執行專案

可以發現介面顯示如下，成功在傳統View專案中呼叫了Compose了

3. Compose中呼叫Android View

3.1 呼叫傳統View的日曆

3.1.1 使用AndroidView

在@Composable內使用: androidx.compose.ui.viewinterop.AndroidView，然後在factory裡面返回原生View即可

@Composable
fun AndroidViewPage() {
    AndroidView(factory = {
        CalendarView(it)
    }, modifier = Modifier.fillMaxWidth(), update = {
        it.setOnDateChangeListener { view, year, month, day ->
            Toast.makeText(view.context, "${year}年${month}月${day}日", Toast.LENGTH_SHORT).show()
        }
    })
}

3.1.2 顯示效果如下

3.2 呼叫傳統View的WebView

3.2.1 新增網路許可權

首先需要在AndroidManifest.xml中新增網路許可權

<uses-permission android:name="android.permission.INTERNET" />

3.2.2 首先要註冊WebView的生命週期

@Composable
private fun rememberWebViewLifecycleObserver(webView: WebView): LifecycleEventObserver {
    return remember(webView) {
        LifecycleEventObserver { _, event ->
            run {
                when (event) {
                    Lifecycle.Event.ON_RESUME -> webView.onResume()
                    Lifecycle.Event.ON_PAUSE -> webView.onPause()
                    Lifecycle.Event.ON_DESTROY -> webView.destroy()
                    else -> Log.e("WebView", event.name)
                }
            }
        }
    }
}

3.2.3 建立有狀態的WebView

建立有狀態的WebView，並註冊生命週期

@Composable
fun rememberWebViewWIthLifecycle(): WebView {
    val context = LocalContext.current
    val webView = remember {
        WebView(context)
    }
    val lifecycleObserver = rememberWebViewLifecycleObserver(webView)
    val lifecycle = LocalLifecycleOwner.current.lifecycle
    DisposableEffect(lifecycle) {
        lifecycle.addObserver(lifecycleObserver)
        onDispose {
            lifecycle.removeObserver(lifecycleObserver)
        }
    }
    return webView
}

3.2.4 呼叫Android View

@Composable
fun WebViewPage() {
    //建立有狀態的WebView，並註冊生命週期
    val webView = rememberWebViewWIthLifecycle()
    AndroidView(factory = {
        webView
    }, modifier = Modifier
        .fillMaxSize() //寬高佔滿父佈局
        .background(Color.Red),
    update = {webView ->
        //設定支援JavaScript
        val webSettings = webView.settings
        webSettings.javaScriptEnabled = true
        webView.loadUrl("https://www.baidu.com")
    })
}

3.2.5 顯示效果如下所示

4. 雙層巢狀

獲取AndroidView中的原生View id

有時候，我們會遇到這種情況，就是在原生專案了，頁面中有部分使用了Compose，然後在Compose中又有部分元件使用了原生View，這種情況下，要如何取到AndroidView中的原生View id 呢 ?

4.1 在定義Xml中定義ComposeView

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
    <androidx.compose.ui.platform.ComposeView
        android:id="@+id/compose_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

4.2 關聯Compose函數

在MainActivity.kt中，先通過findViewById找到ComposeView，然後通過composeView.setContent將Android 傳統View和Compose建立關聯。

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    val composeView : ComposeView = findViewById(R.id.compose_view)
    composeView.setContent {
        ComposeContent()
    }
}
@Composable
fun ComposeContent() {
	//....
}

4.3 建立ids.xml定義原生view id

在resources/values目錄下建立ids.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <item type="id" name="my_calendar_view" />
</resources>

4.4 實現ComposeContent

@Composable
fun ComposeContent() {
    AndroidView(factory = {
        //這裡也可以通過 layoutInflater.inflate(R.layout.xxxxxx) 的方式返回原生View
        val calendarView = CalendarView(it)
        val keyboard = R.id.my_calendar_view
        Log.i(TAG,"my_calendar_view id:$keyboard")
        calendarView.id = keyboard
        calendarView
    }, modifier = Modifier.fillMaxWidth(), update = {
        it.setOnDateChangeListener { view, year, month, day ->
            Toast.makeText(view.context, "${year}年${month}月${day}日", Toast.LENGTH_SHORT).show()
        }
    })
}

4.5 在外層的原生程式碼處獲取Compose中的原生View

在原生程式碼的地方，通過composeView.findViewById查詢id為my_calendar_view的原生View

window?.decorView?.post {
    val calendarViewId = R.id.my_calendar_view
    Log.i(TAG,"my_calendar_view id ===>:$calendarViewId")
    val calendarView = composeView.findViewById<CalendarView>(calendarViewId)
    Log.i(TAG,"calendarView:$calendarView")
    calendarView.setOnDateChangeListener { view, year, month, day ->
        Toast.makeText(view.context, "!!!! ${year}年${month}月${day}日", Toast.LENGTH_SHORT).show()
    }
}

注意這裡的window?.decorView?.post : 必須在頁面載入完成後，才能查詢到my_calendar_view對應的原生View，如果直接在onCreate裡面去查詢，會發現composeView.findViewById<CalendarView>(calendarViewId)返回的是null

4.6 執行專案

選擇任意一個日期，可以發現彈出的toast是!!!! year年month月day日，即原生的setOnDateChangeListener覆蓋了Compose中的setOnDateChangeListener監聽，這樣說明我們也在原生程式碼處，取到了Compose內部的原生View了。

5. 本文原始碼下載

本文原始碼下載地址 : 傳送門

到此這篇關於Android View與Compose互相呼叫範例探究的文章就介紹到這了,更多相關Android View與Compose 內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

Android View與Compose互相呼叫範例探究

目錄

1. 前言

2. Android傳統View呼叫Compose

2.1 新建傳統View體系的Android專案

2.2 專案新增Compose設定

2.2.1 在android程式碼塊新增

2.2.2 在dependencies中新增依賴

2.3 定義Compose函數

2.4 修改xml檔案

2.5 關聯Compose函數

2.6 執行專案

3. Compose中呼叫Android View

3.1 呼叫傳統View的日曆

3.1.1 使用AndroidView

3.1.2 顯示效果如下

3.2 呼叫傳統View的WebView

3.2.1 新增網路許可權

3.2.2 首先要註冊WebView的生命週期

3.2.3 建立有狀態的WebView

3.2.4 呼叫Android View

3.2.5 顯示效果如下所示

4. 雙層巢狀

4.1 在定義Xml中定義ComposeView

4.2 關聯Compose函數

4.3 建立ids.xml定義原生view id

4.4 實現ComposeContent

4.5 在外層的原生程式碼處獲取Compose中的原生View

4.6 執行專案

5. 本文原始碼下載

熱門文章