Android Jetpack Compose学习—— Jetpack compose入门

Posted 2021-07-28 yuxiyu!

Jetpack compose简介

Jetpack compose是Google推出的用于构建原生android UI的一个工具包，它使用了大量的Kotlin语言特性，其开发方式与Flutter很类似，可以在很大程度上简化Android UI的开发。

目前（2021年5月31日）Jetpack compose的版本为Beta版，还未发布1.0正式版。

需要注意的是：只能使用Kotlin语言来做基于Jetpack compose的开发

Jetpack compose起步

目前（2021年5月31日），要在Android项目中使用Jetpack compose来开发原生UI，必须使用Android Studio Canary版本，在这里可以下载到Canary版本。

要想在Android项目中使用Jetpack compose，需要如下两个步骤（确保已经创建了基于Kotlin的Android工程）：

1. 在项目根目录下的build.gradle文件中定义compose版本：

buildscript {
    ext.kotlin_version = '1.4.31'
    ext.compose_version = '1.0.0-beta03'

    ...
}

2. 在module根目录下的build.gradle文件中加入如下配置（注意应用的最低API级别为21）：

plugins {
    id 'com.android.application'
    id 'kotlin-android'
    id 'org.jetbrains.kotlin.android'     // 1
}


android {
	
	...

	defaultConfig {
		...
        minSdkVersion 21 
    }
    
	buildFeatures {           // 2
        compose true
    }

    composeOptions {        // 3
        kotlinCompilerVersion kotlin_version
        kotlinCompilerExtensionVersion compose_version
    }
}

dependencies {    // 4 引入Jetpack compose相关依赖库
	implementation "androidx.compose.ui:ui:$compose_version"
    // Tooling support (Previews, etc.)
    implementation "androidx.compose.ui:ui-tooling:$compose_version"
    // Foundation (Border, Background, Box, Image, Scroll, shapes, animations, etc.)
    implementation "androidx.compose.foundation:foundation:$compose_version"
    // Material Design
    implementation "androidx.compose.material:material:$compose_version"
    // Material design icons
    implementation "androidx.compose.material:material-icons-core:$compose_version"
    implementation "androidx.compose.material:material-icons-extended:$compose_version"
    // Integration with observables
    implementation "androidx.compose.runtime:runtime-livedata:$compose_version"
    implementation "androidx.compose.runtime:runtime-rxjava2:$compose_version"

    // UI Tests
    androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_version"
	
	implementation "androidx.activity:activity-compose:1.3.0-alpha05"
}

一个最简单的Jetpack compose程序

下面的代码展示了一个最简单的使用Jetpack compose开发的UI界面：

import android.os.Bundle
import androidx.activity.compose.setContent
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.material.Text

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Text("hello world")
        }
    }
}

上面的代码运行在手机上如下图所示：

可以看到Jetpack compose完全抛弃了之前我们使用的XML开发布局的那一套，完全使用Kotlin代码即可开发UI了。

本篇暂时记录到此，后续会继续记录更多关于Jetpack compose的知识点。