ConstraintLayout-[Android

ConstraintLayout介绍
ConstraintLayout构建自适应界面
ConstraintLayout Api

ConstraintLayout介绍

ConstraintLayout字面意思理解为约束布局，是2016年Google I/O大会上推出的新型布局，目前为止（2012/11）已经非常稳定。

它与以往的几种布局不同，主要优势如下：

1、拥有以往几种布局的优势。例：LinearLayout的宽高比重布局、RelativeLayout的相对布局、
FrameLayout叠加布局等等。
2、更好的屏幕适配，支持View对屏幕进行百分比摆放(横向、竖向)。
3、很大程度上减少层级嵌套使得XML布局更加扁平，从绘制角度来讲性能更高。
4、利用Android Studio可以进行布局拖拽，效果直观，编写效率更高。

将 ConstraintLayout 添加到项目中。

1、在模块级build.gradle文件中声明：  
repositories {
    google()
}

2、在build.gradle文件中添加依赖：
dependencies {
    implementation "androidx.constraintlayout:constraintlayout:2.1.1"
    // To use constraintlayout in compose
    implementation "androidx.constraintlayout:constraintlayout-compose:1.0.0-rc01"
}

转换布局

如需将现有布局转换为约束布局，请按以下步骤操作：
1、在 Android Studio 中打开您的布局，然后点击编辑器窗口 Design 标签页。
2、在 Component Tree 窗口中，右键点击该布局，然后点击 Convert layout to ConstraintLayout。

layout-editor-convert-to-constraint_2x.png

创建新布局

如需开始新的约束布局文件，请按以下步骤操作：

1、在 Project 窗口中，点击模块文件夹，然后依次选择 res > layout > New > Layout Resource File。
2、输入该布局文件的名称，并对 Root element 输入“androidx.constraintlayout.widget.ConstraintLayout”。
3、点击 OK。

添加或移除约束条件

如需添加约束条件，请执行以下操作：

1、将视图从 Palette 窗口拖到编辑器中。
当您在 ConstraintLayout 中添加视图时，该视图会显示一个边界框，每个角都有用于调整大小的方形手柄，每
条边上都有圆形的约束手柄。
2、点击视图将其选中。
3、执行以下任一操作：
点击约束手柄并将其拖动到可用定位点。 此点可以是另一视图的边缘、布局的边缘或者引导线。请注意，当您
拖动约束手柄时，布局编辑器会显示可行的连接定位点和蓝色叠加层。

创建约束条件后，编辑器会为其指定默认外边距来分隔两个视图。
创建约束条件时，请注意以下规则：

每个视图都必须至少有两个约束条件：一个水平约束条件，一个垂直约束条件。
您只能在共用同一平面的约束手柄与定位点之间创建约束条件。因此，视图的垂直平面（左侧和右侧）只能约束在另一个垂直平面上；而基准线则只能约束到其他基准线上。
每个约束句柄只能用于一个约束条件，但您可以在同一定位点上创建多个约束条件。

您可以通过执行以下操作来删除约束条件：

点击某个约束条件将其选中，然后按 Delete。
在 Attributes 窗口的 Layout 部分中，点击某个约束定位点，如下图所示。

constraint-layout-delete-2-2x.png

父级位置

将视图的一侧约束到布局的相应边缘。

在下图中，视图的左侧连接到父布局的左边缘。您可以使用外边距来定义距离边缘的距离。

parent-constraint_2x.png

顺序位置

定义两个视图的显示顺序（垂直或水平方向）。

在图 8 中，B 被约束为始终位于 A 的右侧，而 C 被约束在 A 的下方。不过，这些约束条件并不意味着对齐，因此 B 仍然可以上下移动。

图8_ 水平和垂直约束方式.png

对齐方式

将一个视图的边缘与另一视图的同一边对齐。

在图 9 中，B 的左侧与 A 的左侧对齐。如果要与视图中心对齐，请对两侧创建约束条件。

您可以通过从约束布局向内拖动视图来偏移对齐量。例如，图 10 显示 B 的偏移对齐为 24dp。偏移量由受约束视图的外边距定义。

您还可以选择要对齐的所有视图，然后点击工具栏中的 Align 图标以选择对齐类型。

align图标.png

图9_水平对其约束.png

图10_偏移水平对其约束.png

基线对齐

将一个视图的文本基线与另一视图的文本基线对齐。

在图 11 中，B 的第一行与 A 中的文本对齐。

要创建基线约束条件，请右键点击要约束的文本视图，然后点击 Show Baseline。接着点击文本基线并将其拖到另一基线上。

图11_基线对齐约束.png

引导线约束

您可以添加垂直或水平的引导线来约束视图，并且应用用户看不到该引导线。您可以根据相对于布局边缘的 dp 单位或百分比在布局中定位引导线。

要创建引导线，请点击工具栏中的 Guidelines，然后点击 Add Vertical Guideline 或 Add Horizontal Guideline。

Guidelines.png

拖动虚线将其重新定位，然后点击引导线边缘的圆圈以切换测量模式

图12_受引导线约束的视图.png

屏障约束

与引导线类似，屏障是一条隐藏的线，您可以用它来约束视图。屏障不会定义自己的位置；相反，屏障的位置会随着其中所含视图的位置而移动。如果您希望将视图限制到一组视图而不是某个特定视图，这就非常有用。

例如，图 13 显示视图 C 被约束在屏障的右侧。该屏障设置为视图 A 和视图 B 的“end”侧（或从左至右布局中的右侧）。因此，屏障根据视图 A 或视图 B 的右侧是否为最右侧来移动。

如需创建屏障，请按以下步骤操作：

1、点击工具栏中的Guidelines图标，然后点击Add Vertical Barrier 或Add Horizontal Barrier。
2、在Component Tree窗口中，选择要放入屏障内的视图，然后将其拖动到屏障组件中。
3、在Component Tree中选择障碍，打开Attributes窗口，然后设置barrierDirection。

现在，您可以从另一个视图创建屏障约束。

您还可以将屏障内的视图约束到屏障。这样，您就可以确保屏障中的所有视图始终相互对齐，即使您并不知道哪个视图最长或最高。

您还可以在屏障内添加引导线，以确保屏障的位置“最小”。

图13_视图 C 约束在屏障内，该屏障会根据视图 A 和视图 B 的位置:尺寸而移动.png

调整视图尺寸

在选择视图时，Attributes 窗口会包含如下控件：

1尺寸比。
2 删除约束条件。
3 高度:宽度模式。
4 外边距。
5 约束偏差。
您还可以通过点击 6 约束列表中的各个约束条件来突出显示布局编辑器中的各个约束条件。

图 14.png

调整视图外边距

要确保所有视图间隔均匀，请点击工具栏中的 Margin，为您添加到布局的每个视图选择默认外边距。您对默认外边距所做的任何更改仅应用于您在更改后添加的视图。

Margin.png

您可以通过点击代表每个约束条件所在行的数字来控制 Attributes 窗口中每个视图的外边距（在图 14 中，标注 4 表明下外边距设置为 16dp）。

使用链控制线性组

链是一组视图，这些视图通过双向位置约束条件相互链接到一起。链中的视图可以垂直或水平分布。

链可以采用以下几种样式之一：

1、Spread：视图是均匀分布的（在考虑外边距之后）。这是默认值。
2、Spread inside：第一个和最后一个视图固定在链两端的约束边界上，其余视图均匀分布。
3、Weighted：当链设置为spread或spread inside时，您可以通过将一个或多个视图设置为“match constraints”(`0dp`) 
来填充剩余空间。默认情况下，设置为“match constraints”的每个视图之间的空间均匀分布，但您可以使用
 `layout_constraintHorizontal_weight` 和 `layout_constraintVertical_weight` 属性为每个视图分配重要性
权重。如果您熟悉[线性布局](https://developer.android.com/guide/topics/ui/layout/linear)中的 `layout_weight`
的话，就会知道该样式与它的原理是相同的。因此，权重值最高的视图获得的空间最大；相同权重的视图获得同样大小的空间。
4、Packed：视图打包在一起（在考虑外边距之后）。 然后，您可以通过更改链的头视图偏差调整整条链的偏差（左/右或上/下）。

如需创建链，请选择要包含在链中的所有视图，右键点击其中一个视图，选择 Chains，然后选择 Center Horizontally 或 Center Vertically，如视频 4 中所示：

图17_具有两个视图的水平链.png

图18_每种链样式的示例.png

自动创建约束条件

您可以将每个视图移动到您希望的位置，然后点击 Infer Constraints自动创建约束条件，而不是在将视图放入布局中时，为其添加约束条件。

Infer Constraints 会扫描布局，以便为所有视图确定最有效的约束集。它会尽可能将视图约束在当前位置，同时提高灵活性。您可能需要进行一些调整，以确保布局能够按照您的预期针对不同的屏幕尺寸和方向进行响应。

Autoconnect to parent 是您可以启用的独立功能。启用后，当您将子视图添加到父视图时，此功能会自动为每个视图创建两个或多个约束条件，但仅在可以将视图约束到父布局的情况。Autoconnect 不会为布局中的其他视图创建约束条件。

Autoconnect 在默认情况下处于停用状态。点击布局编辑器工具栏中的 Enable Autoconnection to Parent，即可启用该功能。

注意：经自测，如果布局中使用了链，Autoconnect to parent会失效；

ConstraintLayout Api介绍

基础Api

layout_constraintStart_toStartOf: 当前控件左侧与目标控件左侧对齐。
layout_constraintStart_toEndOf：当前控件左侧与目标控件右侧对齐。
layout_constraintTop_toTopOf：当前控件顶部与目标控件顶部对齐。
layout_constraintTop_toBottomOf：当前控件顶部与目标控件底部对齐。
layout_constraintEnd_toStartOf：当前控件右侧与目标控件左侧对齐。
layout_constraintEnd_toEndOf：当前控件右侧与目标控件右侧对齐。
layout_constraintBottom_toTopOf：当前控件底部与目标控件顶部对齐。
layout_constraintBottom_toBottomOf：当前控件底部与目标控件底部对齐。
layout_constraintBaseline_toBaselineOf: 当前文本控件与目标文本控件基线对齐。

高级Api分享

##### 以下为一组Api联合使用。#####
layout_constraintCircle：引用另一个小部件ID。
layout_constraintCircleRadius：到另一个小部件中心的距离。
layout_constraintCircleAngle：小部件应该处于哪个角度（以0到360度为单位）。
##### 以上为一组Api联合使用。#####

layout_goneMarginStart：当前控件隐藏时对目标控件的左侧边距(上下左右goneMarginXXX类似)。
layout_constraintDimensionRatio: 设置宽高比（高度为0dp，1:2），高为宽的2倍。
layout_constraintHorizontal_bias: 控件按照百分比进行布局摆放，支持横向、竖向。
constraint_referenced_ids: 屏障约束id，多个id以英文逗号分割。
androidx.constraintlayout.helper.widget.Layer: 给定一组View添加背景、同时支持设置内边距。
androidx.constraintlayout.widget.Group: 对给定id的View进行统一的操作。例：同时隐藏或展示。

解析ConstraintLayout的性能优势
完~

ConstraintLayout-[Android_YangKe]