Jetpack Compose —简介

最新推荐文章于 2024-08-22 17:57:40 发布

weixin_26739079

最新推荐文章于 2024-08-22 17:57:40 发布

阅读量834

点赞数

文章标签： python

原文链接：https://medium.com/@ajinkya.kolkhede1/jetpack-compose-an-introduction-a6b62cc1d255

版权

JetPack Compose is modern toolkit for building native Android UI. This library enables us to develop intuitive user interfaces with less code, more performance and faster development. It is part of Jetpack group of libraries. It uses declarative approach for development of user interfaces. This is not new to us frontend frameworks like flutter, react uses similar approach in slightly different way.

JetPack Compose是用于构建本机Android UI的现代工具包。该库使我们能够以更少的代码，更高的性能和更快的开发速度来开发直观的用户界面。它是Jetpack库组的一部分。它使用声明性方法来开发用户界面。对于我们来说，这不是新的前端框架，例如flutter，react使用类似的方法，但方式略有不同。

使用Jetpack Compose的优点 (Advantages of using Jetpack Compose)

Declarative approach — Compose is fully declarative, that means we need to describe UI by calling a series of functions that converts data into a UI. When the data changes, we don’t need to do extra stuffs, the framework automatically recalls these functions, and update view hierarchy.
声明性方法 — Compose是完全声明性的，这意味着我们需要通过调用一系列将数据转换为UI的函数来描述UI。当数据更改时，我们不需要做其他工作，该框架会自动调用这些功能，并更新视图层次结构。
Independant from Android Platform — It is integrated into applications as a library, and unbundled from Android platform releases. This allows Compose to be updated more frequently than the existing legacy UI toolkit.
与Android平台无关 -它作为库集成到应用程序中，并且与Android平台版本无关。与现有的旧版UI工具包相比，这可使Compose的更新频率更高。
Less code and Fast Development — With xml-based UI we need to write more code, also code grow as complexity of UI increases. As code is spread across the app at different places it causes slowness in development. With compose we can overcome these issues.
更少的代码和快速的开发 -使用基于xml的UI，我们需要编写更多的代码，并且随着UI复杂性的增加，代码也随之增长。由于代码分散在应用程序的不同位置，因此会导致开发速度变慢。通过撰写，我们可以克服这些问题。
Backward compatible — It is designed to be backward compatible and to work with your existing apps with minimal changes. That means it will work with existing views, and you can pick and choose elements to use from it.
向后兼容 -旨在向后兼容，并且只需很少的更改即可与您现有的应用程序一起使用。这意味着它将与现有视图一起使用，并且您可以从中选择要使用的元素。

入门 (Getting Started)

For the best experience developing with Jetpack Compose, you should use latest canary version of Android Studio Preview. It will give the ability to immediately preview your Compose UI. You can download canary version from here.

为了获得使用Jetpack Compose开发的最佳体验，您应该使用最新的Canary版本的Android Studio Preview。它将具有立即预览您的Compose UI的功能。您可以从此处下载canary版本。

Gradle配置： (Gradle Configuration:)

Compose is backward compatible till api level 21 so we need to set minsdkVersion to 21 and enable compose, we need to set Kotlin compiler plugin version as shown below in modules build.gradle file.

Compose向后兼容直到api级别21，因此我们需要将minsdkVersion设置为21并启用compose，我们需要按如下所示在模块build.gradle文件中设置Kotlin编译器插件版本。

android {
    defaultConfig {
        minSdkVersion 21
    }
    buildFeatures {
        compose true
    }
    
    composeOptions {
        kotlinCompilerExtensionVersion "0.1.0-dev13"
    }
}

添加撰写依赖项： (Add Compose dependencies:)

dependencies {
    implementation 'androidx.ui:ui-core:0.1.0-dev13'
    implementation 'androidx.ui:ui-tooling:0.1.0-dev13'
    implementation 'androidx.ui:ui-layout:0.1.0-dev13'
    implementation 'androidx.ui:ui-material:0.1.0-dev13'
}

We are now ready to build UI for our app using compose.

现在，我们准备使用compose为我们的应用程序构建UI。

在屏幕上添加简单的文本元素： (Adding simple text element on screen:)

With compose you will not use any xml so there is no need of setContentView() in your activities or fragments, instead you will use setContent() to set up your UI. It is Kotlin extension function which takes composable lambda as parameter.

随着撰写所以没有必要的，你不会使用任何XML setContentView()在你的活动或片段，而是将使用setContent()设置你的UI。这是Kotlin扩展功能，以可组合的lambda作为参数。

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Text("Hello world!")
        }
    }
}

定义可组合函数： (Define a composable function:)

In compose method marked with annotation @Composable will be used to build UI. Add @Composable annotation to method

在标有注释的compose方法中，@ Composable将用于构建UI。将@Composable注释添加到方法

@Composable
fun Greeting() {
    Text (text = "Hello world!")
}

在Android Studio中预览功能： (Preview your function in Android Studio:)

You can preview composable functions within the IDE, and there is no need to download the app to an Android device or emulator by adding @Preview annotation to method.

您可以在IDE中预览可组合功能，而无需通过向方法中添加@Preview批注将应用程序下载到Android设备或模拟器。

@Composable
@Preview
fun Greeting() {
    Text (text = "Hello world!")
}

After adding annotation, you need to rebuild project. Android Studio adds a preview window. This window shows a preview of the UI elements created by composable function. To update the previews at any time, click the refresh button at the top of the preview window. Preview is applicable to those composable functions that don’t take any arguments.

添加注释后，您需要重建项目。 Android Studio添加了一个预览窗口。此窗口显示可组合功能创建的UI元素的预览。要随时更新预览，请单击预览窗口顶部的刷新按钮。预览适用于那些不带任何参数的可组合函数。

添加多个视图并将其放置在屏幕上： (Adding Multiple Views and positioning them on screen:)

If we modify greeting function to add three text elements inside the content view and since we haven’t provided any information about how to arrange them, the three text elements are drawn on top of each other, making the text unreadable.

如果修改问候语功能以在内容视图中添加三个文本元素，并且由于我们未提供有关如何排列它们的任何信息，则这三个文本元素会相互重叠绘制，从而使文本不可读。

@Composable
@Preview
fun Greeting() {
    Text (text = "First Hello world!")    
    Text (text = "Second Hello world!")
    Text (text = "Third Hello world!")
}

To position them on screen we can use column composable which position all the three text one below other.

要将它们放置在屏幕上，我们可以使用可组合列，将所有三个文本一个接一个地放置。

@Composable
fun Greeting() {
    Column {
        Text(text = "First Hello world!")
        Text(text = "Second Hello world!")
        Text(text = "Third Hello world!")
    }}

You can also use row() composable to position views horizantally on screen. Additionaly you can add Material Theme as built in support is provided for it.

您还可以使用可组合的row()在屏幕上水平放置视图。另外，您可以添加Material Theme，因为为此提供了内置支持。

最后的想法： (Final Thoughts:)

We learnt very basic things that we can achieve with compose. However with compose we can achieve lot more things. Personally i feel compose will definately a future of UI development in Android.

我们学习了通过组合可以实现的非常基本的东西。但是通过compose，我们可以实现更多的目标。我个人认为compose一定会确定Android中UI开发的未来。