Android Studio与Jetpack Compose结合使用

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

示例项目地址：github.com/android/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的项目

1. 从Android Studio menu bar选择File > New > New Project

2. 在select a Project Template窗口，选择Empty Compose Activity，点击next

3. 在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)
}
复制代码

能够传递的参数以下：

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

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