Studio设计布局的新姿势

2023-10-27

ConstraintLayout基本界面

在今天的文章开始之前,有个忙想请大家帮一下,希望在京东、淘宝、当当、亚马逊购买了我的书《Android群英传:神兵利器》的朋友们,帮忙去网店上给个简短的评价,举手之劳,还是多谢大家啦~~

更新Android Studio 2.2之后,更新了布局设计器,同时,引人了ConstraintLayout,这一布局,旨在降低布局层级,其主要界面如下所示:



这里写图片描述

这个界面主要分成下面几个部分:

  • 左侧边栏,包括Palette组件库和Component Tree
  • 中间是布局设计器,包括两部分,左边是视图预览,右边是布局约束
  • 右侧边栏,上面是类似盒子模型的边界和大小布局设计器,下面是属性列表

在熟悉了界面之后,我们要做的就是理解,什么是ConstraintLayout。ConstraintLayout的核心,实际上就是『约束』,这个翻译很直接,也很准确,它可以说是一个强化的
RelativeLayout,只不过比RelativeLayout增加了更多的约束条件和方式,从这一点上去理解,就很容易接受了。

在第一次引人ConstraintLayout的时候,Android Studio会自动去下载依赖,等他自动完成安装即可。
最后,在build.gradle中会添加一行依赖:

<code class="hljs bash has-numbering">compile <span class="hljs-string">'com.android.support.constraint:constraint-layout:1.0.0-alpha8'</span></code><ul style="" class="pre-numbering"><li>1</li></ul>

Google提供了一个CodeLab来帮助开发者熟悉这个布局,地址如下所示:

https://codelabs.developers.google.com/codelabs/constraint-layout/index.html#0

同时,2016IO上Google也给出了一个Topic来讲解,地址如下所示:

https://youtu.be/sO9aX87hq9c

ConstraintLayout约束类型

简单的说,约束,就是组件与组件之间的关系,借用官网上的一张图,我们来解释下:

这里写图片描述

这里展示的,就是左右两个Button直接的关系,这实际上就是一个简单的相对布局方式,下面我们来看一下具体的约束类型。

当我们点击一个控件的时候,它的显示效果如图所示:

这里写图片描述

这里主要包含几种类型的约束

  • 尺寸约束
  • 边界约束
  • 基准线约束

我们一一来看。

尺寸约束

尺寸约束使用的是『实心方块』,如图:

这里写图片描述

这个很好理解,就是调整组件的大小。

边界约束

边界约束使用的是『空心圆圈』,如图:

这里写图片描述

边界约束,是使用最多的约束,它用于建立组件与组件之间、组件与Parent边界之间的约束关系,实际上,就是确定彼此的相对位置。

基准线约束

基准线约束,使用的是『空心圆角矩形』,如图:

这里写图片描述

基准线约束,是让两个带有文本属性的组件进行对齐的,可以让两个组件的文本按照基准线进行对齐。唯一要注意的是,你需要把鼠标放在控件上,等基准线约束的图形亮了,才可以进行拖动。

清除约束

通过工具栏上的『清除约束』按钮,或者是控件上的悬浮提示,都可以清除一个控件的所有约束条件,如图:

这里写图片描述

掌握好这几种约束条件的使用后,就可以自己去尝试下了,我们只要拖一个控件,来体验下。

约束示例

这里我把官网上的几个Demo的动图Copy过来:

这里写图片描述

这里写图片描述

这里写图片描述

这里写图片描述

这里写图片描述

自动约束Autoconnect

在布局设计器的菜单栏上,有一个『磁铁』一样的图标,如图:

这里写图片描述

默认这个按钮就是打开的,通过这个,我们可以实现组件约束的自动创建,Demo示例如图:

这里写图片描述

这个和PPT里面拖动布局的时候,会弹出对齐的基准线,然后帮你自动居中这些功能类似。实际测试下来,这个功能可以很方便的在拖动组件的时候,帮你写好约束,但有些精确的调整,还是需要手动去创建的。

约束推断Inference

在布局设计器的菜单上,还有一个『灯泡』一样的按钮,通过这个按钮,可以帮我们自动创建组件间的约束关系,他分析的是一个组件附近的组件,并根据当前在设计面板中的位置来创建约束关系。

约束推断这个功能非常强大,我们只需要把组件拖到一个地方,然后就可以通过推断,来完成最基本的约束创建,最后,手动进行完善即可。

这里写图片描述

View Inspector

Inspector界面就是设计布局的右边栏,包含了一个类似盒子模型的布局检查器和对应属性的属性列表,如图所示:

这里写图片描述

属性这一块我们就不看了,和大家在XML中写的属性是一样的,只不过这里通过可视化的方式弄出来了,这个之前就有了,我们主要来看下上面的那个界面。

