Jetpack Compose 开发环境

Jetpack Compose是采用了声明式UI方式，用于构建原生Android界面的新的工具包。

一：下载最新AndroidStudio的版本

想要进行Jetpack Compose的开发，需要用Android Studio的最新的Canary预览版。当您搭配使用 Android Studio 和 Jetpack Compose 开发应用时，可以从智能编辑器功能中受益，这些功能包括“新建项目”模板和即时预览 Compose 界面等。

二：创建新的Jetpack Compose示例应用

下载完AndroidStudio之后，可以通过 AndroidStudio->File->New Project-> Empty Compose Activity->Next->Finish。 注意：Compose支持的最小的Android API版本是21 注意：这种方式创建的新的Jetpack Compose应用不需要我们再手动去配置，AS已经自动帮我们添加配置支持

三：现有项目如何支持Jetpack Compose

如果您想要在现有的项目中使用Jetpack Compose，则需要添加如下的配置和依赖

1.配置Kotlin

确保您在项目中的使用的是Kotlin 1.4.30，在app的build.gradle中添加插件

plugins {
  id 'org.jetbrains.kotlin.android' version '1.4.30'
}

2.配置Gradle

应用的最低的API版本需要>=21, 并在app的build.gradle中启用Jetpack Compose,如下

android {
    defaultConfig {
        ...
        minSdkVersion 21
    }

    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"
    }

    composeOptions {
        kotlinCompilerExtensionVersion '1.0.0-beta01'
    }
}

3.添加Jetpack Compose依赖

需要在app的build.gradle里添加Jetpack Compose的依赖

dependencies {
    implementation 'androidx.compose.ui:ui:1.0.0-beta01'
    // Tooling support (Previews, etc.)
    implementation 'androidx.compose.ui:ui-tooling:1.0.0-beta01'
    // Foundation (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 icons
    implementation 'androidx.compose.material:material-icons-core:1.0.0-beta01'
    implementation 'androidx.compose.material:material-icons-extended:1.0.0-beta01'
    // Integration with activities
    implementation 'androidx.activity:activity-compose:1.3.0-alpha03'
    // Integration with ViewModels
    implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:1.0.0-alpha02'
    // Integration with observables
    implementation 'androidx.compose.runtime:runtime-livedata:1.0.0-beta01'
    implementation 'androidx.compose.runtime:runtime-rxjava2:1.0.0-beta01'

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

四：Compose的一些工具简介

我们知道，传统的Android开发，我们会通过写xml布局文件。并通过AS上去预览我们的UI布局。而现在Compose也有自己预览布局的方式。

1.@Preview 预览的功能

1.可组合项预览

可组合项由函数定义，并使用@Composable进行注解。比如我们这里定义了组合项tabItem。tabItem是竖直布局，上面是icon图标，下面是text文本。

@Composable
fun tabItem(){
    Column{
     Icon(vectorResource(id = R.drawable.ic_launcher_background))
     Text(text = "哈哈哈")
   }
}

如果我们需要预览该可组合项，需要再创建一个使用 @Composable 和 @Preview 进行注解的可组合项，并发出您最初创建的可组合项：

@Preview
@Composable
fun tabItemPreview() {
    tabItem()
}

1 打开显示预览的右侧面板：选中Split
2 在tabItemPreview（）函数的左边有一个运行的图标。点击那个运行的图标。即可在Split面板中预览到我们的可组合项

1.2互动模式（直接在预览面板上做交互）

使用互动模式，您可以采用与在设备上执行操作的类似方式与预览对象互动。在该模式下，您可以在预览对象中点击元素并输入用户输入；预览对象甚至还可以播放动画。通过使用这种模式，您可以快速测试可组合项的不同状态和手势，例如勾选或清空复选框。\

预览互动模式直接在 Android Studio 中运行，并未运行模拟器，因此存在一些限制：
无法访问网络
无法访问文件
有些 Context API 不一定完全可用,例子如下

我们可以通过面板上，通过点击预览图上的Start Interactive Model图标。就可以对该预览图进行一些交互了，停止的时候就点击Stop Interactive Model。 图标如下图

1.3部署预览对象

您可以将特定 @Preview 注解的预览对象，部署到模拟器或实体设备上。 在预览面板中，选中某个预览对象，并且点击Deploy Preview按钮。图标如下所示 点击之后，就可以对该预览对象在手机或者模拟器上预览了

1.4 代码导航和可组合大纲的查看

您可以将鼠标悬停在预览对象上，查看其中包含的可组合项的大纲。点击可组合项大纲会触发您的编辑器视图，从而导航到其定义。

1.5 复制 @Preview 呈现

通过右键点击呈现的每个预览对象，即可将其作为图像复制。

2.@Preview 预览的配置

@Preview 使用额外的参数来更改预览呈现配置。您可以在代码中手动设置这些参数，也可以通过预览边线图标更改这些参数： 我们来看看预览类的源码

@MustBeDocumented
@Retention(AnnotationRetention.SOURCE)
@Target(
    AnnotationTarget.FUNCTION
)
@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, //显示系统UI
    val showBackground: Boolean = false,
    val backgroundColor: Long = 0,
    @UiMode val uiMode: Int = 0,
    @Device val device: String = Devices.DEFAULT
)

