ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

安卓开发之ConstrainLayout辅助UI设计小工具(一)

2021-05-17 09:02:42  阅读:273  来源: 互联网

标签:控件 Guidelines 安卓 布局 视图 UI ConstrainLayout 组件 Constraints


下面使用的均是截图,如果浏览量可以的话,我抽空全部换成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

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有