1.3 创建第一个Compose应用

在学习一门新技术时，通常会使用HelloWorld入门。接下来就让我们在Android Studio中创建一个Compose HelloWorld项目。

1.3.1 创建新的Compose项目

如图1-20所示，就像创建一个普通Android项目一样，需要在Android Studio欢迎页中选中左侧标签页栏中的Projects，并在该标签页中选择New Project，进入项目模板选择页面，如图1-21所示。

项目模板中会帮助我们配置好一些默认项目配置信息，并提供可直接运行的模板工程。选中左侧标签页栏中的Phone and Tablet，创建一个用于手机和平板计算机的移动应用，在该标签页中选中Empty Compose Activity，创建一个Compose的HelloWorld。当然这里也允许我们创建用于WearOS、Android TV、Automotive等其他终端设备的模板。

单击右下角的Next按钮，进入接下来的项目信息配置页面，如图1-22所示。

可以在该页面中配置项目信息，Name表示项目以及App名称，Package Name表示项目的主包名，Android是以主包名来区分不同应用的。Save Location设置项目的存储路径。Language是项目开发语言，由于Compose需要使用Kotlin编写，所以这里无法选择其他语言。当然，Compose项目中仍然可以引入和编译Java代码。

Minimum SDK表示项目所支持的最小Android版本，Compose支持Android版本最低到5.0（API 21），可以兼容大约94.1%的Android设备。Use legacy android.support.libraries表示是否使用老版support库，这里被置为灰色不能选择，因为Compose目前只存在于AndroidX中。

配置为完成后，单击右下角的FINISH按钮，稍等片刻后项目即创建成功，如图1-23所示。

1.3.2 保持Compose版本更新

刚刚通过Android Studio创建的Compose模板项目可能对应的并不是最新的Compose版本，所以需要进一步配置来升级版本。需要在Gradle Scripts下的build.gradle（Project）文件中做修改。

Android Studio已经默认配置了当前的最新版本，编者写作本书时是1.0.4版本，后期也可以在Compose官网文档查询最新的Compose版本。

由于Compose版本依赖于Kotlin版本，如果只修改Compose版本而没有修改Kotlin版本，在进行编译时，编译器会弹出如下警告：

大概意思是Compose 1.0.4版本需要Kotlin 1.5.31版本，而当前使用的是1.5.21版本，可能会存在未知的兼容性问题。当出现这类错误时，我们需要为工程升级对应的Kotlin版本。可以通过修改Kotlin Gradle插件的方式升级Kotlin版本。同样是修改build.gradle（Project）文件：

修改完成后，单击红色区域右侧的Sync Now，即可交由Gradle完成项目的同步更新。

1.3.3 在模拟器中运行Compose应用

完成了前面的配置后，接下来就可以运行准备好的HelloWorld项目了。作为一个应用，需要运行在Android系统的终端设备上，终端设备可以是手机、手表，也可以是电视。如果有一部Android手机，那么可以通过数据线连接计算机进行开发调试，即使没有真机，也可以使用Android Studio自带的模拟器进行开发。这里简单介绍一下如何使用Android模拟器来运行我们的应用。

选择Tools→AVD Mananger会打开Android Studio自带的模拟器管理页面，如图1-24所示。

单击中间的CREATE VIRTUAL DEVICE按钮会进入选择模拟器设备选择页面，如图1-25所示。在这里可以自由选择喜欢的模拟器，这里不仅可以选择手机，还可以选择平板计算机、手表、电视等。这些模拟的设备都是谷歌自己研发的。这里选择Pixel 5机型，单击右下角的Next按钮。

如果第一次使用模拟器，需要下载对应版本的系统镜像，如图1-26所示。图中已经下载了R、Q、P三个版本的系统镜像，分别对应的是Android 11、10、9系统。ABI表示该系统镜像支持的CPU架构，对于一般的PC主机而言都是x86架构的，而手机一般都是ARM架构的。这意味着并不是所有应用都能运行在创建的x86模拟器上。当然也可以进入Other Images标签页选择ARM架构的虚拟机。

选择镜像后，单击右下角的Next按钮，进入模拟器配置信息页面，如图1-27所示。

此处创建了一个Pixel 5，x86 CPU架构的Android 11.0模拟器。AVD Name表示模拟器的名称，这里使用默认值即可。Startup orientation表示启动时的方向，使用垂直即可。Device Frame表示模拟器是否显示边框，默认打勾即可。接着单击右下角的FINISH按钮稍等片刻模拟器就创建好了。单击模拟器管理页面的启动按钮启动模拟器，然后就可以像使用手机一样在模拟器上运行Android应用了。

如果运行时提示Android Gradle plugin requires Java 11 to run. You are currently using Java 1.8。这意味着用户使用的是7.0版本以上的AGP，因为7.0版本以上的AGP会强制使用JDK11，所以需要手动修改当前项目Gradle JDK版本，请主动设置Gradle JDK版本。编译顺利通过后，等一会儿就可以在右侧模拟器上看到HelloWorld程序了，如图1-28所示。

