“This is the 24th day of my participation in the First Challenge 2022. For details: First Challenge 2022.”

The Compose method is used in traditional XML layout projects

Just like kt for the first time, many projects are using Java and KT in a mix, which can easily happen when it’s difficult to ensure that development co-workers have the same technical aspirations (for example, some want to use Compose and some don’t). So it’s not surprising that the traditional XML layout and the Compose method call each other.

In response, Google has given this situation, Compose kit has provided androidx.compose.ui.platform.Com poseView Compose in an XML file.

An empty Activity such as the layout XML file, we add androidx.compose.ui.platform.Com poseView is as follows:

<? The XML version = "1.0" encoding = "utf-8"? > <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:id="@+id/tv_xml" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="TextView For XML" android:layout_gravity="center_horizontal"/> <androidx.compose.ui.platform.ComposeView android:id="@+id/tv_compose" android:layout_width="match_parent" android:layout_height="wrap_content" /> </LinearLayout>Copy the code

In a regular period of code, just Compose components through androidx.compose.ui.platform.Com poseView to declare, at this time in the activity by the findViewById for instance:

val mTvCompose = findViewById<ComposeView>(R.id.tv_compose)
Copy the code

Notice that findViewById is followed by a rejoin ID.

You can now use it as a component in Compose.

val mTvXml = findViewById<TextView>(R.id.tv_xml) val mTvCompose = findViewById<ComposeView>(R.id.tv_compose) mTvXml.text = "This is a TextView for XML" mtvcomposing. SetContent {Column() {Text(Text = "This is the Compose component ") Text(Text = "successful call ")}}Copy the code

The corresponding display effect is:

You can also add a View to a ComposeView by using addView() :

setContentView(LinearLayout(this).apply {
    orientation = VERTICAL
    addView(ComposeView(this@MainActivity).apply {
        id = R.id.ll_layout
        setContent {
            MaterialTheme {
                Text("LinearLayout Compose View")
            }
        }
    })
    addView(TextView(context).apply {
        text = "TextView for xml"
    })
    addView(ComposeView(context).apply {
        id = R.id.tv_compose
        setContent {
            MaterialTheme {
                Text("ComposeView here")
            }
        }
    })
})
Copy the code

Compose uses views

Materialists often say that every coin has two sides. If you want to use Compose in XML, there will be a case where you want to use a traditional View in Compose. For example, if you want to use a previously written custom View that does not already have a Compose version, such as AdView, WebView, etc.), and Google also provides AndroidView for this.

For example:

SetContent {AndroidView(factory = {TextView(it)}){it. Apply {text = "this is for composing"}}Copy the code

The corresponding effect is:

At this point, we look at the constructor of this method:

@Composable
fun <T : View> AndroidView(
    factory: (Context) -> T,
    modifier: Modifier = Modifier,
    update: (T) -> Unit = NoOpUpdate
)
Copy the code

As you can see, the factory takes a Context parameter to build a View. Modifier is the Modifier, which we explained in detail earlier, that can be used to define the function of a component. Update () is a callback that executes after the inflate, as well as when the read state state value changes.

The above code builds a View by passing in a TextView as a factory argument. After a successful build, lamba calls the following {} content.

At this point, you have successfully used the View in Compose. How do I call Compose in a.java file? Sorry, Compose only supports calls from kotlin files.

Compose & View

From the above code, it is not difficult to see:

The ComposeView is actually an Android View.

AndroidView is actually a Compose function.

AndroidView and ComposeView are a bridge between View and Compose components that use traditional XML to call each other.