Use compose for existing Android projects

After looking at the example project of compose, we also want to use compose. Based on the current situation, the compose function is added to the existing project.

First, we install Android studio arctic fox or later.

Configuration of project gradle / wrapper / gradle-wrapper.properties

distributionUrl=https\://services.gradle.org/distributions/gradle-7.1.1-bin.zip

Gradle of the project

buildscript {
    ext.kotlin_version = '1.5.21'

    repositories {
        google()
        mavenCentral()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:7.0.3'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
    }
}

allprojects {
    repositories {
        google()
        mavenCentral()
    }
}

Use the 7.0.3 Android gradle plug-in. Kotlin version 1.5.31

Gradle of the module. Set the minimum API level to 21 or higher and enable jetpack compose. Also set the version of the kotlin compiler plug-in.

apply plugin: 'kotlin-android' // 沿用开头的设置

android {
    compileSdkVersion 30
    buildToolsVersion "30.0.2"
    
    defaultConfig {
        minSdkVersion 21
        // ...
    }
    buildFeatures {
        // 启用 Jetpack Compose
        compose true
    }

    kotlinOptions {
        jvmTarget = "1.8"
    }

    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }

    compoSEOptions {
        kotlinCompilerExtensionVersion '1.0.1'
    }
}

rely on

    // Integration with activities
    implementation 'androidx.activity:activity-compose:1.3.1'
    // Compose Material Design
    implementation 'androidx.compose.material:material:1.0.1'
    // Animations
    implementation 'androidx.compose.animation:animation:1.0.1'
    // Tooling support (Previews,etc.)
    implementation 'androidx.compose.ui:ui-tooling:1.0.1'
    // Integration with viewmodels
    implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:1.0.0-alpha07'
    // UI Tests
    androidTestImplementation 'androidx.compose.ui:ui-test-junit4:1.0.1'

Build. Execution, deployment - build tools - gradle - gradle JDK of as select jre11 from as

After setting the gradle, create a new activity to try.

// ComposeGuideAct.kt
import android.os.Bundle
import androidx.activity.compose.setContent
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.layout.Column
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview

class ComposeGuideAct : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            GuidePage()
        }
    }
}

@Composable
private fun GuidePage() {
    Column {
        Text(text = "Compose 示例",color = Color.Yellow)
        Text(text = "an.rustfisher.com",color = Color.Yellow)
        ShowHello(name = "小明")
        ShowHello(name = "小强")
    }
}

@Composable
private fun ShowHello(name: String) {
    Text(text = "Hi $name",color = Color.Cyan)
}

Use setcontent in oncreate and pass in a composable function guidepage () with @ composable annotation. Showhello, column and text are used in guidepage (). They are composable functions.

For the guidepage() and showhello functions, note:

Don't forget to register this activity in the manifest. You can see the effect when running. So far, we can say that compose has been introduced into the existing project.

You can add a preview to compose and use the annotation @ preview

Based on the above, add Preview settings

@Preview("guide")
@Preview("guide - big",fontScale = 1.2f)
@Composable
fun PreviewPost() {
    GuidePage()
}

Add 2 previews named "guide" and "Guide - big" respectively. The latter makes the font a little bigger.

The previewpost () method uses the guidepage () we defined earlier. Guidepage () is also the code in actual work.

The method that needs to be previewed also needs to add @ composable annotation

Android studio Preview

The preview interface can also be run directly on the mobile phone

To introduce compose into an existing project, you need to set gradle. For old projects, changes are relatively large. Even some code has to be changed.

Composable functions can be annotated with @ composable. You can preview directly with as.