安卓开发之ConstrainLayout辅助UI设计小工具（一）

2024-02-03 15:48:58

下面使用的均是截图，如果浏览量可以的话，我抽空全部换成GIF图片，大家可以先收藏，下次可能就能看见GIF图片，效果更好
先来介绍一下ConstrainLayout的界面
（这里偷偷用一下官方介绍）

Palette：包含您可以拖到布局中的各种视图和视图组。
Component Tree：显示布局中的组件层次结构。
工具栏：点击这些按钮可在编辑器中配置布局外观及更改布局属性。
设计编辑器：在 Design 视图和/或 Blueprint 视图中修改布局。
Attributes：用于对所选视图的属性进行控制的控件。
视图模式：采用 Code code 模式图标、Design design 模式图标或 Split split 模式图标
模式查看布局。Split 模式会同时显示 Code 和 Design 窗口。
缩放和平移控件：控制编辑器内的预览大小和位置。
当您打开 XML 布局文件时，默认会打开设计编辑器，如图 1 所示。如需在文本编辑器中修改布局 XML，请点击窗口右上角的 Code code 模式图标按钮。请注意，在 Code 视图中修改布局时，Palette、Component Tree 和 Attributes 窗口不可用。

Design 和 Blueprint：选择您希望如何在编辑器中查看布局。选择 Design 可查看布局的渲染后预览效果。选择
Blueprint 可仅查看每个视图的轮廓。选择 Design + Blueprint 可并排查看这两个视图。您还可以按 B
循环浏览这些视图类型。
屏幕方向和布局变体：选择屏幕方向（横向和纵向），或选择应用提供备用布局的其他屏幕模式（例如夜间模式）。该菜单还包含用于创建新布局变体的命令。
您还可以按 O 更改屏幕方向。
设备类型和尺寸：选择设备类型（手机/平板电脑、Android TV 或 Wear
OS）和屏幕配置（尺寸和密度）。您可以从多种预配置的设备类型和您自己的 AVD 定义中选择，也可以从列表中选择 Add Device
Definition 创建新的 AVD。您可以通过拖动布局的右下角来调整设备尺寸，还可以按 D 循环浏览设备列表。
API 版本：选择预览布局时使用的 Android 版本。
AppTheme：选择要应用于预览的界面主题背景。请注意，这仅适用于支持的布局样式，因此该列表中的许多主题背景都会导致出错。
Language：选择要以何种语言显示界面字符串。此列表仅会显示字符串资源主持的语言。如果您想要修改翻译，请点击下拉菜单中的 Edit Translations。

下面来介绍一些实用小工具

.

从左到右按顺序：View Option //Enable Autoconnection to Parent // Default Margins // Clear All Constraints // Infer Constraints // Pack // Align // Guidelines

View Option
一个眼球状的工具点击出现如下

下面来分别解释一下所有选项的含义：
Show All Constraints:显示所有组件的所有限制
选中后，右屏预览屏会显示所有组件的所有限制
并且当鼠标选中屏中某个控件时，屏的所有组件的限制关系都会显示

未使用Show All Constraints：

使用后：
大家应该能看见所有控件的限制都显示出来了

Show Margins
显示约束和边界的距离（针对直线型限制）

Fade Unselected Views
视觉党福利：和Show All Constraints一起使用，在点击其他控件时，未被点击控件的限制慢慢消逝。
当前选中控件的的未选中（或者未改变）的限制也会褪色
Live Rendering
还没弄懂是具体有什么作用，有知道的小伙伴可以在评论区回复一下

Show System UI && Default Margins
Show System UI：显示App的使用预览图

使用App时，文字如果离屏幕边界很近，十分烦人
使用Default Margins可以在设计时为屏幕设定边界，这样设计时控件和文字可以更好的对齐
这里我使用了8dp的边界，此时控件接近8dp会有明显的停顿

2.Clearing All Constraints && Infer Constraints

首先第一个工具，快速清除所有控件的限制
第二个工具，选中控件后，可以快速的为控件添加限制（控件多，控件距离近的时候少使用）
控件少时如下：

控件排列紧密时：
3.Pack:

选中组件后，会将组件按照（垂直、水平）方向扩大

4.Align

有四种，模式，这里先从最后开始讲
Vertically in Parent :垂直方向和父布局建立限制
Horizontally in Parent:水平方向和父布局建立限制
Vertically:会和该组件垂直方向下的控件建立连接
Horizontally:会和该组件水平方向的控件建立连接

5.Guideline

我认为最有用的工具之一，可以设置方便设计UI的指引线和障碍
建立Guideline后，组件可以和Guideline建立连接，便于UI界面的设计以及更改
![在这里插入图片描述](https://www.icode9.com/i/ll/?i=20210513225543216.png)

这里只介绍1，3，5项
第一项：
选择后添加垂直方向的Guidelines

Guideline还有另一种状态，那就是Guidelines_percent(百分比Guidelines)
更换方法：两次单击箭头

我在使用垂直Guidelines会出先无法切换百分比Guidelines的情况
这里有解决方法
我创建Guidelines会无法通过两次单机更改模式

这里我们通过修改属性就好了
将右侧的layout_width,layout_height,layout_constarinGuide_begin全部修改为0，然后就可以通过两次单机Guidelines的箭头来改变Guidelines的模式

第二项：
编辑中
第三项：
编辑中。。。

码农公寓

2.Clearing All Constraints && Infer Constraints

5.Guideline

相关文章