本文讲的是使用约束控件创建界面,

如果你是刚刚接触约束控件——支持库中与 Android Studio 2.2 可视化 UI 编辑器紧密结合的新布局——我建议首先观看上面的介绍视频或者浏览我们的代码库。

视频和代码库简明扼要地介绍了布局编辑器中的一些处理方式、约束和 UI 控制的基本概念,了解这些有助于你快速在可见的方式下搭建界面。

本文中,我将着重讲解最近在 Android Studio 2.3 (Beta) 中约束控件的新增内容:链条和比率,同时也会写一些普通约束控件中的一些建议和技巧。

链条

创建链条是一项新的特性,让你能够沿着一个坐标轴(水平或垂直)布置组件,从概念上来看有点类似线性布局。在约束控件中的实现中,链条是一系列通过双向连接联系起来的组件。

要想在视图编辑器中创建链条,你只需选择目标组件并右击,点击“Center views horizontally“(或“Center views vertically”)。

这就在组件之间建立了必不可少的关联。此外,当你选择链条中任何一个元素时,都会出现一个新的按钮,你可以在三种链条模式之间切换:分布式(Spread)、内分布式(Spread Inside)和密集式(Packed)链条。

有两个额外的技巧可以用来更方便地操作链条:

如果你创建了一个分布式或者内分布式链条,并且所有的组件尺寸都被设置成 MATCH_CONSTRAINT(或者“0dp”),其余的链条空间将会根据在 layout_constraintHorizontal_weight 或则 layout_constraintVertical_weight 中定义的值平均分布。

如果你创建了一个密集式链条,你可以通过调整水平(或者垂直)焦点来使链条元素左右(或者上下)移动。

比率

比率大致上能够实现和百分比布局相同的效果,IE 中可以通过设定比率来限制 View 的宽高,而不用在 ViewGroup 的层次上增加额外开销。

在约束控件中为组件设置比率:

  1. 确保至少一个约束尺寸可变,也就是说,不允许设置为“Fixed”和“Warp Content”。
  2. 点击左上角的“Toggle aspect ratio constraint”。
  3. 按照宽度:高度的格式输入你想要的比率,比如:16:9 。

辅助线

辅助线是用来帮助你布置其他组件的可视的组件。它们在运行时并不会可见,但同样可以用来添加约束,可以从下拉项中创建垂直或者水平的辅助线。

点击选择新添加的辅助线,拖动到合适的位置。

点击组件的顶部(或左部)标志可以切换辅助线对其模式:固定距离的左/右(或者上/下)对齐模式和相对父元素的百分比宽/高对齐模式。

处理 View.GONE

与相对布局相比,在约束控件布局中你将能更好地控制组件的 View.GONE 可见性。最重要的一点,任何设置为 GONE 的组件,其尺寸和外边距约束将缩小为零,但仍然参与约束的计算。

许多情况下,如图所示的一系列通过约束联系起来的组件只会在一个组件被设置为 GONE 时生效。

还有一个方法可以为约束绑定在 GONE 移除时的组件设置特定的外边距,使用 layout_goneMarginStart (…Top, …End, 和 …Bottom) 属性来实现。

这样可以处理更复杂的情况,正如上如所示,我们可以设置特定的组件消失而不用改变代码。

不同类型的居中对齐

在约束控件布局的链条属性中,我已经提到过一种居中方式了。当你选择一组组件时,点击“Center horizontally”(或者“center vertically”)来创建一个链条。

你也可以使用相同的选项,使一个组件居中对齐在其相邻的组件中间:

 如果要忽略其他组件,在父元素内居中对齐,使用“Center horizontally/vertically in parent”选项。需要注意的一点是,通常你会对一个单独的元素使用这个选项,并且这不会创建链条。

有时,你需要两个不同尺寸的组件中心对齐,不妨这样:当不同约束把一个组件拉向两个不同的方向时,它会稳定在两个约束的中间位置(每个方向 50% 偏心距)。

我们可以使用相同的方法,通过设置两个相同方式的关联,使一个组件相对于另一个组件的一边居中对齐。

使用 Space 实现负外边距

约束控件布局中不支持负的外边距,然而,有个小技巧可以使你获得相同的效果,通过插入 Space(实质上是一个空组件)并且设置尺寸为理想外边距的大小。如下所示:

什么时候使用自动生成

当你在工具栏中选择“自动生成布局(Infer constraints)”命令时,编辑器会找出约束控件布局中缺少的组件约束,并且会自动添加。它也可以从一个没有任何约束的视图开始设置,但由于很难创建一个完全正确的视图,你可能会得到很混乱的结果。这也是我建议通过这两种方式来使用约束界面:

首先是尽可能多地手动创建约束,这样你的布局能够最大化地得到实现并且具有功能可靠。然后,点击自动生成来为一些没有约束的组件创建约束,这样能节省你一点工作量。

另一个方法就是,将组件置于编辑器中不创建任何约束,使用自动生成命令,然后修改预览设备的分辨率。查看有哪些尺寸和位置错误的组件并修正这些约束,然后换一个分辨率重复操作。

