Android JetPack ComPose 開發之路 —— 集成到現有項目中

Blue0376 2022-01-07 18:37:01 阅读数:601

android jetpack compose 之路 集成

ComePose 是 JetPack 推出的 Android 及其他平臺的全新 UI 框架,拋弃 Android XML 的編寫方式,以聲明式方法開發,下面介紹如何將 Compose 集成到現有項目中。

Compose 官方地址:https://developer.android.com/jetpack/compose/documentation

集成 ComPose 需要的相關版本配置

  • IDE:Android Studio Arctic Fox 版本,官方下載地址: developer.android.com/studio ,下載最新的就可以。
  • Gradle:7.0 +
  • TargetSdk / CompileSdk:31 +
  • MinSdk:21 +
  • Kotlin:1.5.31(目前 Compose 最新穩定版本適配的 Kotlin 版本,後續隨著 ComPose 的版本增加,Kotlin 版本也會增加)
  • Compose:1.0.5(目前最新穩定版本),需要引用的庫下面詳細介紹。

集成到原有項目中

昇級對應的 Gradle 版本

  1. 打開 Project 下的 build.gradle 文件配置插件版本:
buildscript {
repositories {
google()
mavenCentral()
}
dependencies {
// Gradle 版本 7.0 +
classpath "com.android.tools.build:gradle:7.0.4"
// Kotlin 版本(對應 compose 的版本)
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.5.31"
}
}
複制代碼

配置 Module 下的 build.gradle 文件

  1. 文件最上方引入 Kotlin 插件:
plugins {
id 'com.android.application'
id 'kotlin-android'
id 'kotlin-android-extensions'
id 'kotlin-kapt'
}
複制代碼
  1. 增加 Compose 支持:
android {
buildFeatures {
//開啟 Compose 支持
compose true
}
composeOptions {
// Compose 是 Kotlin 開發的,需要配置 Kotlin 對應的編譯擴展版本
// 1.0.5 也是對應的 Compose 引用庫的版本,可以存成一個常量統一調用
kotlinCompilerExtensionVersion '1.0.5'
}
}
複制代碼
  1. 引入 ComPose 庫

首先介紹 Compose 的分包,了解後根據項目需求引入對應的庫。
結構從下到上排序,最上邊是最底層庫:

  • compile:編譯器插件
  • runtime:底層概念模型
  • uiui 相關的基礎支持
  • animation:基於 rutimeui 兩層的動畫 API 基礎支持
  • foundation:基於 ui 層封裝的更實用的組件庫比如 ScrollBox
  • material/ material3:Material2 / 3 的實現

平時開發直接引用 material 庫即可,它將包含上面的所有庫。
項目中不需要 material 設計,可引用 foundation 庫,它將包含基礎的 UI 配置。

精簡版:

dependencies {
// 將 Compose 支持預覽,類似 XML 的預覽模式,並支持 點擊、滑動等 XML 不支持的交互操作
implementation 'androidx.compose.ui:ui-tooling:1.0.5'
// Compose 庫的主體包,具體在上面介紹
implementation 'androidx.compose.material:material:1.0.5'
// 將 Activity 支持 Compose
implementation 'androidx.activity:activity-compose:1.4.0'
}
複制代碼

官方版本:

dependencies {
// Compose ui 相關的基礎支持
    implementation 'androidx.compose.ui:ui:1.0.5'
    // Compose ui 預覽
    implementation 'androidx.compose.ui:ui-tooling:1.0.5'
    // Compose 基於 ui 層封裝的更實用的組件庫比如 Scroll、Box 等
    implementation 'androidx.compose.foundation:foundation:1.0.5'
    // Compose Material Design
    implementation 'androidx.compose.material:material:1.0.5'
    // Compose Material design icons
    implementation 'androidx.compose.material:material-icons-core:1.0.5'
    implementation 'androidx.compose.material:material-icons-extended:1.0.5'
    // 將 Activity 支持 Compose
    implementation 'androidx.activity:activity-compose:1.3.1'
    // Compose ViewModels 存儲數據
    implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:1.0.0-alpha07'
    // Compose 其他集成
    implementation 'androidx.compose.runtime:runtime-livedata:1.0.5'
    implementation 'androidx.compose.runtime:runtime-rxjava2:1.0.5'
    // Compose UI Tests
    androidTestImplementation 'androidx.compose.ui:ui-test-junit4:1.0.5'
}
複制代碼

測試 Compose 是否配置成功

新建 Activity 重寫 onCreate 方法,將 setContentView(R.layout.activity_main) 替換為 setContent{},Compose 不再寫 XML 了。

class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
// 對應 XML 的 TextView
Text("Hello Compose!")
}
}
}
複制代碼

運行下項目看看是否可以順利展示吧,遇到其他問題歡迎留言一起解决。

Compose 預覽

Compose 支持預覽需要引入 implementation 'androidx.compose.ui:ui-tooling:1.0.5' 庫,上方已經引入過。
Compose 預覽需要帶 @Preview 注解的函數來預覽 View,在代碼中輸入 prev 會有提示直接生成預覽代碼(Android Studio 自帶的代碼模版)

class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
setContent {
HelloView()
}
}
// @Composable 注解代錶一個 Compose View
@Composable
fun HelloView() {
Text("Hello Compose!")
}
//預覽
@Preview
@Composable
fun ComposePreView() {
HelloView()
}
}
複制代碼

目前預覽還不支持類似 XML 自動更新的功能,需要更新時點擊右側的刷新按鈕。
點擊左側的運行按鈕可以講次預覽的界面單獨運行在手機上,對於大型項目構建耗時是個很方便的功能。

image.png

創建新的 Android Compose 項目

Android Studio -> File -> New -> New Project 選擇 Compose Activity

image.png

版权声明:本文为[Blue0376]所创,转载请带上原文链接,感谢。 https://gsmany.com/2022/01/202201071837013924.html