一款优秀的Android应用程序，需要的不仅仅是美观的UI界面，同时还要有良好的性能表现。在绘制页面的时候，你需要把控视图在用户屏幕上的何处出现，以及它出现的方式。

Android提供了多种布局类型，这些布局中确定子View的方式都是不同的。所有布局都来自ViewGroup类。



构建Android UI常用的布局有FrameLayout, LinearLayout 和RelativeLayout.

这些布局易于使用，但当视图结构变得复杂时，它们每个都有其局限性和一些性能问题：

• FrameLayout 只能通过设置相对于父View的Gravity属性来定位子View

• LinearLayout 不允许各View相互重叠。大多数情况下，你必须使用多个LinearLayout进行嵌套

• RelativeLayout 需要的性能较多，因为它总是会做两次布局测量

将包含 layout_weight属性的 LinearLayout 同 RelativeLayout一起嵌套使用，将会指数级地增加布局性能成本。这时就需要 ConstraintLayout 约束布局来进行拯救了。

在较新版本的Android Studio中，ConstraintLayout已经作为默认布局存在了，并且提供了许多放置对象的方法：可以相对于它们的容器本身进行约束、相对于其他对象约束或者彼此之间进行约束、以及相对于你自己创建的guileline(辅助线)进行约束。这些方法可以让你在同一层次中创建大型、复杂、动态和响应式的视图，甚至还能支持动画！

Raze Galactic - 一款星际旅行应用程序

您可以使用该应用程序预定行星之间的旅行，计划周末在空间站的度假，并在您抵达后预定月球车。

在本教程中，你将通过从头开始构建星际旅行应用程序的登录界面UI，以了解ConstraintLayout的基本功能。

image

在此过程中，你将学习：

• 如何添加和删除约束

• 如何在界面上相对于其他元素动态定位UI元素

注意：本教程假设你熟悉 Android 和 Android Studio 的基础知识。如果你不熟悉 Android 开发，请先查看我们的 Android入门教程 系列。

入门

打开Android Studio 3.2.1或更高版本，通过从启动界面选择 Start a new Android Studio project 来创建新的Android Studio项目。

image