这归根到底取决于你的喜好,每个人为布局创建约束的方式各有千秋,当然也包括有些人喜欢纯手工地实现巧夺天工的布局。

不支持适应父元素

使用 match_constraint(0 dp)来替代,并且可以根据意愿给父元素设置约束,配合正确的外边距处理方式可以实现相同的效果,不应在约束布局中使用“Match parent”。






原文发布时间为:2016年12月29日

本文来自云栖社区合作伙伴掘金,了解相关信息可以关注掘金网站。

使用约束控件创建界面相关推荐

  1. 综合使用各种布局和控件创建出计算器界面

    综合使用各种布局和控件创建出计算器界面 Grid layout子控件超出屏幕的一个解决方法 主要是gridlayout的使用(Tablelayout无法实现跨行操作) 有想法的小伙伴也可以用其他的 G ...

  2. UI基础控件创建(UILabel、UITextField、UIButton)

    UI基础控件创建(UILabel.UITextField.UIButton) UILabel //UILabel;UILabel *nameLabel = [[UILabel alloc] init] ...

  3. 为ActiveX控件创建Cab文件

    为ActiveX空间添加Cab文件 目的: 1.  依赖MFC库或ATL库等开发的ActiveX控件要正常的运行必须依赖这些库.但是你不能保证你用户的机器上装有与你开发环境相同的库,所以,当你发行一个 ...

  4. 【Excel2019(二十一):经典动态图实现原理】【动态图表实现原理+利用OFFSET函数与控件创建动态图表】

    上一篇:[Excel2019(二十):图表基础][认识图表中的元素+创建并美化柱形图] 文章目录 动态图表实现原理 理解图表中的数据系列 手工修改系列中的数值与坐标轴数据 利用IF创建简单的动态图表 ...

  5. android treeview 树形结构,前端开发中,使用TreeView控件创建树形结构

    原标题:前端开发中,使用TreeView控件创建树形结构 Wijmo是一款使用Type编写的新一代Java/HTML5控件集.它秉承触控优先的设计理念,在全球率先支持AngularJS,并提供性能卓越 ...

  6. C#AE二次开发——使用AE控件创建第一个桌面应用程序

    ---------------- 版权声明:本文为CSDN博主「人生.蜕变」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明. 原文链接:https://blog. ...

  7. vue拖拽控件生成界面代码_Blue HMI人机界面开发平台

          随着信息技术在军工.制造业等领域的不断普及和快速发展,各行业信息系统软件的研制正在由传统的重复.烟囱式开发模式向以系统顶层设计为指导,以标准化.组件化.集成化软件开发为重点的模式逐步转变. ...

  8. android开发重要控件,Android界面编程——Android基本控件

    Android界面编程 Android应用开发的一项重要内容就是界面开发.对于用户来说,不管APP包含的逻辑多么复杂,功能多么强大,如果没有提供友好的图形交互界面,将很难吸引最终用户. 作为一个程序员 ...

  9. android高德地图上加自定义菜单,自定义UI控件-UI界面定制-开发指南-Android 导航SDK | 高德地图API...

    关于自定义 UI 布局,您还可以参考官方Demo--完全自定义UI导航. 单元素自定义 可以通过AMapNaviViewOptions中如下接口进行单UI元素显示隐藏,只列出部分接口,更多功能请参考A ...

最新文章

  1. Error running app: Instant Run requires 'Tools | Android | Enable ADB integration' to be enabled.
  2. Linux全攻略--MySQL数据库配置与管理
  3. android java 回调方法接口
  4. MyCat 入门指南
  5. oracle 数据库问题,ORACLE数据库常见问题汇总,oracle常见问题汇总
  6. c# AutoMapper 使用方式和再封装
  7. QT5获取QPlainTextEdit 某行内容
  8. 照着官网来安装openstack pike之neutron安装
  9. java保留小数_java保留两位小数4种方法
  10. 【Java从0到架构师】Spring - 事务管理
  11. python库numpy的reshape的终极解释
  12. 自定义Flume Sink:ElasticSearch Sink
  13. 进阶06 List集合
  14. Android 学生管理系统
  15. python基本快捷键
  16. 主力用计算机吸筹,通达信主力吸筹指标
  17. 腾讯云买服务器密码,腾讯云服务器初始密码是什么?
  18. python图片变清晰的软件_Python功能确实非常强大!不止PS可以美化照片Python也可以!满分...
  19. QTTabBar Windows资源管理器增强插件
  20. 如何删除word中页眉的横线

热门文章

  1. vue2.0中的$router 和 $route的区别
  2. 使用git向码云上提交代码
  3. Vue.js过滤器概述
  4. 三维建模:方法之CSG与B-Rep比较
  5. [09-01]JavaScript 基础语法
  6. TypeScript--es5中的类,继承,静态方法
  7. 物联网技术泡沫多 期望与现实不匹配
  8. 4.6 Routing -- Rendering A Tempalte
  9. php-fpm backlog 项的调整
  10. Character中的奇葩