其他分享
首页 > 其他分享> > 安卓开发之ConstrainLayout辅助UI设计小工具（一）

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

作者：互联网

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

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

在这里插入图片描述

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

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

.
在这里插入图片描述
从左到右按顺序：View Option //Enable Autoconnection to Parent // Default Margins // Clear All Constraints // Infer Constraints // Pack // Align // Guidelines

  1. 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的模式

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

标签：控件,Guidelines,安卓,布局,视图,UI,ConstrainLayout,组件,Constraints
来源： https://blog.csdn.net/m0_52410356/article/details/116744369