前言

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() {
    Column(
        Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        //这里在AndroidView的factory构建TextView
        AndroidView(factory = {
            TextView(it).apply {
                setText("内容")
                setTextSize(40f)
                setTextColor(android.graphics.Color.BLACK)
            }
        }, modifier = Modifier.background(color = Color.Blue)) //这边依然可以使用compose的modifier对View进行配置
    }
}

通过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