Android全新UI程式設計 - Jetpack Compose 超詳細教學

1. 簡介

Jetpack Compose是在2019Google i/O大會上釋出的新的庫。Compose庫是用響應式程式設計的方式對View進行構建,可以用更少更直觀的程式碼，更強大的功能，能提高開發速度（這一段是谷歌自己說的）。說實話，View/Layout的模式對安卓工程師來說太過於熟悉，對於學習曲線陡峭的Jetpack Compose能不能很好的普及還是有所擔心。

因為Jetpack Compose的內容比較多，我會分成多個文章來進行介紹。內容包括常用UI元件的使用，Flow和Compose的結合使用，以及如何構建MVVM應用。還有，Compose的API還沒有完全的確定下來，如果有API的修改，我也會對文章進行修訂，所以敬請放心。

第1彈將會介紹如何建立Compose應用以及基本註解，Compose方法的使用。好了，閒話不多說，開整!

2. 教學

2.1 建立新的專案或匯入庫

Jetpack Compose是從Android Studio 4.2開始支援的，所以需要通過4.2(現在是canary版本)建立新的專案或者新增匯入庫。這裡按照建立新的專案來進行介紹。

根據上圖所示，在建立新的專案時需要選擇Empty Compose Activity。

此時模組中的build.gradle檔案會新增下列的庫的依賴。

dependencies {
    ...
    implementation 'androidx.ui:ui-layout:"${compose_version}"'
    implementation 'androidx.ui:ui-material:"${compose_version}"'
    implementation 'androidx.ui:ui-tooling:"${compose_version}"'
    ...
}

還有在模組的build.gradle檔案中新增下列的設定。

android {
...
 buildFeatures {
 compose true
 }
 composeOptions {
 kotlinCompilerExtensionVersion "${compose_version}"
 kotlinCompilerVersion "1.3.70-dev-withExperimentalGoogleExtensions-20200424"
 }
}

2.2 UI相關

2.2.1 @Compose

所有關於構建View的方法都必須新增@Compose的註解才可以。並且@Compose跟協程的Suspend的使用方法比較類似,被@Compose的註解的方法只能在同樣被@Comopse註解的方法中才能被呼叫。

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

2.2.2 @Preview

加上@Preview註解的方法可以在不執行App的情況下就可以確認佈局的情況。

@Preview的註解中比較常用的引數如下：

name: String: 為該Preview命名，該名字會在佈局預覽中顯示。
showBackground: Boolean: 是否顯示背景，true為顯示。
backgroundColor: Long: 設定背景的顏色。
showDecoration: Boolean: 是否顯示Statusbar和Toolbar，true為顯示。
group: String: 為該Preview設定group名字，可以在UI中以group為單位顯示。
fontScale: Float: 可以在預覽中對字型放大，範圍是從0.01。
widthDp: Int: 在Compose中渲染的最大寬度，單位為dp。
heightDp: Int: 在Compose中渲染的最大高度，單位為dp。

上面的引數都是可選引數，還有像背景設定等的引數並不是對實際的App進行設定，只是對Preview中的背景進行設定，為了更容易看清佈局。

@Preview(showBackground = true, name = "Home UI", showDecoration = true)
@Composable
fun DefaultPreview() {
 MyApplicationTheme {
 Greeting("Android")
 }
}

在IDE的右上角有Code，Split,Design三個選項。分別是隻顯示程式碼，同時顯示程式碼和佈局和只顯示佈局。
當更改跟UI相關的程式碼時，會顯示如下圖的一個橫條通知，點選Build&Refresh即可更新顯示所更改程式碼的UI。

2.2.3 setContent

setContent的作用是和zaiLayout/View中的setContentView是一樣的。
setContent的方法也是有@Compose註解的方法。所以，在setContent中寫入關於UI的@Compopse方法，即可在Activity中顯示。

override fun onCreate(savedInstanceState: Bundle?) {
 super.onCreate(savedInstanceState)
 setContent {
 JetpackComposeDemoTheme {
 Greeting("Android")
 }
 }
 }

2.2.4 *Theme

在建立新的Compose專案時會自動建立一個專案名+Theme的@Compose方法。我們可以通過更改顏色來完成對主題顏色的設定。生成的Theme方法的程式碼如下。

private val DarkColorPalette = darkColorPalette(
 primary = purple200,
 primaryVariant = purple700,
 secondary = teal200
)
 private val LightColorPalette = lightColorPalette(
 primary = purple500,
 primaryVariant = purple700,
 secondary = teal200
 /* Other default colors to override
 background = Color.White,
 surface = Color.White,
 onPrimary = Color.White,
 onSecondary = Color.Black,
 onBackground = Color.Black,
 onSurface = Color.Black,
 */
)
 @Composable
