Android全新UI編程 - Jetpack Compose 超詳細教程

本文轉載自查看原文 2021-05-26 17:43 417 jetpack/ Android

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) {
 // ..,...
 }