18

这上面的ID,不多说了,这个盒子四周的线,代表着我们的Margin设置,在工具栏上,还可以设置Margin的基数,对于MD设计风格,这个基数一般是8dp,所以,这里可以选择X8的Margin:

这里写图片描述

另外,最外面边框上还有两个带数字的小圆圈,这个就是控制相对位置的比例的,如图:

这里写图片描述

通过这个比例的设置,我们天然就自带了百分比布局。

最后,最难理解的就是盒子里面的那四根线,如图:

这里写图片描述

这里的四根线,在点击后,会发生变化,总共有以下几种:

Fixed

这里写图片描述

这样一个类型的线,可以让你写定具体的大小数值。

Wrap Content

这里写图片描述

这个就是Wrap Content的含义,包裹内容,没有发生变化。

AnySize

这里写图片描述

这个就是最难理解的,它表示组件会占用所有的可用空间来适应约束,类似线性布局中,设置width=0,weight=1的方式。

Align

在工具栏中,可以使用对齐工具,快速给选定组件设置对齐约束,如图:

这里写图片描述

我们可以来演示下:

这里写图片描述

Pack

在工具栏中,可以使用Pack工具,快速对组件进行编组操作,如图:

这里写图片描述

快捷布局

在一个组件上点击右键,可以快速创建一些布局的快捷设计,如图所示:

这里写图片描述

在这里,可以快速设置组件的居中,对齐等方式。

GuideLine

为了更加灵活的布局,ConstraintLayout还提供了一个GuideLine,如图所示:

这里写图片描述

你可以为布局添加水平和竖直引导线,针对这条线来作为基准线布局,如图所示:

这里写图片描述

ConstraintLayout布局转换

通过Android Studio,我们可以很方便的把一个普通布局转化为ConstraintLayout,在布局设计器的左边栏下面的Component Tree来进行转换,如图所示:

这里写图片描述

转换还是很赞的,但目前还没试过复杂的布局是否有问题。

从代码角度理解ConstraintLayout属性

ConstraintLayout被称为增强的RelativeLayout,是有它的原因的,相对布局提供了layout_toBottomOf类似这样的属性来控制组件间的相对位置,那么ConstraintLayout实际上也是一样的,我们来看这样一个属性:

<code class="hljs css has-numbering"><span class="hljs-tag">app</span><span class="hljs-pseudo">:layout_constraintTop_toBottomOf</span></code><ul style="" class="pre-numbering"><li>1</li></ul>

他代表的是『期望组件的顶部,与指定组件的底部对齐』,那么了解了这个解释方式,其它的属性就很好理解了,所以说,虽然ConstraintLayout不太建议通过代码来布局了,但能理解代码的含义,对理解ConstraintLayout布局是非常有帮助的。


本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Studio设计布局的新姿势 的相关文章