fun JetpackComposeDemoTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable() () -> Unit) {
 val colors = if (darkTheme) {
 DarkColorPalette
 } else {
 LightColorPalette
 }
 MaterialTheme(
 colors = colors,
 typography = typography,
 shapes = shapes,
 content = content
 )
}

Theme方法中有正常主題和Dark主題的顏色設定，裡面還有關於MeterialTheme的設定。

關於Theme方法的用法如下。

setContent {
 JetpackComposeDemoTheme {
 Greeting("Android")
 }
 }

在JetpackComposeDemoTheme裡面的所有UI方法都會應用上述主題中指定的顏色。

2.2.4 Modifier

Modifier是各個Compose的UI元件一定會用到的一個類。它是被用於設定UI的擺放位置，padding等資訊的類。關於Modifier相關的設定實在是太多，在這裡只介紹會經常用到的。

padding 設定各個UI的padding。padding的過載的方法一共有四個。

Modifier.padding(10.dp) // 給上下左右設定成同一個值
Modifier.padding(10.dp, 11.dp, 12.dp, 13.dp) // 分別為上下左右設值
Modifier.padding(10.dp, 11.dp) // 分別為上下和左右設值
Modifier.padding(InnerPadding(10.dp, 11.dp, 12.dp, 13.dp))// 分別為上下左右設值

plus 可以把其他的Modifier加入到當前的Modifier中。

Modifier.plus(otherModifier) // 把otherModifier的資訊加入到現有的modifier中

fillMaxHeight,fillMaxWidth,fillMaxSize 類似於match_parent,填充整個父layout。

Modifier.fillMaxHeight() // 填充整個高度

width,heigh,size 設定Content的寬度和高度。

Modifier.width(2.dp) // 設定寬度
Modifier.height(3.dp)  // 設定高度
Modifier.size(4.dp, 5.dp) // 設定高度和寬度 複製程式碼

widthIn, heightIn, sizeIn 設定Content的寬度和高度的最大值和最小值。

Modifier.widthIn(2.dp) // 設定最大寬度
Modifier.heightIn(3.dp) // 設定最大高度
Modifier.sizeIn(4.dp, 5.dp, 6.dp, 7.dp) // 設定最大最小的寬度和高度

gravity 在Column中元素的位置。

Modifier.gravity(Alignment.CenterHorizontally) // 橫向居中
Modifier.gravity(Alignment.Start) // 橫向居左
Modifier.gravity(Alignment.End) // 橫向居右

rtl, ltr 開始佈局UI的方向。

Modifier.rtl  // 從右到左
Modifier.ltr  // 從左到右 複製程式碼`</pre>

Modifier的方法都返回Modifier的範例的鏈式呼叫，所以只要連續呼叫想要使用的方法即可。

<pre>`@Composable
fun Greeting(name: String) {
 Text(text = "Hello $name!", modifier = Modifier.padding(20.dp).fillMaxSize())
}

2.2.5 Column，Row

正如其名字一樣，Column和Row可以理解為在View/Layout體系中的縱向和橫向的ViewGroup。
需要傳入的引數一共有四個。

Modifier 用上述的方法傳入已經按需求設定好的Modifier即可。
Arrangement.Horizontal, Arrangement.Vertical 需要給Row傳入Arrangement.Horizontal，為Column傳入Arrangement.Vertical。這些值決定如何佈置內部UI元件。
可傳入的值為Center, Start, End, SpaceEvenly, SpaceBetween, SpaceAround。重點解釋一下SpaceEvenly, SpaceBetween, SpaceAround。

SpaceEvenly：各個元素間的空隙為等比例。

SpaceBetween：第一元素前和最後一個元素之後沒有空隙，所有空隙都按等比例放入各個元素之間。

SpaceAround：把整體中一半的空隙平分的放入第一元素前和最後一個元素之後，剩餘的一半等比例的放入各個元素之間。

Alignment.Vertical, Alignment.Horizontal 需要給Row傳入Alignment.Vertical，為Column傳入Alignment.Horizontal。使用方法和Modifier的gravity中傳入引數的用法是一樣的，這裡就略過了。
@Composable ColumnScope.() -> Unit 需要傳入標有@Compose的UI方法。但是這裡我們會有lamda函數的寫法來實現。

整體程式碼如下。

Column {
 Row(modifier = Modifier.ltr.fillMaxWidth(),horizontalArrangement = Arrangement.SpaceAround, verticalGravity = Alignment.Top) {
 // ..,...
 }