Jetpack Compose 系列-環境搭建和工具介紹！

前言

又有很久沒更新原創文章了，由於換工做的緣由，年後這2個月，不多有時間來寫文章，都在複習和準備面試，也拿到了幾個不錯的offer。如今新工做塵埃落定，趁這幾天的空閒時間，把拖更的文章補起來。去年年終總結的時候，給本身今年定的幾個學習和寫文章的方向是Kotlin、Jetpack、和Compose。因爲3月Jetpack Compose beta版的正式發佈，加上Google官方的4周挑戰遊戲，爲Compose帶來了很多熱度。我也是一直很是看好Jetpack Compose的，如今確實也是學習Jetpack Compose 的一個好時機，所以，今天就率先開啓-Jetpack Compose系列。

Jetpack Compose 是什麼?

Jetpack Compose是Google推出的一個新的UI工具包，旨在幫助開發者更快、更輕鬆地在Android 平臺上構建Native應用。Jetpack compose是一個聲明式的UI框架，它提供了現代化的聲明式Kotlin API（取代Android 傳統的xml佈局），可幫助開發者用更少的代碼構建美觀、響應迅速的應用程序。

這段官方的描述不是很好理解，其中有一個詞：聲明式 ，那麼什麼是聲明式？

要搞懂什麼是聲明式，咱們先看看另外一個概念：命令式。這也是咱們Android Native 開發一直使用的方式。假若有這樣一個場景：咱們要在界面上顯示一個文本，用 **命令式**和聲明式實現有和區別？

命令式方式：

• 一、首先須要一個xml文件，裏面有一個TextView

...
 <TextView
        android:id="@+id/my_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

• 二、經過findViewById獲取到TextView控件

TextView textView = findViewById<TextView>(R.id.my_text);

• 三、經過setText()更新數據，顯示到界面

textView.setText(content)

聲明式方式：

而若是用Compose的聲明式的方式，如何實現？很簡單，一步到位：

@Composable
fun ShowText(content: String){
    Text(text = content)
}

爲何第一種方式是命令式，第二種方式是聲明式？主要體如今界面更新上，命令式下：數據更新時，Java代碼手動調用xml組件引用來更新界面，也就是Java代碼命令xml界面更新，這就是命令方式。而聲明式呢？只描述界面，當數據狀態更新時，自動更新界面，這就是聲明式。

簡短總結：

• 命令式是操做界面
• 聲明式是描述界面

除了Jetpack Compose ，Flutter，React-Native，Swift-UI 都是聲明式的，這也是如今的一種趨勢。

Jetpack Compose 開發環境準備

工欲善其事，必先利其器，Android Studio對Jetpack Compose 有很好的支持，爲了更好的體驗，咱們下載最新的Android Studio 預覽版 Canary版本，最新版爲Arctic Fox(2020.3.1) Canary 14，下載地址爲：https://developer.android.com...

下載以後，直接安裝便可，若是是Mac版本的話，下載完，解壓就能夠直接使用。通常的話，建議小夥伴們裝2個版本的Android Studio，一個是預覽版，用來探索和嘗試一些新技術和新功能，一個穩定版，用來平常的開發。反正我是這樣的。

Android Studio 準備好以後，咱們就能夠開始Jetpack Compose 項目建立了。

首先點擊 Projects -> New Project 導航到模板選擇界面，這個界面多了一個Empty Compose Activity 模板，就選擇這個，它會默認幫咱們配置好Jetpack Compose 須要的一些配置和庫。

點擊Next，配置項目名稱、報名、保存路徑等配置，

點擊Finish 就行了。一個最簡單Jetpack Compose Hello World應用就出來了。

這種建立新項目的方式最簡單，由於只須要選擇Jetpack Compose 模板，其餘的已幫咱們自動配置。Jetpack Compose 是支持和已有的老項目混合的，你只要添加對Jetpack Compose的支持，就能2種混合開發。主要是在兩個build.gradle中添加配置：

根目錄build.gralde中：

確保 Kotlin 的版本是 1.4.30 或更高版本：

classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.4.32"

app目錄下的gradle 配置：

有以下幾項須要配置：

android {

    // 一、確保最低sdk版本爲21或者更高 
    defaultConfig {
        ...
        minSdkVersion 21
    }

   
    buildFeatures {
        // 二、開啓 jetpack compose 支持        
        compose true
    }
    ...

    // 三、設置java 和 kotlin 編譯器版本爲java8
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }

    kotlinOptions {
        jvmTarget = "1.8"
    }

    // 四、添加kotlin編譯器擴展版本
    composeOptions {
        kotlinCompilerExtensionVersion '1.0.0-beta01'
    }
}

而後還要添加jetpack Compose 開發相關的一些依賴庫：

