概述

本节将会介绍最常用的几种约束,基本可以满足90%以上的UI布局要求。

先附上一份其他优秀博客https://blog.csdn.net/companion_1314/article/details/51823243,该篇博文使用GIF演示了常见约束,很好的给新手一个直观印象,我本人也从其中受益良多,贴在此处以供参考。

Xcode提供的约束总共可以分为以下六种:

1. 距离约束

2. 边长约束

3. 比例约束

4. 对齐约束

5. 容器约束

6. 伸缩/拉伸等级约束

接下来我们将对这5种约束进行一一描述。

距离约束

任意一个UI控件都是矩形布局,我们将其4边称为“边界”。这个手机屏幕的4边也是“边界”。

则距离约束指的是,对控件及其四周最近的“边界”间的约束

例1:上边距0,下边距300,左边距0,右边距0

例2:在空的storyboard上拖入label“神鸟归位”,并设置约束:上边距0,下边距300,左边距0,右边距0。

然后再拖入label“菜鸟站边”,并设置约束:上边距0,下边距50, 左边距0, 右边距0。

边长约束

边长约束指的是,对控件长宽的约束

不同于距离约束,边长约束只能确定控件的大小,不能确定其位置,所以必须搭配其他约束才能确定控件。

例1:左边距0,上边距0,长200,高200

例2:首先按例1的方式约束label“神鸟归位”,然后拖入新的label“菜鸟看齐”。

首先设置“菜鸟看齐”的距离约束:左边距0,下边距0。

然后先选中“菜鸟看齐”,再按住"shift"并选中“神鸟归位”,然后设置“等宽”“等高”约束。

PS:

细心的同学可能会注意到,不知从什么时候开始,这里多出来了一个小黄点

点进去看一下,我们会发现两个关键字:overlapping(覆盖)和clipping(截断)。

还记得上一节中“举个栗子”那三张图吗?

这里使用的约束方式(尤其是例1)正式控件默认使用的约束方式。

当然,这些警告并不妨碍编译,所以我们暂且忽略它们。

比例约束

例:首先设置距离约束:上/左/右边距0,并开启比例约束。

默认的比例约束并非我们想要的(此处为121:36),于是我们将其设置为2:1,并按回车键。

对齐约束

例1:首先设置label“神鸟归位”左边距50,上边距50,长200,高200

然后拖入label“菜鸟站边”,设置上边距50,长200,高200。

这时我们会发现左上角出现了一个错误提示,label“菜鸟站边”周边出现了红色框框,这时因为label“菜鸟站边”的约束不够明确(左边位置无法确定)。

按住“shift”键依次选中label“菜鸟站边”和label“神鸟归位”,然后选择起始对齐。

这样我们看到2个labe的左边框都对齐了。

其他三边的对齐方式与此雷同,此处不再赘述。

容器约束

例1:以整个屏幕为容器,然后使用水平中心约束和垂直中心约束

例2:拖入1个View作为容器

给容器View添加约束:左/下/右边距0,高300

拖入1个label至View容器中,这时可以在左边的结构图中看到label“菜鸟先飞”是View的子控件。

为label“菜鸟先飞”设置垂直中心约束。

当前约束不足以确定label“菜鸟先飞”的位置,于是我们再为其添加左边距10的约束。

伸缩/拉伸等级约束

假设我们想实现如下的效果。

于是我们设置约束如下:

label“神鸟”:左/上/右边距0,高40

label“神鸟不语,霸气缕缕”:左/上/右边距0,高40

(注:先将两个label都放到面板上,且并列放置,否则label“神鸟”会直接约束到屏幕左边界)

貌似应该很完美,然鹅。。。我们看到的是

或者是

到底怎么回事呢?

每个控件都有1个“收缩等级”(hugging priority)。

当2个控件共同占有一块区域且2个控件在水平(或垂直)方向有多余空间(比如上述例子),高“收缩等级”控件不动,低“收缩等级”控件拉伸填满区域。

当2个控件“收缩等级”相同时,就会出现以上报错。

“收缩等级”分水平方向和垂直方向,以上例子报错的是水平方向“收缩等级”问题:2个label的“收缩等级”都是251。

我们不妨把左边的label的收缩等级改为“252”。

相应的还有一个拉伸等级(Compression Resistance Priority):

当2个控件共同占有一块区域且2个控件在水平(或垂直)方向空间不足(比如上述例子),高“拉伸等级”的控件不动,低“拉伸等级”的控件压缩自身内容。

话不多说,对比看下面2幅图,你就明白“拉伸等级”是什么了。

小技巧

当我们在设置约束的时候,控件的初始位置有时候会很关键。

我们分别为以上2幅图中的“菜鸟居下”添加同样的约束:水平中心约束+上边距20

结果却不一样:

我们看到,2种情形对“上边距”的理解是不同的:前者指的是和面板上边界的距离,后者指的是和“神鸟在上”下边界的距离。

所以我们最好将所要约束的控件放在我们视觉上合适的位置,以便Xcode进行自动识别。

我们的故事讲到现在,想必大家对UI布局的大部分情节已经了解到七七八八了,以上内容足以让我们应对90%以上的UI布局问题。下一节,我们将介绍其中的“曲折缘由”,给大家一个完整的故事。

