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()
}
複製代碼