Android-0.Android Studio布局中ConstraintLayout及designer简介

最新推荐文章于 2024-09-24 22:15:44 发布

花熊

最新推荐文章于 2024-09-24 22:15:44 发布

阅读量2.8k

点赞数 6

分类专栏： Android

本文链接：https://blog.csdn.net/hgy413/article/details/82951886

版权

Android 专栏收录该内容

65 篇文章 2 订阅

订阅专栏

文章目录

ConstraintLayout适合使用可视化的方式来编写界面，但并不太适合使用XML的方式来直接进行编写。

更改预览外观

参考：https://developer.android.com/studio/write/layout-editor

Design and blueprint：用于选择在编辑器中查看布局的方式。Design视图显示布局的彩色预览，而 Blueprint视图仅显示每个视图的轮廓。
Screen orientation：用于在横屏和竖屏方向之间旋转设备。
Device type and size：用于选择设备类型（手机/平板电脑、Android TV 或 Android Wear）和屏幕配置（尺寸和密度）。您可以从多个预配置的设备类型和您自己的 AVD 定义中进行选择，或从列表中选择 Add Device Definition 新建 AVD 定义。
API version：用于选择要在上面预览布局的 Android 版本。
应用主题背景：用于选择将应用到预览的 UI 主题背景。注：此按钮仅对支持的布局样式有效；因此，此列表中的许多主题背景会导致错误。
Language：用于选择显示 UI 字符串的语言。此列表仅显示字符串资源中可用的语言。如果您要编辑译文，请从下拉菜单中点击 Edit Translations（请参阅使用 Translations Editor 对 UI 进行本地化）。

将布局转换为 ConstraintLayout

低版本的andriod studio 自动创建的这个布局默认使用的是RelativeLayout，我们可以通过如下操作将它转换成ConstraintLayout:

在 Android Studio 中打开现有布局并点击编辑器窗口底部的 Design 标签。
在 Component Tree 窗口中，右键点击布局，然后点击 Convert layout to ConstraintLayout。

转换完成之后，原RelativeLayout中的内容也会自动转换到ConstraintLayout中，比如图中的TextView。如果你不需要它的话，可以选中这个控件，然后按键盘上的Delete键即可删除。

基本操作

ConstraintLayout的基本用法很简单，比如我们想要向布局中添加一个按钮，那么只需要从左侧的Palette区域拖一个Button进去就可以了，如下图所示。

添加约束

虽说现在Button已经添加到界面上了，但是由于我们还没有给Button添加任何的约束，因此Button并不知道自己应该出现在什么位置。
我们在预览界面上看到的Button位置并不是它最终运行后的实际位置，如果一个控件没有添加任何约束的话，它在运行之后会自动位于界面的左上角。在Component Tree处有警告，如上图所示。
那么下面我们就来给Button添加约束，如下图所示:

上图中Button的上下左右各有一个圆圈，这圆圈就是用来添加约束的，我们可以将约束添加到ConstraintLayout，也可以将约束添加到另一个控件。比如说，想让Button位于布局的右下角，就可以这样添加约束，如下图所示。

我们来看看约束的规则：

每个视图必须至少有两个约束：一个水平和一个垂直。
只能在约束控键和共享相同平面的锚点之间创建约束。因此，视图的垂直平面（左侧和右侧）可以仅限于另一个垂直平面; 基线只能限制在其他基线上
每个约束控键只能用于一个约束，但可以创建多个约束（从不同的视图）到相同的锚点’

类似地，如果我们想要让Button居中显示，那么就需要给它的上下左右都添加约束，如下图所示。类似地，如果我们想要让Button居中显示，那么就需要给它的上下左右都添加约束，如下图所示。

对齐

ConstraintLayout该如何对齐呢？我们先了解对齐的概念，对齐就是将视图的边缘对齐另一个视图的相同边缘，或者是视图的中心对齐另一个视图的中心。

在上图图中，B的左侧与A的左侧对齐，我们只需要将B左侧约束到A的左侧即可：

刚才，只是将两个视图的一侧对齐了，如果想两个视图的中心对齐，应该怎么做呢？比如说，我们希望再添加一个Button，让它位于第一个Button的正下方，并且间距76dp，那么操作如下所示。

刚才只是，做了两个视图的对齐，如果是多个视图对齐，是不是就需要两两作对分别做约束呢，不用说也是特别的繁琐，必然不合理。既然不合理，那不用说也有工具了。在Component Tree中选择所需对齐的视图，然后在Component Tree里右键点击被选择的视图，多选使用shift配合，在Align中选择视图中心对齐：

删除约束

删除约束的方式一共有三种:

删除一个单独的约束，将鼠标悬浮在某个约束的圆圈上，然后该圆圈会变成红色，这个时候单击一下就能删除了
删除某一个控件的所有约束，选中一个控件，然后它的左下角会出现一个删除约束的图标，点击该图标就能删除当前控件的所有约束了
点击工具栏中的删除约束图标

视图的inspector

首先可以看到，在Inspector中有一个纵向的轴和一个横向的轴，这两个轴也是用于确定控件的位置的。我们刚才给Button的上下左右各添加了一个约束，然后Button就能居中显示了，其实就是因为这里纵横轴的值都是50。如果调整了纵横轴的比例，那么Button的位置也会随之改变，如下图所示。

不过，虽然我们将横轴的值拖动到了100，但是Button并没有紧贴到布局的最右侧，这是为什么呢？实际上，Android Studio给控件的每个方向上的约束都默认添加了一个16dp的间距，从Inspector上面也可以明显地看出来这些间距的值。如果这些默认值并不是你想要的，可以直接在Inspector上进行修改，如下图所示：

可以看到，修改成0之后Button右侧的间距就没了。接下来我们再来学习一下位于Inspector最中间的那个正方形区域，它是用来控制控件大小的。一共有三种模式可选，每种模式都使用了一种不同的符号表示，点击符号即可进行切换。

表示wrap content
表示Fixed，也就是给控件指定了一个固定的长度或者宽度值。
表示Match Constraint
三者的变化如下，单击正方形内即可切换：

Match Constraint有点类似于match parent，但和match parent并不一样，是属于ConstraintLayout中特有的一种大小控制方式，下面我们来重点讲解一下。最大的区别在于，match parent是用于填充满当前控件的父布局，而Match Constraint是用于填充满当前控件的约束规则。举个例子更好理解，如果我们有一个新的Button，它的其中一个约束是添加到当前这个Button上的，那么Match Constraint的效果也会发生改变，如下图所示。