Compose is introduced

Jetpack Compose has been out for almost a year now, and while it’s still in the DEV phase, it’s not that far from being available. The Compose library is a responsive programming approach to View building that allows for faster development with less code and more intuitive functionality (see the almost identical Flutter, which is fast).

Jetpack Compose may have a steep learning curve for those who have not been exposed to declarative UI, and is not difficult for young people who are already proficient in developing Flutter applications. (Compose is developed with reference to the model of flutter, and you can also find comments about flutter in the code.)

This article doesn’t go into too many principles and tricks, just to get you up and running on a development project.

How to use Compose

Because Compose is still under development, you need to use the Android Studio preview of the latest Canary version.

You can choose to create a new Compose application by directly creating the Empty Compose Activity, or you can modify gradle to create the Compose application

Modify the Gradle

Add the following to the build.gradle file of the module:

android {
    ...
    
    kotlinOptions {
        jvmTarget = '1.8'
        useIR = true
    }
    buildFeatures {
        compose true
    }
    composeOptions {
        kotlinCompilerExtensionVersion compose_version
        kotlinCompilerVersion '1.4.0'}}Copy the code

Add to Dependencies:

implementation "androidx.compose.ui:ui:$compose_version"
    implementation "androidx.compose.material:material:$compose_version"
    implementation "androidx.ui:ui-tooling:$compose_version"
Copy the code

The latest Compose release is currently 1.0.0- The minimum buildTools version requirement for Alpha03 to use Compose is 29

use

@Compose

All methods for building a View must be annotated with @compose. And @compose is similar to the method Suspend of the coroutine. Methods annotated by @compose can only be called from methods also annotated by @comopse

@Composable
fun Greeting(name: String) {
    Text (text = "Hello $name!")}Copy the code

@Preview

The @Preview annotation allows you to verify the layout without running the App. The more common arguments in the @preview annotations are as follows:

  • Name: String: Names the Preview, which is displayed in the layout Preview.
  • ShowBackground: Boolean: Indicates whether to display the background. True indicates that the background is displayed.
  • BackgroundColor: Long: sets the backgroundColor.
  • ShowDecoration: Boolean: Specifies whether to display the Statusbar and Toolbar. True specifies whether to display the Toolbar.
  • Group: String: Sets the group name for this Preview, which can be displayed in groups in the UI.
  • FontScale: Float: Fonts can be enlarged in the preview, ranging from 0.01. -widthdp: Int: The maximum width to render in Compose, in dp.
  • HeightDp: Int: The maximum height rendered in Compose, in dp.

See the Google documentation for @Preview for more details

@Preview
@Composable
fun PreviewGreeting(a) {
    Greeting("Android")}Copy the code

The above code is generated in the preview screen:

Note: It is strongly recommended that you do not add the @Preview annotation to a production function (even if it takes no parameters), but instead write a wrapper function and add the @Preview annotation to it.

setContent

SetContent is similar to setContentView in XML where you put the @compopse method on the UI in setContent, which you can display in your Activity.

...override fun onCreate(savedInstanceState: Bundle?){
        super.onCreate(savedInstanceState)
        setContent { 
            ComposeTheme {
                Greeting("Android"}}} ···Copy the code

The theme

Jetpack Compose provides an implementation of Material Design, where Material Design components (buttons, cards, switches, etc.) are built on top of Material Theming.

Jetpack Compose implements these concepts using MaterialTheme composables:

MaterialTheme (colors =... , typography =... , shapes =...) {// app content
}
Copy the code

For topics, I recommend reading Google’s official documentation

Layout, components

Compose provides a common layout with rich components.

Common layouts include Column, Row, and Stack. For those familiar with Flutter, Compose provides a Scaffold that is very similar to the structure of Flutter.

Column:

@Composable
fun ArtistCard(a) {
  Column {
    Text("Alfred Sisley")
    Text("3 minutes ago")}}Copy the code

Scaffold:

@Composable
fun HomeScreen(...). { Scaffold ( drawerContent = { ... }, topBar = { ... }, bodyContent = { ... })}Copy the code

Indeed, Compose provides a layout and components that are very similar to Flutter’s components and layouts, in addition to their name and properties. For example, the property TextStyle that controls the Text style is directly used by the Flutter code. Change the Dart syntax to Kotlin syntax to use it directly.

I suggest that those who need the layout and component properties of Flutter go directly to the article about Flutter. Flutter has been developed for a long time, and the related documentation and instructions are much more detailed than the current Compose.

How does Compose integrate into existing projects

For many existing projects, it is not practical to use Compose from scratch. I can modify Gradle manually to support Compose as mentioned above.

Use in XML

We can just use Compopse as a normal View

<androidx.compose.ui.platform.ComposeView
        android:id="@+id/compose_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
Copy the code
  findViewById<ComposeView>(R.id.compose_view).setContent {
            ComposeTheme {
                Surface(color = MaterialTheme.colors.background) {
                    Greeting("Android")}}}Copy the code

The Activity and fragments

Use Compopse directly using the setContent method as a standalone interface.

The current latest version of Kotlin has a bug,kotlin-android-extensions(Extension for using View IDS in XML directly in code) has a bug, which Kotlin officially fixed in version 1.4.20