Android開發 Jetpack Compose 與xml的混合開發AndroidView

前言

  Jetpack Compose雖然已經逐漸完善，但是其實還是有很多地方未滿足需求。比如播放視頻、相機預覽等等依然需要原來的View。所以目前階段Jetpack Compose與xml的混合開發非常重要。

  官方文檔地址：https://developer.android.google.cn/jetpack/compose/migrate/interoperability-apis/views-in-compose?hl=zh-cn

在compose中添加TextView

在原來的View與Jetpack Compose進行混合時，主要依靠的是AndroidView

效果圖

代碼

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
        APage()
    }
}

@Composable
fun APage() {
    val timeData = remember {
        mutableStateOf(0L)
    }
    Column(
        Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        //這裏在AndroidView的factory構建TextView
        AndroidView(factory = {
            TextView(it).apply {
                text = System.currentTimeMillis().toString()
                textSize = 40f
                setTextColor(android.graphics.Color.WHITE)
            }
        }, modifier = Modifier.background(color = Color.Gray)//這邊依然可以使用compose的modifier對View進行配置

            , update = { //update是用來更新AndroidView裏的數據的
                it.text = timeData.value.toString()
            })

        //這裏舉例通過Button更新AndroidView裏的數據
        Button(onClick = {
            timeData.value = System.currentTimeMillis()
        }) {
            Text(text = "更新時間")
        }
    }
}

通過ViewBinding導入xml佈局

效果圖

所需依賴

這個版本是跟隨compose的大版本，需要參考你的androidx.compose.ui:ui:  、androidx.compose.ui:ui-tooling: 版本

//androidView binding
implementation("androidx.compose.ui:ui-viewbinding:1.4.3")

此外還需要在build文件中啓用viewBinding

android {
    //略...

    defaultConfig {
         //略...
    }
    
    buildFeatures{
        viewBinding = true
    }

    //略...		
}

xml佈局

item_user_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <ImageView
        android:id="@+id/image"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:src="@mipmap/ic_fruit_apple"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:textSize="40sp"
        android:text="名稱"
        android:textColor="@color/black"
        app:layout_constraintEnd_toEndOf="@+id/image"
        app:layout_constraintStart_toStartOf="@+id/image"
        app:layout_constraintTop_toBottomOf="@+id/image" />

</androidx.constraintlayout.widget.ConstraintLayout>

代碼

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
        APage()
    }
}

@Composable
fun APage() {
    val imageRes = remember {
        mutableListOf(R.mipmap.ic_fruit_apple, R.mipmap.ic_fruit_banana,R.mipmap.ic_fruit_coconut)
    }
    val nameData = remember {
        mutableListOf("蘋果", "香蕉","椰子")
    }
    val count = remember {
        mutableStateOf(0)
    }
    Column(
        Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        AndroidViewBinding(factory = ItemUserLayoutBinding::inflate) {
            //這裏已經是AndroidViewBinding的update參數lambda
            image.setImageResource(imageRes[count.value])
            name.text = nameData[count.value]
            //這裏也舉例一下，可以在AndroidViewBinding裏更新remember的數據
            image.setOnClickListener {
                image.setImageResource(imageRes[count.value])
                name.text = nameData[count.value]
                count.value++
                if (count.value > 2){
                    count.value = 0
                }
            }
        }
        //這是compose的Button，這裏舉例通過Button更新AndroidViewBinding裏的數據
        Button(onClick = {
            count.value++
            if (count.value > 2){
                count.value = 0
            }
        }) {
            Text(text = "更新數據")
        }
    }
}

 

 

end