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.