dependencies {
    implementation 'androidx.compose.ui:ui:1.0.0-beta01'
    // 工具支持庫
    implementation 'androidx.compose.ui:ui-tooling:1.0.0-beta01'
    // Compose基礎庫，包含各類compose組件 (Border, Background, Box, Image, Scroll, shapes, animations, etc.)
    implementation 'androidx.compose.foundation:foundation:1.0.0-beta01'
    // Material Design 庫
    implementation 'androidx.compose.material:material:1.0.0-beta01'
    // Material design 圖標庫
    implementation 'androidx.compose.material:material-icons-core:1.0.0-beta01'
    implementation 'androidx.compose.material:material-icons-extended:1.0.0-beta01'
    //  activities 整合庫
    implementation 'androidx.activity:activity-compose:1.3.0-alpha03'
    // ViewModels整合庫
    implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:1.0.0-alpha02'
    // observables 整合庫
    implementation 'androidx.compose.runtime:runtime-livedata:1.0.0-beta01'
    implementation 'androidx.compose.runtime:runtime-rxjava2:1.0.0-beta01'

    // UI 測試
    androidTestImplementation 'androidx.compose.ui:ui-test-junit4:1.0.0-beta01'
}

這些都是可能用到的庫，能夠選擇性添加，那個幾個整合庫是配合Jetpack中對應的那幾個庫，如activitys、viewmodel等。

以上就能添加對Jetpack Compose 的支持。

Compose代碼及工具介紹

先來看看代碼：

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Surface(color = MaterialTheme.colors.background) {
                Greeting("Android")
            }
        }
    }
}

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

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

其中，setContent()再也不是之前的傳遞一個View或者是layout，而是一個組合函數也就是一個Compose組件，帶有@Composable的Kotlin函數就是就是一個Compose組件，通常爲了跟普通函數區分，首字母大寫，所以上面的Greeting和DefaultPreview 都是一個Compose組件。

預覽工具

咱們之前寫xml界面時，右邊都有可預覽的界面，那麼在Compose中，如何預覽Compose界面(組件)?只須要在Compose組件上添加@Preview註解便可預覽，而後面板右邊會出現預覽區域：

預覽面板中可添加多個預覽，同一個文件的多個預覽都會顯示在預覽面板中，好比咱們再增長一個：

@Preview(showBackground = true)
@Composable
fun OtherPreview() {
    Text("你們好！我是西哥！")
}

效果以下，預覽面板中出現兩個預覽：

此外，Preview 註解還能添加一些配置參數，好比，預覽的大小、顏色、是否顯示背景等等。以下所示：

@Preview(
        showBackground = true,
        widthDp = 200,
        heightDp = 420,
        backgroundColor = 0x1e7d73
    )
    @Composable
    fun DefaultPreview() {
        Greeting("Android")
    }
}

預覽效果以下：

@Preview 還有其餘一些參數可配置，好比分組預覽，更改預覽名字等等，有興趣的能夠試試其餘幾個參數:

@Repeatable
annotation class Preview(
   val name: String = "",
   val group: String = "",
   @IntRange(from = 1) val apiLevel: Int = -1,
   // TODO(mount): Make this Dp when they are inline classes
   val widthDp: Int = -1,
   // TODO(mount): Make this Dp when they are inline classes
   val heightDp: Int = -1,
   val locale: String = "",
   @FloatRange(from = 0.01) val fontScale: Float = 1f,
   val showSystemUi: Boolean = false,
   val showBackground: Boolean = false,
   val backgroundColor: Long = 0,
   @UiMode val uiMode: Int = 0,
   @Device val device: String = Devices.DEFAULT
)

 每個預覽視圖右上角有2個小按鈕：
 
 

左邊爲開啓交互模式按鈕，右邊爲發佈預覽按鈕。

交互模式：開啓交互模式後，能夠像在設備上操做對象同樣操做，好比按鈕點擊，列表滑動，動畫執行，輸入框輸入等。

好比，以下代碼，添加一個按鈕、一個輸入框、一個switch按鈕：

@Preview(showBackground = true)
    @Composable
    fun DefaultPreview() {
        var text by remember {
            mutableStateOf("西哥")
        }
        var isChecked by remember {
            mutableStateOf(false)
        }
        Column {
            Button(
                onClick = { }
            ) {
                Text("點擊我")
            }

            TextField(
                value = text,
                onValueChange = { text = it },
                label = { Text("Label") }
            )
            Switch(
                checked = isChecked,
                onCheckedChange = { isChecked = it }
            )
        }

    }

預覽效果：

交互模式效果：

試了一下，在交互模式中，好像輸入框不能輸入和清楚，不知道是bug仍是沒弄對。

發佈預覽：

發佈預覽能夠將組建發佈到設備上查看效果，注意是只發布當前預覽的組件，不是整個界面。

總結

以上就是本文的所有內容，本文介紹了Jetpack Compose開發的環境集成和一些工具的使用，如今咱們就能夠開始Jetpack Compose之旅了！下一篇文章將從Compose 組件 Text 開始！敬請期待！

我是西哥，歡迎關注個人公衆號： 「技術最TOP」，乾貨文章第一時間送閱！