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语法相关文章，敬请期待。