https://startandroid.ru/ru/uroki/vse-uroki-spiskom/489-urok-180-constraintlayout-osnovy.html
第180课，约束布局，基础知识
2017年7月7日
Android Studio默认情况下建议我们在创建屏幕布局时使用ConstraintLayout。让我们看看这是什么以及如何使用它。
虽然这是第180课，但它会被初学者监禁，因为 这里将是第一堂课的链接。因此，有经验的开发人员请不要对演示风格感到惊讶，可以跳过一开始。
些理论
让我们从基础开始。要在屏幕上放置不同的组件（按钮，输入字段，复选框等），您需要使用特殊容器。这是您放置组件的位置。在Android中，组件称为View，容器是ViewGroup。
ViewGroup有几种类型：LinearLayout，RelativeLayout，FrameLayout，TableLayout，ConstraintLayout等。
他们在如何订购组件本身方面存在差异。例如，LinearLayout将水平或垂直排列。和TableLayout - 以表格的形式。您可以在第6课中阅读更多相关信息。
在本教程中，我们将了解ConstraintLayout容器中的组件的行为方式。
一般来说，Constraint这个词翻译为限制，强制。但就我而言，它并没有完全反映出其含义。我能在这里找到的最恰当的词是绑定。我会用它。
实践
为了让您自己练习，我建议您为本课程创建一个模块。我们已经在第3课中讨论了如何创建模块。
在工作室菜单中：文件 > 新建 > 新模块
应用程序/库名：ConstraintLayoutIntro
模块名称：p0180constraintlayoutintro
包名：ru.startandroid.p0180constraintlayoutintro
所以，我们在Android Studio中有一个模块。还有一个文件res> layout> activity_main.xml。
双击打开此文件。他看起来像
确保左下方的明信片设计选项卡和视图模式选择设计，而不是蓝图。
现在在屏幕上，您会看到文本Hello World。使用名为TextView的视图显示此文本。
您可以在组件树（左下角）中看到它。
请注意，textview嵌套在ConstraintLayout中。这就是我在开始时所说的。ConstraintLayout是一个容器，在它里面有各种视图，在我们的例子中是TextView。您还可以说ConstraintLayout是TextView的父ViewGroup或父ViewGroup。
我们从屏幕上删除textview。要执行此操作，只需在屏幕上或组件树中选择它，然后按键盘上的Del按钮。
现在ConstraintLayout为空，屏幕不显示任何内容。
如果您突然错误地删除了某些内容，则可以通过按Ctrl + Z来恢复它。
如果你在那里，你不能取消它，然后打开文本选项卡（左下角）并粘贴此代码：
| 1 2 3 4 五 6 7 8 9 10 11 12 13 14 15 16 |
|
您的屏幕将恢复其原始状态。
为什么需要绑定
让我们在屏幕上添加一些组件，例如TextView。要执行此操作，只需使用鼠标从组件面板将组件拖动到屏幕即可。
之后，TextView出现在屏幕上和组件树中。
运行该应用程序，看看该文本的样子。
我们看到TextView向左和向上移动。显然出了点问题。
如果打开屏幕的文本视图（左下角的“文本”选项卡），您将看到TextView元素带有红线下划线。
如果将鼠标悬停在鼠标上，则会显示错误：
除非您添加约束，否则此视图不受约束。
有了这条消息，工作室告诉我们View不受束缚。它在屏幕上的当前位置仅与开发相关（即仅在工作室中）。当应用程序运行时，此位置将被忽略，View将转到点（0,0），即 左起（我们在启动时观察到的）。
如何使ConstraintLayout中的视图保持原位而不是移动到角落？有必要添加绑定（约束）。它们将相对于任何其他元素或相对于父视图在屏幕上定位视图。
如何添加绑定
让我们为TextView添加绑定。
如果在屏幕上突出显示TextView，则可以在其两侧看到4个圆圈。
这些圆圈用于创建绑定。
有两种类型的绑定：一些是水平设置视图位置，另一些是垂直设置。
创建水平参考。将TextView绑定到其父级的左边缘。让我提醒一下，TextView的父级是ConstraintLayout，在我们的例子中占用了整个屏幕。因此，ConstraintLayout的边缘与屏幕的边缘重合。
要创建绑定，请单击TextView以选择它。然后用鼠标左键按住左圆圈并将其拖动到左边框。
TextView也离开了。他变得依附于他父母的左边界。
但他们不一定非常接近。我们可以设置缩进。要执行此操作，只需按住鼠标左键TextView，向右拖动并释放。
注意正在改变的数字。这是从它附加的对象的TextView缩进量（在我们的示例中，从父对象的左边框）。
运行该应用程序
我们曾经让TextView左上角，现在它刚刚上升。在左边他没有离开，因为 我们为它创建了一个水平参考。而TextView现在知道横向它应该放置左边缘的某个缩进。
让我们创建一个垂直引用来纵向固定textview。
使用上圆并将其拖动到上边界。TextView垂直绑定到父级的顶部。之后，您可以将TextView拖动到需要调整水平和垂直缩进的位置。拖动时，您会看到缩进值。
现在TextView水平和垂直连接。即 在应用程序运行时，他确切知道应该在屏幕上的哪个位置。
跑来检查
TextView没有任何地方，但我们使用绑定设置它。
让我们添加另一个视图，例如Button。
如果您现在启动应用程序，该按钮将保持左键，因为它与任何内容无关。
我们不仅可以绑定父级的边界，还可以绑定到其他View。我们将一个按钮绑定到TextView。
我们通过创建两个绑定将一个按钮绑定到TextView。
1）垂直参考。按钮的上边框绑定到TextView的下边框。缩进= 82.
即 我们可以说在垂直轴上：
按钮的上边框= TextView + 82的下边框
2）水平对齐。按钮的左边框绑定到TextView的右边框。缩进103.
在水平轴上：
按钮的左边框= TextView + 103的右边框
因为 按钮绑定到TextView，然后如果我们现在移动TextView，按钮也会移动。
添加另一个视图。例如，CheckBox。
让它在与TextView相同的水平上水平。为此，我们需要将CheckBox的左边框附加到TextView的左边框并进行零缩进。垂直方向，我们绑定到父级的下边界。
现在复选框和TextView对齐到左侧。
如何删除绑定
要删除绑定，只需单击相应的圆圈即可。从按钮中删除绑定。
要一次删除所有绑定，有一个特殊按钮
从两面绑定
我们查看了仅在一侧将视图绑定在每个轴上的示例。即 仅水平向左或向右，垂直从上方或下方。但是我们可以在每个轴上从两侧绑定视图。
现在，只考虑水平参考。但是，当然，所有这些都适用于垂直绑定。
例如，让我们尝试将左边缘绑定到父边界的左边界，将右边缘绑定到父边框的右边界。
从所有View清除屏幕并添加一个没有任何绑定的新TextView。现在我们将它绑定到父级的左右边界。
TextView首先走到左边，因为 有一个绑定到左边框，但在创建绑定到右边框后，它被平整，现在位于中心。即 绑定相互等同，而View正好位于左侧绑定的位置和绑定到右侧的绑定之间。即 在我们的例子中，View位于其父级的左右边界之间的中间。
请注意，这些双向绑定显示为弹簧，而不是线条。
让我们通过添加按钮并重新配置绑定来使示例更复杂一些。
按钮绑在右边。TextView绑定到左边缘和按钮。
如果我们现在移动按钮，TextView将保持在左边缘和按钮之间的正中间。
我们可以调整双向绑定，使View不在中间，但更靠近左边缘或按钮。为此，在Properties中使用特殊滚动很方便。
使用此滚动条设置比例。默认值为50.这是100的一半。因此，View位于它所连接的对象之间距离的一半。在我们的例子中，值为50时，TextView位于左边缘和按钮之间的中间位置。
如果放置一个值，例如25，则TextView将位于左边缘，其距离等于左边缘与按钮之间距离的四分之一。如果放入75，则TextView将从左边缘开始，距离左边缘和按钮之间的距离等于3/4。
无论左边缘和按钮之间的距离如何变化，这些比例都将得到尊重。