关于jetpack:Jetpack-Compose-系列环境搭建和工具介绍

41次阅读

共计 5509 个字符，预计需要花费 14 分钟才能阅读完成。

前言

又有好久没更新原创文章了，因为换工作的起因，年后这 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 开发始终应用的形式。 如果有这样一个场景：咱们要在界面上显示一个文本，用 ** 命令式 ** 和申明式实现有和区别？

命令式形式：

  • 1、首先须要一个 xml 文件，外面有一个 TextView
 ...
 <TextView
        android:id="@+id/my_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
  • 2、通过 findViewById 获取到 TextView 控件
TextView textView = findViewById<TextView>(R.id.my_text);
  • 3、通过 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 {

    // 1、确保最低 sdk 版本为 21 或者更高 
    defaultConfig {
        ...
        minSdkVersion 21
    }

   
    buildFeatures {
        // 2、开启 jetpack compose 反对        
        compose true
    }
    ...

    // 3、设置 java 和 kotlin 编译器版本为 java8
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }

    kotlinOptions {jvmTarget = "1.8"}

    // 4、增加 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」，干货文章第一工夫送阅！

正文完
jetpack
发表至： jetpack
2021-04-25
 0
关于jetpack:Jetpack-Compose-系列环境搭建和工具介绍
关于jetpack:Jetpack-寻英贴发起寻找-50-名-Jetpack-爱好者
关于jetpack:Jetpack探索之旅Jetpack-Compose开发应用指南从入门到精通
关于jetpack:Jetpack架构演化初步运用flow附加经典案例