Use Compose for existing Android projects

Use Compose for existing Android projects

Yes Sample project of Compose After that, we also want to use Compose. Based on the current situation, in Existing works Add Compose function based on.

Introduce Compose

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' // Follow the settings at the beginning

android {
    compileSdkVersion 30
    buildToolsVersion "30.0.2"
    
    defaultConfig {
        minSdkVersion 21
        // ...
    }
    buildFeatures {
        // Enable 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

Using Compose

New Activity

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 Example", color = Color.Yellow)
        Text(text = "an.rustfisher.com", color = Color.Yellow)
        ShowHello(name = "Xiao Ming")
        ShowHello(name = "cockroach")
    }
}

@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:

  • They are annotated with @ Composable. All Composable functions must have this annotation. It can tell the Compose compiler to convert this data into an interface
  • Composable functions can accept some parameters that can be logically processed. In the above code, showhello (name:String) accepts a name:String
  • Function can display text in the interface. Calling Text() can combine functions that actually create text interface elements. Composable functions emit the interface hierarchy by calling other composable functions
  • The function does not return anything. The Compose functions that emit the interface do not need to return anything because they describe the desired screen state rather than constructing the interface widget.

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.

Add Preview

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

Summary

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.

reference resources

Posted on Wed, 03 Nov 2021 19:55:21 -0400 by alvinshaffer