Android 集成 Jetpack Compose

前言

Jetpack Compose，属于Android原生的声明式UI框架，个人觉得和Flutter有70%的相似程度，所以使用过Flutter的开发者会更容易上手，本篇就在原生项目基础上，集成Jetpack Compose。

步骤

确保你的项目添加了Kotlin

• 项目根目录的build.gradle文件中，添加kotlin版本以及依赖（如果你已经配置，则可以跳过）

buildscript {
    ext.kotlin_version = '1.7.10'
    
    dependencies {
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
    }
}

添加Compose配置

• app可运行模块的build.gradle文件中，添加Compose配置

apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'

android {
    packagingOptions {
        //Compose需要的配置
        resources {
            excludes += '/META-INF/{AL2.0,LGPL2.1}'
        }
    }
    
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
}

• 具有Compose功能的Module模块，如模块名叫：compose，打开模块的build.gradle文件，添加Compose配置以及依赖（Compose的周边库很多，示例中是Compose的基本依赖，有这些基本依赖，一个Compose页面就能编写了）

apply plugin: 'com.android.library'
apply plugin: 'kotlin-android'

    android {
        //此 module 启动 Jetpack Compose
        buildFeatures {
            compose true
        }
        
        //kotlin 相关参数配置
        kotlinOptions {
            jvmTarget = '1.8'
            //Kotlin 1.7版本删除了该属性，如果使用1.7以下版本，则需要添加这个属性
            //useIR = true
        }
    
        //Jetpack compose 相关参数配置
        composeOptions {
            kotlinCompilerExtensionVersion "1.3.0"
        }
        
        compileOptions {
            sourceCompatibility JavaVersion.VERSION_1_8
            targetCompatibility JavaVersion.VERSION_1_8
    }
        
    dependencies {
       implementation fileTree(dir: 'libs', include: ['*.jar'])
       implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
       
       //Jetpack Compose
       implementation "androidx.activity:activity-compose:1.5.1"
       implementation "androidx.compose.ui:ui:${compose_version}"
       implementation "androidx.compose.ui:ui-tooling-preview:${compose_version}"
       implementation "androidx.compose.foundation:foundation:${compose_version}"
       implementation "androidx.compose.material:material:${compose_version}"
       debugImplementation "androidx.compose.ui:ui-tooling:${compose_version}"
       debugImplementation "androidx.compose.ui:ui-test-manifest:${compose_version}"
    }
}

添加Compose页面

• 新建Activity，继承于ComponentActivity，编写一个居中"HelloWorld"文字页面

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeTestTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    Greeting("Android")
                }
            }
        }
    }
}

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    ComposeTestTheme {
        Greeting("Android")
    }
}

• AndroidManifest.xml清单文件中，配置该Activity

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="com.zh.android.composetest">

    <application
        android:allowBackup="true"
        android:dataExtractionRules="@xml/data_extraction_rules"
        android:fullBackupContent="@xml/backup_rules"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.ComposeTest"
        tools:targetApi="31">

        <activity
            android:name=".MainActivity"
            android:exported="true"
            android:label="@string/app_name"
            android:theme="@style/Theme.ComposeTest">
            
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>