上一节           回目录          下一节

四、UI开发之核心基础——约束(实用)的更多相关文章

  1. 三、UI开发之核心基础——约束(入门)

    先学个新技能:添加图片控件Image View iOS的图片控件是ImageView,ImageView通过提前载入用户指定的图片资源来显示相应的图片. 所以图片控件的关键信息有3个: 1. Imag ...

  2. 五、UI开发之核心基础——约束(深入)

    概述 本节我们将较为理论的讲述约束,更准确的说法叫做“AutoLayout”.对于后续章节要学习的内容,本篇文章并非必须,如果你也像我当年一样正在被老板踢屁股赶进度的话,但可掠过本篇. 本篇内容旨在锦 ...

  3. 20165223 实验四 Android开发基础

    实验四 Android开发基础 目录 一.实验报告封面 二.具体实验内容 (一)Android Stuidio的安装测试 (二)Activity测试 (三)UI测试 (四)布局测试 (五)教材代码测试 ...

  4. 20155324 《Java程序设计》实验四 Android开发基础

    20155324 <Java程序设计>实验四 Android开发基础 实验内容 1.基于Android Studio开发简单的Android应用并部署测试; 2.了解Android.组件. ...

  5. 20155228 实验四 Android开发基础

    20155228 实验四 Android开发基础 实验内容 1.基于Android Studio开发简单的Android应用并部署测试; 2.了解Android.组件.布局管理器的使用: 3.掌握An ...

  6. 20155219实验四 Android开发基础设计实验报告

    20155219实验四 Android开发基础设计实验报告 实验内容 安装Andriod Studio并配置软件 使用Andriod Studio软件实现Hello World!+学号的小程序 实验步 ...

  7. 20155208 实验四 Android开发基础

    20155208 实验四 Android开发基础 实验内容 1.基于Android Studio开发简单的Android应用并部署测试; 2.了解Android.组件.布局管理器的使用: 3.掌握An ...

  8. 20155202 实验四 Android开发基础

    20155202 实验四 Android开发基础 实验内容 1.基于Android Studio开发简单的Android应用并部署测试; 2.了解Android.组件.布局管理器的使用: 3.掌握An ...

  9. 实验四android开发基础

    实验四android开发基础 提交点一 Android Stuidio的安装测试: 参考<Java和Android开发学习指南(第二版)(EPUBIT,Java for Android 2nd) ...

随机推荐

  1. RSA 分段加解密【解决“不正确的长度”的异常】

    RSA 是常用的非对称加密算法.最近使用时却出现了“不正确的长度”的异常,研究发现是由于待加密的数据超长所致. .NET Framework 中提供的 RSA 算法规定: 待加密的字节数不能超过密钥的 ...

  2. xorm中的几个坑

    项目中使用的是xorm,虽然用了很顺手了,可是还是会遇到一些坑,这里纪录一些. 结构体自动忽略空字段 在xorm中,结构体会自动忽略空字段(或则说默认值,比如int 的0 ,string的" ...

  3. spring MVC配置详解(转)

    现在主流的Web MVC框架除了Struts这个主力 外,其次就是Spring MVC了,因此这也是作为一名程序员需要掌握的主流框架,框架选择多了,应对多变的需求和业务时,可实行的方案自然就多了.不过 ...

  4. 关于QQ邮箱有时候接受不到邮件的解决

    1.很可能是被当作垃圾邮件拦截了,这时候就要自己找回 2.首先点击邮箱首页 3.在最后一行倒数第三个选择自助查询 4.一般在收信查询或者删信查询里面,找到被删的邮件,添加到白名单就好了

  5. 梯度下降(gradient descent)算法简介

    梯度下降法是一个最优化算法,通常也称为最速下降法.最速下降法是求解无约束优化问题最简单和最古老的方法之一,虽然现在已经不具有实用性,但是许多有效算法都是以它为基础进行改进和修正而得到的.最速下降法是用 ...

  6. 哪个 Linux 内核版本号是 “稳定的”? | Linux 中国

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/F8qG7f9YD02Pe/article/details/79329760 https://mmbi ...

  7. C++学习 —— 灵活的继承特性

    0.继承与算法开发 在之前的笔记中,我展示了来自继承的威力.继承这种机制能够大幅度减小编码量,子类可以继承父类所有的变量,方法.利用这种机制,我们可以在其他人工作的基础上,完成有自己特色的部分.比如我 ...

  8. Spring AOP @AspectJ 入门基础

    需要的类包: 1.一个简单的例子 Waiter接口: package com.yyq.annotation; public interface Waiter { void greetTo(String ...

  9. web.py框架之i18n支持

    问题: 在web.py的模板文件中, 如何得到i18n的支持? Solution: 项目目录结构: proj/ |- code.py |- i18n/ |- messages.po |- en_US/ ...

  10. Python Solve UnicodeEncodeError 'gbk' / 'ascii' / 'utf8' codec can't encode character '\x??' in position ? 解决有关Python编码的错误

    在Python中,处理中文字符一直是很令人头痛的问题,一言不合就乱码,而且引起乱码的原因也不尽相同,有时候是python本身默认的编码器设置的不对,有时候是使用的IDE的解码器不对,还有的时候是终端t ...