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。
无论左边缘和按钮之间的距离如何变化,这些比例都将得到尊重。