Android Studio与Jetpack Compose结合使用Jetpack Compose是用于构建Androi

原文地址：developer.android.com/jetpack/com…

Jetpack Compose是用于构建Android UI的工具包，基于声明式编程模型，这样你可以简单的描述UI的外观，剩下的工作交给Compose处理，你的UI也会自动更新。它是基于Kotlin构建，所以可以与Java互操作，并且可以直接访问Android和Jetpack Api。与现有的UI工具包兼容，所以你可以混合使用。

为了获得Jetpack Compose最佳体验，你需要下载最新版的Android Studio,当你使用Android Studio通过Jetpack Compose开发应用程序时能够获得最好的体验，例如New Project模板可以直接查看Compose UI.

创建一个支持Jetpack Compose的项目

从Android Studio menu bar选择File > New > New Project
在select a Project Template窗口，选择Empty Compose Activity，点击next
在Configure your project窗口，做如下操作：
1. 设置Name、Package Name、Save Location等
2. 在Language下拉菜单中选择Kotlin，Kotlin是唯一可用的选项，因为Jetpack compose仅支持Kotlin编写的类。
3. 在Minimum API level dropdown菜单，选择Api级别21或更高。

添加Jetpack Compose到现有的程序中

配置Gradle

将应用的Api级别设置为21或更高，并在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"
    }
}

使用实验版的Kotlin-Gradle插件

Jetpack Compose使用实验版的Kotlin-gradle插件，在项目的build.gradle文件中添加如下配置：

buildscript {
    ...
    dependencies {
        classpath "org.android.tools.build:gradle:4.0.0-alpha01"
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.2"
    }
}

添加Jetpack Compose编译器

Jetpack Compose使用一个自定义的Kotlin编译器插件来提高运行效率，该编译器还能够动态的应用更改以实现更快的迭代速度和更少的运行时间，添加composable依赖项到你的项目中：

dependencies {
    kotlinPlugin "androidx.compose:compose-compiler:0.1.0-dev02"
    // You also need to include the following Compose toolkit dependencies.
    implementation 'androidx.ui:ui-framework:0.1.0-dev02'
    implementation 'androidx.ui:ui-tooling:0.1.0-dev02'
    implementation 'androidx.ui:ui-layout:0.1.0-dev02'
    implementation 'androidx.ui:ui-material:0.1.0-dev02’
    implementation 'org.jetbrains.kotlin:kotlin-reflect:1.2'
    ...
}

使用实时预览

使用不同的尺寸、主题和字体缩放来预览composable功能

创建一个简单的实时预览

下面是一个composable方法：

@Composable
fun TutorialPreviewTemplate(
    colors: MaterialColors = lightThemeColors,
    typography: MaterialTypography = themeTypography
) {
    val context = +ambient(ContextAmbient)
    val previewPosts = getPostsWithImagesLoaded(posts.subList(1, 2), context.resources)
    val post = previewPosts[0]
    MaterialTheme(colors = colors, typography = typography) {
        Surface {
            PostCardTop(post)
        }
    }
}

要创建实时预览，需要创建一个无参的composable方法，并且在@Composable注解之上再添加@Preview注解。

/// This is the original composable function.
@Composable
fun TutorialPreviewTemplate( ... ) { ... }

// A new composable function that applies the @Preview annotation and does not
// take any parameters.
@Preview
@Composable
fun TutorialPreview() {
    // Call the composable function that you would like to
    // create a live preview for.
    TutorialPreviewTemplate()
}

创建或修改实时预览时，需要重修构建项目才能看到变化。

你可以创建多个实时预览，他们就会并排显示在预览窗口中。

/// This is the original composable function.
@Composable
fun TutorialPreviewTemplate( ... ) { ... }

@Preview
@Composable
fun TutorialPreview() { ... }

// This live preview uses the app's dark theme.
@Preview
@Composable
fun TutorialPreviewDark() {
    // Although you can't pass arguments to the live preview function itself,
    // you can pass arguments to the composable function that it calls.
    TutorialPreviewTemplate(colors = darkThemeColors)
}

传递参数给@Preview注解

@Preview注解提供了一些参数可以用来更改Composable方法在预览窗口中呈现的样式。例如你可以传递字符串来命名实时预览。

// Pass a name for the preview to easily identify it in the Preview window.
@Preview("Default colors")
@Composable
fun TutorialPreview() {
    TutorialPreviewTemplate()
}

@Preview("Dark colors")
@Composable
fun TutorialPreviewDark() {
    TutorialPreviewTemplate(colors = darkThemeColors)
}

可以传递的参数如下：

widthDp：最大宽度，密度无关像素(dp),IDE在绘制实时预览时会使用到，这个在限制屏幕宽度的时候特别有用。
heightDp：最大高度，以dp为单位，同widthDp
fontScale：字体缩放比例

@Preview("Font scaling 1.5, height 300", fontScale = 1.5f, heightDp = 300)
@Composable
fun TutorialPreviewFontscale() {
    TutorialPreviewTemplate()
}