12. Compose 之原生xml布局加入Compose代码

187 阅读1分钟

01. Compose 可组合组件之Row And Column

02. Compose 可组合组件之 属性 modifier

03. Compose 可组合组件之Card 图片

04. Compose 字体

05. Compose State

06. Compose SnackBar

07. Compose List

08. Compose ConstrainLayout

09. Compose Button

10. Compose CheckBox

11. Compose 对于复杂界面的尝试

12. Compose 之原生xml布局加入Compose代码

xml

<?xml version="1.0" encoding="utf-8"?>


<androidx.appcompat.widget.LinearLayoutCompat xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="#2196F3"
        android:gravity="center"
        android:text="XML Text View one"
        android:textSize="30sp" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="#FF9800"
        android:gravity="center"
        android:text="XML Text View two "
        android:textSize="30sp" />


    <androidx.compose.ui.platform.ComposeView
        android:id="@+id/mComposeView"
        android:layout_width="match_parent"
        android:layout_height="0dp"

        android:layout_weight="1" />

</androidx.appcompat.widget.LinearLayoutCompat>

Compose

class XmlAndComposeActivity : AppCompatActivity() {


    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_xml_compose)
        val mLlContainer = findViewById<ComposeView>(R.id.mComposeView)
        mLlContainer.setContent {
            ComposeContent()
        }
    }


    @Composable
    fun ComposeContent() {
        LazyColumn(modifier = Modifier.fillMaxWidth(), content = {
            items(count = 10) {
                Text(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(200.dp), text = "Compose List Item $it"
                )
            }
        })
    }
}