1.3.4 分析第一个Compose应用

当然只学习如何运行别人的程序是远远不够的。接下来看看Android Studio帮我们生成的HelloWorld演示程序是如何编写的。打开MainActivity.kt，会看到这样的代码：

习惯传统方式的开发者第一次看到这样的代码可能会一头雾水，不要着急，编者来逐行解读一下代码。

如果你做过Android开发，应该对Activity已经很了解了，一般会使setContentView传入所预先定义的视图XML文件的资源ID。Compose使用Kotlin DSL而非XML描述UI，所以这里不再出现setContentView的调用。

Kotlin DSL由Composable组件构成。例如HelloWorld中有一个名为Greeting的Composable组件。Composable组件实际上就是一个带有@Composable注解的函数。第一次接触Compose难免会困惑：UI组件为什么是一个函数，而不是一个View的实例，这是Android开发者常见的思维惯性，在Compose开发中要跳出这种惯性。

接下来看看这个名为Greeting的Composable组件做了什么。

可以看到其中使用Text声明了一串文本，实际上这里的Text也是一个带有@Composable注解的函数，这里将要展示的文本信息作为参数传入Text函数进行调用，Composble UI组件都是顶级函数，可以在任意位置调用，例如这里Text组件被Greeting组件所调用。值得注意的是，Composable函数只能在Composable函数中调用，所以肯定存在一个根Composable，这个根Composable实际上是setContent提供的。代码如下所示：

setContent{…}的block内部的代码就执行在根Composable中。setContent内的第一个Composable组件是HelloWorldTheme，它由Android Studio根据项目名称自动生成，为界面提供默认主题。内部的子组件都继承其主题的样式。接下来是一个Surface组件，这里简单理解为一个摆放内容的布局类组件即可，后面章节会详细介绍这个组件。接下来就是调用Greeting组件，将其内部的Text绘制出来。

1.3.5 对Compose应用进行预览

Android Studio支持对Composable组件进行预览，只需要为希望预览的Composable函数再增加一个@Preview注解即可。HelloWorld代码中有一个DefaultPreview，这是新建工程为我们默认添加专门用来预览的Composable，代码如下：

可以在MainActivitiy.kt界面中单击右上角的标签栏Split，打开预览面板，用户可以一边编写代码一边看预览效果，如图1-29所示。需要注意预览效果要编译之后才会生效。

当一个文件中有多个添加@Preview的Composable时，在预览面板中可以同时看到它们，这可以带来高效的开发体验，比如可以同时预览不同主题、不同分辨率下的显示效果。@Preview也允许通过参数来设置这些不同的预览效果。以下是Preview注解的部分参数示例：

1.3.6 已有项目引入Compose

前面介绍了如何新建一个Compose项目，当然也可以为已有的旧项目引入Compose。 Compose与View视图体系有良好的兼容性，允许我们阶段性地将传统视图项目改造成Compose项目。

1.在工程中引入Compose

就像使用其他Jetpack库一样，首先需要添加Compose相关依赖：

最好在build.gradle（Project）中统一定义compose_version，同时注意升级kotlin-gradle-plugin到对应版本，具体参考1.3.2节内容。

除了添加Gradle依赖外，还需要在主模块的android闭包中添加Compose的编译参数。具体配置如下所示：

完成上述配置后，单击Sync按钮，等待Gradle配置生效，接下来就可以在工程中使用Compose写代码了。以Android平台而言，Compose实际上都承载在ComposeView上，如果想要在旧项目中使用Compose开发，就需要在使用处添加一个ComposeView。可以在XML文件中静态声明或在程序中动态构造出一个ComposeView实例，这里为演示方便，就采用XML文件中静态声明的方式。在activity_main.xml中添加ComposeView，如下所示：

接下来仅需在MainActivity中查找该View并使用setContent即可，这里编者在其中简单声明了一个Text组件。代码如下所示：

这样就完成了在旧项目中接入Compose的过程，可以看出整个接入过程实际上非常简单，所有 Compose代码逻辑都承载在ComposeView之上，对原有基于View的代码侵入极小。可以大胆地将自己的已有项目逐步迁移到Compose。

2.在Compose中使用View组件

不少功能性的传统视图控件在Compose中没有对应的Composable实现，例如SurfaceView、WebView、MapView等。因此在Compose中可能会有使用传统View控件的需求。Compose提供了名为AndroidView的Composable组件，允许在Composable中插入任意基于继承自View的传统视图控件。

下面的例子中，使用AndroidView在Composable中显示一个WebView：

本例需要为AndroidView传入一个工厂的实现，工厂方法中可以获取Composable所在的Context，并基于其构建View视图控件。代码中还出现了对Modifier的使用，在后面的章节会专门进行介绍。这里可以理解为是将AndroidView组件铺满整个屏幕。

WebView的使用不是本书的重点，相关配置这里就不赘述了，总之通过调用loadUrl, WebView在Composable视图树中成功显示了一个网页，如图1-30所示。 AndroidView可以有效补充Compose目前能力上的不足，扩展Composable的使用场景。