• name是设置预览对象的名字。设置之后可以在面板看到该名字
• widthDp是设置宽度
• heightDp 设置高度
• locale 设置语言
• fontScale 用户对字体比例因子的首选项（相对于基本字体）*密度缩放。
• showSystemUi 设置显示系统的标题栏（类似toolbar）
• showBackground 是否显示背景
• backgroundColor 背景颜色
• uiMode 设置深色模式还是浅色模式等 我们可以看到很多的入参。这些入参都是我们可以配置的参数。下面举几个例子

2.1 配置宽高

比如配置宽高

@Preview(widthDp = 100,heightDp = 100)
@Composable
fun tabItemPreview(){
    tabItem()
}

2.2 设置背景

默认情况下，您的可组合项将以透明背景显示。如需添加背景，请添加 showBackground 和 backgroundColor 参数。请注意，backgroundColor 是 ARGB Long，而不是 Color 值：

@Preview(showBackground = true, backgroundColor = 0xFF00FF00)
@Composable
fun WithGreenBackground() {
    Text("Hello World")
}

2.3 设置语言

如需测试不同的用户语言区域，您需要添加 locale 参数：

@Preview(locale = "fr-rFR")
@Composable
fun DifferentLocaleComposablePreview() {
    Text(text = stringResource(R.string.greetings))
}

3.编辑器的操作。

Android Studio 在编辑器区域也提供了一些功能，可提高使用 Jetpack Compose 的工作效率。

3.1 实时模板

Android Studio 添加了下面这些与 Compose 相关的实时模板，您可以通过输入相应的模板缩写来输入代码段，以实现快速插入

3.2 边线图标

边线图标是边栏中可见的上下文操作，位于行号旁边。Android Studio 引入了多个 Jetpack Compose 专用边线图标，以简化开发者体验。

3.2.1 预览选择器

您可以直接通过边线图标更改 @Preview 参数

3.2.2 部署预览对象的图标

您可以直接通过边线图标将 @Preview 部署到模拟器或实体设备上：、

3.2.3 颜色选择器

无论是在可组合项内部还是外部定义颜色，边线上都会显示其预览对象。您可以点击颜色，通过颜色选择器进行更改，如下所示：

3.2.4 图像资源选择器

无论是在可组合项内部还是外部定义可绘制对象、矢量或图像，边线上都会显示其预览对象。您可以点击它，通过图像资源选择器进行更改，如下所示

4.迭代代码开发

4.1Apply Changes

Apply Changes 可让您更新代码和资源，而不必将应用重新部署到模拟器或实体设备上，不过，这项功能存在一些限制。每当您添加、修改或删除可组合项时，您只需点击一下此按钮，即可更新应用，而不必重新部署

5.布局检查器

Layout Inspector布局检查器，借助布局检查器 我们可以在模拟器或实体设备上检查正在运行的应用中的 Compose 布局。

6.动画

Android Studio 允许您通过互动式预览检查动画效果。如果您在可组合项预览中描述了动画效果，则可以在给定时间检查每个动画值的确切值，可以暂停、循环播放动画、让动画快进或放慢，以便在动画过渡过程中调试动画：

@Preview
@Composable
fun PressedSurface() {
    val (pressed, onPress) = remember { mutableStateOf(false) }
    val transition = updateTransition(
        targetState = if (pressed) SurfaceState.Pressed else SurfaceState.Released
    )

    val width by transition.animateDp { state ->
        when (state) {
            SurfaceState.Released -> 20.dp
            SurfaceState.Pressed -> 50.dp
        }
    }
    val surfaceColor by transition.animateColor { state ->
        when (state) {
            SurfaceState.Released -> Color.Blue
            SurfaceState.Pressed -> Color.Red
        }
    }
    val selectedAlpha by transition.animateFloat { state ->
        when (state) {
            SurfaceState.Released -> 0.5f
            SurfaceState.Pressed -> 1f
        }
    }

    Surface(
        color = surfaceColor.copy(alpha = selectedAlpha),
        modifier = Modifier
            .toggleable(value = pressed, onValueChange = onPress)
            .size(height = 200.dp, width = width)
    ){}
}

如需启用动画检查器，请点击此按钮：