在下一个界面中，输入 Raze Galactic 作为 Application name (应用程序名称）。

对于 Company domain (公司域名)，你可以输入任意你喜欢的内容。该示例使用 raywenderlich.com 。

对于 Project location (项目位置)，请选择计算机上对你来说有意义的地址，并确保地址路径中没有空格。你可以点击项目位置字段右侧的省略号 ... 以直接选择计算机上的目录。

最后，确保已选中 Include Kotlin support (添加Kotlin语言支持) 并点击 Next (下一步) 按钮。

译者注：勾选Kotlin语言支持在本文章中并非必要，后续的内容没有直接使用到Kotilin，所以如果你是纯粹的JAVA语言开发者或者不想使用Kotlin，这里不勾选也完全OK。

image

在接下来的界面中，进行Android设备选择，你需要选择 Phone and Tablet (手机和平板电脑)，然后选择 API 28: Android 9.0 (Pie) 并点击Next。

译者注：API部分可以按自己习惯选择，不一定非要到Android9.0这么高的版本。

image

在“Add an Activity to Mobile” (为移动设备添加活动) 界面，选择 Empty Activity (空活动)。在之后你将向这个空活动中添加UI元素，以了解Android中的布局操作。

接下来———你猜对了———点击Next！

image

在最后一个向导页，Configure Activity(配置活动),保留所有默认配置，需要按Finish即可完成项目配置。

image

检查ConstraintLayout版本

在开始创建新布局之前，你需要检查ConstraintLayout是否需要版本更新。

你可以在app模块的构建Gradle文件中找到此信息。在Andoird Studio中，打开 app build.gradle 并查看其中的 dependencies { … }部分。

在各种构建依赖项中，你应该能找到 implementation 'com.android.support.constraint:constraint-layout:x'，其中x是项目中ConstraintLayout所使用的版本。

image

要完成本教程，你需要ConstraintLayout 1.1.3或更高版本。为了确保你拥有最新版本的ConstraintLayout库，请从菜单中选择 Tools SDK Manager 。

image

单击 SDK Tools (SDK工具) 选项卡，在 Support Repository (支持的库) 下查看 ConstraintLayout for Android ，如果显示 installed (已安装)，则表示你使用的是最新版本

image

接下来，选中名为 Show Package Details (显示包详情) 的复选框，以查看项目中包含的库的版本，Gradle文件中的版本号需要与 SDK manager (SDK 管理器) 中安装的版本相匹配。

通过配置 Android Studio 的设计界面以实现高效的约束布局开发

在继续学习本教程之前，请设置Android Studio视图显示方式，以便更轻松地添加和查看约束以及其相关元素。

首先打开 activity_main.xml ，然后单击工具栏中的 Select Design Surface (选择设计界面) 图标，并选择 Design + Blueprint (设计+蓝图)。

image

现在你在工作时就能看到设计预览界面旁边的蓝图界面了。

image

蓝图视图可以帮助你更清晰地查看约束和 guidelines (辅助线)，而不会被内容或背景分散注意力。

image

在开发 APP UI 时，你可以在代码视图 (Text tab) 和设计视图 (Design tab) 之间来回切换。

代码视图允许你查看和编辑布局背后的XML，而设计视图对于可视化操作UI元素非常有用。设计视图还提供了 Component Tree (组件树) , 它能让你查看和选择节目中存在的所有UI元素。

image

当你处于代码视图中，能够看到视觉预览和蓝图是很有用的。这样，当你在预览界面中选择任何元素时，XML中相应的代码块将变成高亮显示。

如果你在代码视图中没有看到预览界面，请单击右侧的 Preview (预览) 选项卡。

从头开始创建新的ConstraintLayout

对于接下来的这一步，请打开 activity_main.xml 并切换到代码视图以查看该文件的源代码：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context=".MainActivity">

  <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello World!"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

请注意，此布局的默认根元素是android.support.constraint.ConstraintLayout。另外，带有 “Hello World！” 文本的TextView元素已经有了一些约束属性，例如app:layout_constraintBottom_toBottomOf="parent"，它的作用是将此视图的底部约束到其父容器的底部。

在相对其父容器顶部、底部、左侧还有右侧都约束后，包含 “Hello World！”的 TextView便处于了屏幕的中心。

切换到设计视图并将鼠标光标移到包含 “Hello World！” 的TextView上， 可以看到有四条波浪线将TextView连接到其父容器上，这些线表示TextView已经应用了约束规则。

image

如果没有出现这些线，请单击TextView，然后它们就会出现。如果已选中 Show Constraints (显示约束) 视图选项，则无需使用鼠标光标悬停或选择任何视图，就可以看到所有约束。

image

向APP中添加图像

对于下一步，你将需要在本教程开头的应用程序屏幕截图中看到的火箭图像。使用教程开头的“ 下载材质”按钮下载本教程的材料，或者点此下载。你可以在 RazeGalactic-starter 文件夹中找到 track_icon.png 。

获取 track_icon.png 并将其添加到项目的 drawable 文件夹中。您可以通过在Mac上使用 command-C 或在Windows上使用 control-C 进行复制，然后右键单击Android项目中的 drawable 文件夹并使用Mac上的 command-V 或Windows上的 control-V  粘贴图像到项目中。

您可以将UI元素从 Palette (调色板) 拖放到设计界面中。如果没有看到 Palette ，请单击垂直 Palette 选项卡图标。

image

删除“Hello World！”，然后将以下UI元素拖到 Palette 中的视图中：

• 1个 ImageView, 提示选择图像时选择火箭图像。

  

  image

• 3个 Button

• 3个 TextView

更改UI元素的文本并将其拖动到屏幕周围，以使它们看起来像本教程开头的最终布局预览。不要过分在意视图的尺寸、间距或对齐的精度。

接下来，你需要添加android:textAppearance="@style/TextAppearance.AppCompat.Headline"到 Raze Galactic  TextView以获得合适的样式。

image

请注意，当你在屏幕上拖动视图时，这些小对齐线是能帮助到你的，这些线条可以很容易地将视图们相互排列。

image

作者：广州芦苇科技App
链接：https://www.jianshu.com/p/6c9950d1789b