Android 传统view嵌入compose

上一个demo使用compose调用view，再试下传统view嵌套compose，还是修改之前的demo。

MainActivity 增加一个按钮，用于跳转到该demo的activity：

Kotlin 复制代码

package com.example.testnavigation

import android.content.Intent
import android.net.Uri
import android.os.Bundle
import android.widget.Button
import android.widget.ImageView
import androidx.fragment.app.FragmentActivity
import dagger.hilt.android.AndroidEntryPoint


@AndroidEntryPoint  // 注入点，可以被注入对象
class MainActivity : FragmentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main2)
        val ivBaibing = findViewById<ImageView>(R.id.iv_baibing)
        val uri = Uri.parse("android.resource://com.example.testnavigation/${R.drawable.baibing}")
        ivBaibing?.setImageURI(uri)
        ivBaibing?.let{
            it.setOnClickListener {
                // 预览
                val intent = Intent(this@MainActivity, PicZoomActivity::class.java).let {
                    it.putExtra(PicZoomActivity.BUNDLE_KEY_PIC_URI, uri)
                }
                startActivity(intent)
            }
        }

        // Compose 预览按钮（启动纯 Compose Activity）
        val btnComposePreview = findViewById<Button>(R.id.btn_compose_preview)
        btnComposePreview.setOnClickListener {
            val intent = Intent(this, ComposePreviewActivity::class.java).apply {
                putExtra(PicZoomActivity.BUNDLE_KEY_PIC_URI, uri)
            }
            startActivity(intent)
        }

        val btn_test_view_invoke_compose = findViewById<Button>(R.id.btn_test_view_invoke_compose)
        btn_test_view_invoke_compose?.setOnClickListener {
            startActivity(Intent(this@MainActivity, ActivityViewContainsCompose::class.java))
        }
    }
}

复制代码

ActivityViewContainsCompose 代码如下：

Kotlin 复制代码

package com.example.testnavigation

import android.app.Activity
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.layout.Column
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.platform.ComposeView
import androidx.compose.ui.unit.sp

public class ActivityViewContainsCompose : AppCompatActivity() { // 用到compose必须继承AppCompatActivity
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_view_contains_compose)
        val composeView = findViewById<ComposeView>(R.id.compose_host)

        composeView.setContent {
            // 纯 Compose 代码
            ComposeContent()
        }
    }
}

@Composable
fun ComposeContent() {
    Column {
        Text(
            text = "汝比颜良文丑如何？",
            fontSize = 18.sp
        )
        Text(
            text = "今天下英雄，惟使君与操耳！",
            fontSize = 16.sp
        )
    }
}

其布局：

XML 复制代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">
    <!-- 传统 TextView -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="此间乐，不思蜀也。"
        android:textSize="18sp"/>

    <!-- 用来放 Compose 的容器 -->
    <androidx.compose.ui.platform.ComposeView
        android:id="@+id/compose_host"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"/>
</LinearLayout>

测试：

点击最下面按钮：

ok. 显示正确。