Android剛出爐的「 Compose 」UI框架你用了嗎？

一直被吐槽打包慢的AndroidStudio終於發大招了！！！

Compose

官方定義：

Jetpack Compose 是用於構建原生界面的新款 Android 工具包。它可簡化並加快 Android 上的界面開發。使用更少的代碼、強大的工具和直觀的 Kotlin API，快速讓應用生動而精彩。

Compose是谷歌在2021年大力推行的UI框架，做爲Jetpack包提供功能。

最主要功能是將UI代碼化——去XML

另外一個讓人欣喜的功能——實時可見代碼修改

此功能一出，Android的同窗要狂喜了，終於能夠拋棄十幾分鍾打一個包的痛苦了。

固然，獲得老是要付出的，這裏須要付出的代價是：

1. 語言限制：Compose僅支持kotlin語言。
2. 語法重定義：去掉原有的XML佈局方式，所有改成代碼操控UI。

雖然打包時間減小了，可是新的編程模式也是須要耗費時間學習的。

別怕，幹就完事兒了。

本章主要演示兩種建立Compose應用的方式。

• 一種是全新的項目，全新的Android Studio，一步式建立。

• 第二種是在現有項目上添加Compose組件。

一步式建立

一、準備：

1. 最新版AndroidStudio
2. 最新版kotlin

二、建立

中間若是有提示更新插件，就更新一下，更新完記得重啓AndroidStudio。

以上是經過指定建立Empty Compose Activity項目生成的代碼，一句也沒改。這個項目能夠直接運行。

你能夠經過隨意修改代碼中的文案，而後保存，查看右邊的preview界面是否有更新，以及跑在手機裏的界面是否實時更新了。

已有項目改造

一、準備：

1. 最新版AndroidStudio
2. 1.4.32或以上版本kotlin

本來覺得不用升級AndroidStudio就能夠，可是目前Compose只在預覽版提供支持，不少功能，好比實時預覽功能是必需要AndroidStudio支持的，因此須要更新一下。

二、添加依賴

修改build.gradle與Compose、kotlin相關的配置。

app文件夾下的build.gradle文件裏添加以下依賴

android {
    buildFeatures {
        // Enables Jetpack Compose for this module
        compose = true
    }

    // Set both the Java and Kotlin compilers to target Java 8.
    compileOptions {
        sourceCompatibility = JavaVersion.VERSION_1_8
        targetCompatibility = JavaVersion.VERSION_1_8
    }

    kotlinOptions {
        jvmTarget = "1.8"
        useIR = true
    }

    composeOptions {
        kotlinCompilerVersion = "1.4.32"
        kotlinCompilerExtensionVersion = "1.0.0-beta07"
    }
}

dependencies {

    //composei相關依賴
    implementation("androidx.compose.ui:ui:1.0.0-beta07")
    // Tooling support (Previews, etc.)
    implementation("androidx.compose.ui:ui-tooling:1.0.0-beta07")
    // Foundation (Border, Background, Box, Image, Scroll, shapes, animations, etc.)
    implementation("androidx.compose.foundation:foundation:1.0.0-beta07")
    // Material Design
    implementation("androidx.compose.material:material:1.0.0-beta07")
    // Material design icons
    implementation("androidx.compose.material:material-icons-core:1.0.0-beta07")
    implementation("androidx.compose.material:material-icons-extended:1.0.0-beta07")
    // Integration with observables
    implementation("androidx.compose.runtime:runtime-livedata:1.0.0-beta07")
    implementation("androidx.compose.runtime:runtime-rxjava2:1.0.0-beta07")
    implementation 'androidx.activity:activity-compose:1.3.0-alpha06'

    // UI Tests
    androidTestImplementation("androidx.compose.ui:ui-test-junit4:1.0.0-beta07")


}
複製代碼

項目根目錄下的build.gradle文件下的kotlin版本要與前面的kotlinCompilerVersion配置一致，版本大於或等於1.4.32

根目錄下build.gradle文件：

dependencies {
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.4.32"
    }
複製代碼

三、代碼修改

假設原有代碼以下：

package com.example.maomao.democomposefromexisted

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
}
複製代碼

修改後：

package com.example.maomao.democomposefromexisted

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.activity.compose.setContent
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview
import com.example.maomao.democomposedefault.ui.theme.DemoComposeDefaultTheme

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
//        setContentView(R.layout.activity_main)
        setContent {
            DemoComposeDefaultTheme {
                // A surface container using the 'background' color from the theme
                Surface(color = MaterialTheme.colors.background) {
                    Greeting("Android")
                }
            }
        }
    }

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

    @Preview(showBackground = true)
    @Composable
    fun DefaultPreview() {
        DemoComposeDefaultTheme {
            Greeting("Android")
        }
    }
}
複製代碼

修改完代碼，右側會有Build & Refresh的提醒，點擊刷新preview界面，便可看到預覽。

運行查看結果。

PS：若是有報錯DemoComposeDefaultTheme找不到，那就走前面的一步式建立建立Empty Compose Activity項目，把裏面的DemoComposeDefaultTheme相關的累拷貝進你原有項目。

到目前爲止，這只是初步讓項目跑起來，還沒到真正的邏輯開發。

只是體驗Compose新功能的看客，到這裏能夠結束了。

若是是真正須要項目遷移，那就要提早準備好kotlin語法基礎，和Compose代碼佈局的語法。而後才能上手開發。

後續有時間會更新Compose語法相關文章，敬請期待。