随机推荐

  • 电脑正常登录QQ微信,但浏览器无法打开网页,这个你一定要学会!

    电脑能正常登录微信 QQ 但是浏览器无法打开网页的情况时有发生 掌握这三个方法 就能轻松解决问题 NO 01 检查电脑DNS是否正常 首先按Win R 输入CMD 回车 输入ping baidu com 回车 网络正常情况有回复 有 来自x
  • element table组件实现保留横向滚动条,去除纵向滚动条

    实现仅去除纵向滚动条效果 项目开发中 有这样一个需求 实现表格内容自动滚动 去掉纵向滚动条 代码如下所示 v deep webkit scrollbar width 0 height 0 这种写法确实实现了去掉了纵向滚动条的效果 不过对于我
  • 华为OD机试真题(Java),根据员工出勤信息,判断本次是否能获得出勤奖(100%通过+复盘思路)

    一 题目描述 公司用一个字符串来标识员工的出勤信息 absent 缺勤 late 迟到 leaveearly 早退 present 正常上班 现需根据员工出勤信息 判断本次是否能获得出勤奖 能获得出勤奖的条件如下 缺勤不超过1次 没有连续的
  • 活动安排算法

    问题描述 设有n个活动 每个活动要求使用统一资源 每个活动i都有起始时间s和一个结束时间f 活动1执行完成后活动2也可以完全执行 则活动1与活动2相容 活动安排问题就是要在所给的活动集合中选出最大的相容活动子集合 活动结束时间以升序排列 算
  • 面试官:说说常见的排序算法有哪些?区别?

    一 是什么 排序是程序开发中非常常见的操作 对一组任意的数据元素经过排序操作后 就可以把他们变成一组一定规则排序的有序序列 排序算法属于算法中的一种 而且是覆盖范围极小的一种 彻底掌握排序算法对程序开发是有很大的帮助的 对于排序算法的好坏衡
  • shell编程-case语句中遇到问题

    bin bash echo Hit a key then hit return read Keypress case Keypress in A Z echo Uppercase letter a z echo Lowercase lett
  • 设置QLineEidt部件输入时自动切换到英文输入法(无法输入中文)

    在输入密码时会通过输入法显示密码 只需设置一下LineEdit部件属性即可 setAttribute Qt WA InputMethodEnabled false 设置账号输入框点击时无法输入中文 使用ui的QLineEdit对象名调用 如
  • 基于SpringBoot开源项目JeeSite的持续交互介绍

    一 实战项目介绍 JeeSite 基于Spring Boot 2 0 数据存储MySQL 语言 Java 规模大小 适中 适合初学者 源码地址 https gitee com thinkgem jeesite4 本次项目演练地址 https
  • Deepin20-R7000开启显示器扩展

    联想R7000的Deepin20系统开启显示器扩展 深度论坛里我的问题贴 基本信息 机器配置 联想拯救者R7000 2020 CPU AMD R7 4800h 独显 NVIDIA 1650 出现的问题 系统安装时勾选了闭源的NVIDIA驱动
  • Qt开发记录5——Qt错误提示系列

    目录 Qt错误提示 1 multiple definition of MainWindow MainWindow QWidget 2 error invalid use of incomplete type class Ui MainWin
  • 开始学习鸟哥的Linux私房菜-基础篇(第五章)

    现在开始学习鸟哥的Linux私房菜基础篇 下面结合自己专业的学习和对这本书的理解 我从第五章开始学习 下面是我做的笔记 5 1 使用者与群组 分清用户 用户组与其他人 下面是文件的权限和对文件权限的修改 Linux文件权限概念 在Linux
  • Java-1.10

    题目描述 假设一个人45分30秒跑了14千米 编写程序 显示他以每小时多少英里为单位的平均速度 1英里约等于1 6千米 代码 public class Speed public static void main String args do
  • 矩阵简述

    矩阵加法 C ij A ij B ij 矩阵数乘 将该数与每一个元素相乘 矩阵乘法 设A大小为n m B大小为m p 则A和B的乘积得到的矩阵大小为n p 其中每一项 AB ij sum k 1 m A ik B kj 矩阵乘法不满足交换律
  • docker安装配置goland

    第一步 确保已经安装好docker 第二步 拉取最新的go版本 docker pull golang 第三步 查询镜像 展示所有的镜像 docker images 第四步 启动容器 docker run itd p 8081 8081 v
  • 慧荣SM3271AD芯片U盘量产

    优化方式可以默认的 容量优先 设置2个盘 一个可以引导的光驱 一个存储用的磁盘 开始刷机 看看系统 上认到的磁盘状态 测试用U盘光驱引导启动 顺利完成 量产工具 地址 https download csdn net download ive
  • Java实现excel导出功能的几种方法——poi、easyExcel、easypoi、jxl

    推荐使用easyExcel 简单好用 对于稍微复杂一点的表格 个人建议用jxl easypoi 以下代码中包含的操作 合并单元格 设置字体格式 加粗 字体大小 颜色 设置单元格格式 居中 边框 背景颜色 填充数据 一 jxl jxl jxl
  • 基础排序算法-快排的非递归和归并的具体实现

    目录 快排的非递归实现 归并排序 归并排序的非递归实现 内 外排序 上文 7大排序算法 堆排 快速排序 精解 luck 的博客 CSDN博客 堆排序 快速排序 快排的非递归实现 我们知道快排的实现效率很高 但是它还是有个弊端 就是我们本身栈
  • mac 电脑找不到服务器 dns 地址,MAC OS下如何快速设置DNS服务器地址

    楼主你好 介绍以下Mac OS X DNS设置方法 1 点击桌面顶部状态栏里的苹果图标 在菜单里选择 系统偏好设置 2 点击互联网与无线下的 网络 3 在网络界面 选中正在联网的网络连接 点击右下角的 高级 选项 4 在高级选项设置窗口中
  • 微服务的艺术:构建可扩展和弹性的分布式应用

    文章目录 引言 微服务的关键特点 1 小型化 2 独立性 3 通信 4 自动化 构建微服务 1 项目拆分 2 数据管理 3 通信 4 部署和容器化 5 监控和日志 6 弹性和容错性 最佳实践和工具 1 Spring Boot 2 Kuber
  • Studio设计布局的新姿势

    目录 ConstraintLayout基本界面 ConstraintLayout约束类型 尺寸约束 边界约束 基准线约束 清除约束 约束示例 自动约束Autoconnect 约束推断Inference View Inspector Fixe