小白实战大前端：移动端与前端的互通之路
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

2.2.1 Activity的使用场景

Activity的使用场景其实可以归结为一句话，只要有界面展示，我们就需要它。虽然我们把Activity与HTML进行对比学习，但是还需要了解Activity与HTML的不同之处。

第一个不同是package的概念。在Android开发中，package有很多作用，比如把package理解成一个功能的集合，标识App所属公司或组织，或者作为引入文件的路径标识或者文件系统路径。比如图2-3中，com.example.chenchen.book其实就是一个package，com.example.chenchen.book是该package所在的路径。但是在前端开发概念中，HTML本身并没有package的概念，通常情况下，我们把HTML引入某个文件的引入地址为HTML的文件路径。

图2-3 Android程序中的package

第二个不同是布局文件。用户界面通常情况下通过标签的方式直接写在HTML文件中，但是我们不能直接把布局文件标签写在Activity中。

注意

我们可以引入Android的各种标签类，通过动态添加画布的方式将其添加到界面中。前端界面也可以这样做，现在市面上流行的React、Angular等都是使用这种方法对界面进行绘制的。

Android本质上是一个Java类，这个Java类通常继承了AppCompatActivity类。当我们要对界面进行渲染的时候，需要先设置一个布局文件到Activity中，在图2-3所示的代码中，代码setContentView(R.layout.activity_main)就是设置画布的。这个画布的路径通常会在项目路径的/res/layout/下，如图2-4所示，activity_main.xml文件目前就是App的唯一布局文件。

图2-4 Android布局文件activity_main.xml路径

注意

当Android应用程序被编译时，会自动生成一个R类，其中包含了所有res/目录下资源的ID，如布局文件、资源文件、图片（values下所有文件）的ID等。在编写Android应用需要用到这些资源的时候，你可以使用R类，通过子类+资源名或者直接使用资源ID来访问资源。

接下来在Android Studio中打开这个文件，文件中的代码如图2-5所示。图2-5左侧为activity_main.xml布局文件代码，右侧为该布局文件的预览效果，我们也可以这样理解：右侧所展示的界面就是activity_main.xml展示在手机App上的界面。

图2-5 Android布局文件activity_main.xml内容

接下来让我们共同分析一下activity_main.xml文件的具体内容。第一行代码<?xml ver-sion="1.0" encoding="utf-8"?>主要是声明xml文件的版本，以及具体编码字符集。类似2.1.2节介绍的<!doctype html>和<meta charset="utf-8">。

第2行中的android.support.constraint.ConstraintLayout其实是一种布局方式，叫作约束布局，与android.support.constraint. RelativeLayout类似，几年前Android开发者更习惯使用RelativeLayout来进行相对布局。对比前端来说，我们可以把这种布局方式理解为一个HTML页面设置了position: relative属性，也就是页面中的子元素设置了相对布局方式。不同的地方是，android.support.constraint.ConstraintLayout可以通过角度约束的方式来对activity_main.xml中的内容进行布局。这里我们可以让大家感受一下Android布局，先观察代码清单2-6。

代码清单2-6 ConstraintLayout布局

<Button
    android:id="@+id/button_first"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="first"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    />
<Button
    android:id="@+id/button_second"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="second"
    app:layout_constraintCircle="@+id/button_first"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintBottom_toTopOf="parent"
    app:layout_constraintCircleAngle="120"
    app:layout_constraintCircleRadius="100dp"
    />

在代码清单2-6中，有两个按钮元素<Button>，分别叫first和second，其他属性先不用关注，因为我们会在第3章进行详细介绍，现在只看constraintCircle-Angle = 120和constraintCircleRadius = 100dp就可以了。这两个属性表达的含义是以first的<Button>标签为圆心点，然后在first的<Button>标签120度的方向，且两个标签的圆心点相距120dp的地方展示second的<Button>。页面具体展示成什么样子，我们可以通过Android Studio的预览部分看一下，如图2-6所示。

图2-6 ConstraintLayout约束布局样例

注意

角度和距离的计算都依赖于<Button>标签的中心点，也就是垂直、水平方向都是中心的点，constraintCircleAngle=120是Android中特有的度量单位，是一种相对设备像素。关于dp部分内容可参见3.2.3节，此处只需要理解它是一种度量单位即可。

至于xmlns:android="http://schemas.android.com/apk/res/android"，则是xml关于命名空间的定义，主要是防止xml的命名冲突。http://schemas.android.com/apk/res/android看起来是一个访问地址，但是其实访问不了，它也是一个语法文件标识，有了它之后你在输入“android:”的时候，就会弹出这个命名空间下的对应属性，如图2-7所示。

图2-7 “android:”命令提示

Activity和它所依赖的布局文件介绍到这里就结束了，接下来会介绍Activity的常规配置。

上一章目录下一章