阅读 908

初识 Jetpack Compose(一) :Hello,Jetpack Compose!

compose-landing-roadmap.svg

目录

一、Compose 介绍

google 在 07月28日 发布了compose 1.0正式版,代表着其api结构已经趋于稳定,作为一个合格(天天划水)的android developer,也是时候开始了解它了。

以下内容引用自官网内容
Jetpack Compose 是一个适用于 Android 的新式声明性界面工具包。Compose 提供声明性 API,让您可在不以命令方式改变前端视图的情况下呈现应用界面,从而使编写和维护应用界面变得更加容易。

二、Compose 创建

1.新建应用

  • 下载安装 Android Studio Arctic Fox,以便于在Jetpack Compose 进行开发时获得最佳体验
  • 创建应用 New Project 选择 Empty Compose Activity ,然后Next,在填写好相关信息后Finish进入应用主界面,等待构建完成。
  • 在手机/模拟器上运行你的第一个 Compose

至此,compose 创建完成,工具下载及应用构建建议科学上网。

三、查看初始 Compose 应用结构

一个新建的Compose应用内包含了一个MainActivity.kt,以及ui.theme包内颜色、主题等配置文件

1. MainActivity

1.1. 父类

MainActivity继承自 ComponentActivityComponentActivity 又继承自 Activity,说明View还是通过setContentView()加载。

1.2. onCreate() 方法

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
        Compose_oneTheme {
            // A surface container using the 'background' color from the theme
            Surface(color = MaterialTheme.colors.background) {
                Greeting()
            }
        }
    }
}
复制代码

方法内 setContent{}就比较陌生了,通过源码可以看到setContent()ComponentActivity的一个拓展方法,其中的content参数需要传入一个由@Composable注解的函数,值得注意的是@Composable并非传统意义上的注解处理器,ComposeKotlin 编译器的类型检测与代码生成阶段依赖 Kotlin 编译器插件工作,所以无需注解处理器即可使用 Compose
@Composable的作用更像一个关键字,比如 suspend@Composable 与其工作方式相同:它可以改变函数类型。重点是,当使用 @Composable 注解一个函数类型时,会导致它类型的改变:未被注解的相同函数类型与注解后的类型互不兼容。源码如下

public fun ComponentActivity.setContent(
    parent: CompositionContext? = null,
    content: @Composable () -> Unit
) {
    val existingComposeView = window.decorView
        .findViewById<ViewGroup>(android.R.id.content)
        .getChildAt(0) as? ComposeView

    if (existingComposeView != null) with(existingComposeView) {
        setParentCompositionContext(parent)
        setContent(content)
    } else ComposeView(this).apply {
        // Set content and parent **before** setContentView
        // to have ComposeView create the composition on attach
        setParentCompositionContext(parent)
        setContent(content)
        // Set the view tree owners before setting the content view so that the inflation process
        // and attach listeners will see them already present
        setOwners()
        setContentView(this, DefaultActivityContentLayoutParams)
    }
}
复制代码

可以发现,在setContent内部,程序会去寻找Activity的根布局,若未找到则创建一个,然后将由@Conposable注解函数内的声明式布局创建。

1.3. Greeting() 方法

@Composable
fun Greeting() {
    Text(text = "Hello,Jetpack Compose!")
}
复制代码

该方法由@Composable注解(最终需要传入到setContent方法中的都需要注解,不论多少层),其内容则是要创建的视图内容的具体声明描述了。

1.4. DefaultPreview() 方法

@Preview(showBackground = true )
@Composable
fun DefaultPreview() {
    Compose_oneTheme {
        Greeting()
    }
}
复制代码

值得注意的是 DefaultPreview()除了添加了@Composable注解外,还添加了@Preview, @Preview注解的方法可以在不运行App的情况下就可以确认布局的情况。
如下图所示

1630316720(1).jpg
@Preview的注解中比较常用的参数如下:

  • name: String: 为该Preview命名,该名字会在布局预览中显示。
  • showBackground: Boolean: 是否显示背景,true为显示。
  • backgroundColor: Long: 设置背景的颜色。
  • showDecoration: Boolean: 是否显示Statusbar和Toolbar,true为显示。
  • group: String: 为该Preview设置group名字,可以在UI中以group为单位显示。
  • fontScale: Float: 可以在预览中对字体放大,范围是从0.01。- widthDp: Int: 在Compose中渲染的最大宽度,单位为dp。
  • heightDp: Int: 在Compose中渲染的最大高度,单位为dp。

注意:强烈建议您不要向生产函数(即使其不带参数)添加 @Preview 注释,而是编写一个封装函数并在其中添加 @Preview 注释。 这便是 DefaultPreview存在的意义,详见 developer.android.google.cn/jetpack/com…

2. ui.theme

包内包含了Color.ktShape.ktType.ktTheme.kt,分别是颜色、形状、类型、主题的描述文件,可以理解为代替了传统android项目内res内的xml配置文件;在后面的文章中会专门讲到。

四、在现有应用中使用 Compose

1. 添加依赖

  • Gradle 升级至7.0
buildscript {
    ...
    dependencies {
        classpath "com.android.tools.build:gradle:7.0.0"
        ...
    }
}
复制代码
  • Kotlin 升级至 1.5.21
  • 配置 Gradle

需要将应用的最低 API 级别设置为 21 或更高级别,并在应用的 build.gradle 文件中启用 Jetpack Compose,如下所示。另外还要设置 Kotlin 编译器插件的版本。

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.1'
        kotlinCompilerVersion '1.5.21'
    }
}
复制代码
  • 添加Jetpack Compose工具包依赖项
dependencies {
    // Integration with activities
    implementation 'androidx.activity:activity-compose:1.3.1'
    // Compose Material Design
    implementation 'androidx.compose.material:material:1.0.1'
    // Animations
    implementation 'androidx.compose.animation:animation:1.0.1'
    // Tooling support (Previews, etc.)
    implementation 'androidx.compose.ui:ui-tooling:1.0.1'
    // Integration with ViewModels
    implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:1.0.0-alpha07'
    // UI Tests
    androidTestImplementation 'androidx.compose.ui:ui-test-junit4:1.0.1'
}
复制代码

2. 在XML中使用Compopse

xml中可以将 ComposeView 作为一个普通的view来使用,然后在代码内通过setContent方法注入compose

<...>
    <!-- Other content -->

    <androidx.compose.ui.platform.ComposeView
        android:id="@+id/greeting"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</...>
复制代码
class MyActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // ...

        val greeting = findViewById<ComposeView>(R.id.greeting)
        greeting.setContent {
            MdcTheme { // or AppCompatTheme
                Greeting()
            }
        }
    }
}

@Composable
private fun Greeting() {
    Text(
        text = stringResource(R.string.greeting),
        style = MaterialTheme.typography.h5,
        modifier = Modifier
            .fillMaxWidth()
            .padding(horizontal = dimensionResource(R.dimen.margin_small))
            .wrapContentWidth(Alignment.CenterHorizontally)
    )
}
复制代码

3. 在Activity/Fragment...中使用Compopse

可参考新建compose应用内的实现方式,直接使用setContent方法。

五、最后

好记性不如烂笔头,初识 Jetpack Compose 系列是我自己的学习笔记,在加深知识巩固的同时,也可以锻炼一下写作技能。文章中的内容仅作参考,如有问题请留言指正。

1. 参考文章

文章分类
Android