Android現有工程使用Compose
看了Compose的示例工程後，我們也想使用Compose。基於目前情況，在現有工程基礎上新增Compose功能。
引入Compose
首先我們安裝 Android Studio Arctic Fox 或更高版本。
專案的配置gradle/wrapper/gradle-wrapper.properties
distributionUrl=https\://services.gradle.org/distributions/gradle-7.1.1-bin.zip
專案的gradle
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()
}
}
使用7.0.3 Android Gradle 外掛。kotlin版本1.5.31
模組的gradle。最低API級別設定為21或更高，啟用 Jetpack Compose。另外還要設定 Kotlin 編譯器外掛的版本。
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'
}
}
依賴
// 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'
as的 Build. Execution, Deployment - Build Tools - Gradle - Gradle JDk 選擇as自帶的Jre11
使用Compose
新Activity
前面的gradle設定完畢，新建一個activity來試一下。
// 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)
}
onCreate中使用setContent，傳入一個帶有@Composable註解的可組合函式GuidePage()。
而GuidePage()裡面又使用了ShowHello、Column和Text。它們都是可組合函式。
對於GuidePage()和ShowHello函式，需要注意：
- 它們帶有
@Composable註解。所有的可組合函式都必須帶有此註解。它能告訴Compose編譯器，把這資料轉換為介面 - 可組合函式可以接受一些引數，這些引數可進行邏輯處理。上面程式碼裡，
ShowHello(name: String)接受一個name:String - 函式可以在介面中顯示文字。呼叫
Text()可組合函式，該函式實際上會建立文字介面元素。可組合函式通過呼叫其他可組合函式來發出介面層次結構 - 函式不會返回任何內容。發出介面的 Compose 函式不需要返回任何內容，因為它們描述所需的螢幕狀態，而不是構造介面微件。
別忘了在manifest裡註冊這個activity。執行起來可以看到效果。
至此我們可以說現有專案已經引入了Compose。
新增預覽
可以給Compose新增預覽，使用註解@Preview
在上面的基礎上，新增預覽設定
@Preview("guide")
@Preview("guide - big",fontScale = 1.2f)
@Composable
fun PreviewPost() {
GuidePage()
}
新增2個預覽，分別起名“guide”和“guide - big”。後者把字型調大一點。
PreviewPost()方法裡使用了我們之前定義的GuidePage()。GuidePage()也是實際工作中的程式碼。
需要預覽的方法，也需要新增@Composable註解
Android Studio 預覽效果
預覽介面也可以直接執行到手機上
小結
要在現有工程中引入Compose，需要對gradle進行設定。對老舊工程來說，變動比較大。甚至某些程式碼也要跟著改。
可組合函式使用@Composable註解。可以用as直接預覽。