阅读 1042

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、准备:

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

2、创建

79682-t85ih1qucc.png

40166-1mc2q5ste0p.png

21249-mebolk34gx.png

09413-t99i36naf0i.png

中间如果有提示更新插件,就更新一下,更新完记得重启AndroidStudio。

以上是通过指定创建Empty Compose Activity项目生成的代码,一句也没改。这个项目可以直接运行。

你可以通过随意修改代码中的文案,然后保存,查看右边的preview界面是否有更新,以及跑在手机里的界面是否实时更新了。

已有项目改造

1、准备:

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

原本以为不用升级AndroidStudio就可以,但是目前Compose只在预览版提供支持,很多功能,比如实时预览功能是必须要AndroidStudio支持的,所以需要更新一下。

2、添加依赖

修改build.gradleComposekotlin相关的配置。

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"
    }
复制代码

3、代码修改

假设原有代码如下:

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

文章分类
Android
文章标签