iOS Storyboard约束详解(附gif图)

约束,就是指……此处略去1万字……都懂的,就不说了。直接进入实战环节。

本文的控件约束都是围绕着UITableView展开的。

UITableView约束:

在UITableViewController中的tableView是不用添加约束的,已经被绑定了。

UITableViewCell的约束也是不用添加的,宽度都是跟其UITableView一致,高度由协议方法:

tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath)来决定。

约束的基本

约束基本内容为约束其位置、大小。

位置

位置基本可以靠约束x坐标(左边到父视图的距离),y坐标(上边到父视图的距离),也可以约束其中心位置。

大小

大小可以靠约束其宽(width)高(height),也在可在约束x坐标,y坐标的前提下,约束其右边到父视图的距离和下边到父视图的距离(前提都是父视图已经约束好了)等。

约束类型

距离约束

下边,在UIViewController中添加UITableView,并添加约束。


约束UITableView

首先,看这个弹出框


约束弹出框

一看就应该知道上边四项内容分别指,上下左右到父视图的距离。

下来这个Constrain to margains选项去掉,不去掉的话,即使你把间距设为零,它也不会紧贴着父视图,会有一段间距。关于Constrain to margains,自己查一下资料吧。一般都不会勾选这个选项的。

接下来,添加其上下左右距离父视图的约束,我们把值都设为0,注意要把红色的虚线点一下变为实线才算加了,


添加距离约束

最后还有一步,点击底部的Add constants,或者回车。否则没加上。

约束确定


很多时候,你会发现添加完约束之后,这里会有一个黄色的箭头,意思是你没有Update Frames(更新位置大小),也就是说当前的位置大小跟加完约束之后的位置大小不一致。


黄色箭头

点击一下Update Frames即可,操作如下图


Update Frames

你就会发现其尺寸变了。


Update Frames菜单

第一个Update Frames是更新当前选中视图的尺寸,第二个Update Frames
是更新全部(当前同一个父视图上的)视图的尺寸。

上边的UITableView约束了上下左右到父视图的距离,x坐标,y坐标,宽高是不是确定了呢?自己想想吧。

当约束没加完,或者约束矛盾(比如约束其左边到父视图的距离为0,但你又重复添加一个其左边到父视图的距离为10的约束)了,这里就会有一个红色的箭头


约束矛盾

点击红色箭头会有错误提示,提示你缺少哪个约束,或者那里矛盾了,如下图:

约束错误提示

宽高(width、height)约束

接下来我们在UITableView上添加一个Cell,然后在Cell上添加一个UIView,称之为view1,给UIView约束左边、上边到父视图的距离为0,宽高分别为100、44;

宽高约束

Width跟Height分别约束其宽高的具体值,我觉得没有必要多讲,记得添加的时候点上前边的勾就好,不要以为光是填写数值就好。


宽高

等高、等宽约束

在上边的基础上添加另一个UIView,称之为view2,其约束为:左边到view1的距离为10,上边到父视图的距离为0,宽高跟view1一致,操作如下图:

等高等宽约束

注意点:

1.view2放上去的时候,左边跟view1要稍微留点距离,如果view2左边遮住了view1一部分,那么在添加左边约束的时候,添加的是view2左边到父视图的距离,错误图如下,切勿模仿:

错误图

2.添加等宽等高两个约束时,要同时选中view1跟view2(command键),如图:


选中二图

否则,菜单栏这两个选项为灰色:


灰色菜单

多个视图等宽或等高,可同时选中多个,不一定是两个,但至少两个。

比例约束

在Cell上添加一个UIView,称之为view3,约束为:左边距离view2为10,上边距父视图为0,宽100,宽高比例4:1

演示如下图:


比例约束

注意点:

比例约束的前提是约束了宽高其中一项

然后,勾选Aspect Ratio

比例

最后修改比例值


比例值

边对齐约束

添加UIView,称之为view4,约束:其上边到view3距离为10,与view3左对齐,宽高均为44

演示如下图:


左对齐约束

注意点:必须同时选中view3和view4才能添加对齐约束,菜单如下图:

对齐约束菜单

四个选项分别为左对齐、右对齐、上对齐,下对齐。用法一致。

中心对齐约束

添加UIView,称之为view5,添加约束:view5与view4水平中心对齐,上边距离view4为10,宽高分别为100,44;

演示图如下:

中心对齐

注意点:跟边对齐约束一样,要选中两个view,多个亦可。

菜单如下:


中心对齐菜单

三个选项分别为水平中心对齐、垂直中心对齐、基线对齐。感觉基线对齐跟底部对齐一致,没有深究,也不常用,也许我的理解是错误的,甚至翻译都是错误的,有问题请指正,谢谢。

父视图中心对齐

添加UIView,称之为view6,添加约束:跟父视图水平中心对齐,上边到view5距离为10,宽高分别为100、44

演示如下:


父视图中心对齐

注意点:只需选中当前视图即可添加跟父视图中心对齐。

快捷约束

添加UIview,称之为view7,约束:上边距离view6为10,左右到父视图的距离均为100,高44

演示如下:


快捷约束

注意点:在选中的view上按住鼠标右键不放,拖动到对应的要添加约束的视图上释放即可,宽高(左右拖动,上下拖动)约束在本视图内释放即可。

常用控件约束及约束常见问题


练习:

将三个UIView放到Cell上,三个view的上下距离父视图均为0,左右相邻,并且等宽,宽度均为Cell宽的1/3;

演示如下图:


练习

这个不用多讲了。

UILabel、UIButton约束

在Cell上添加一个UILabel,约束:左边到父视图的距离为15,居中,

演示如图:


label约束

你会发现,只约束了UILabel的位置,没有约束宽高,上边没有红色箭头警告。这是因为UILabel的宽高可以随着字数,字体大小而默认了,也可以随之变化。UIButton与之类似。UILabel的右边跟父视图的距离一般是要约束的,防止因为字数过长跑到屏幕外边去。其他的控件视情况而定,用多了就会知道其特性。

常见问题:

1.添加一个UIView,其水平中心到父视图的左边距离为父视图宽度的1/3,该怎么添加呢?


1/3间距

Multiplier是一个系数,默认都为1。可以这么理解,水平居中的时候其中心位置=1 × 1/2 × 父视图宽。那要其中心为父视图宽的1/3,只需将系数1改为2/3即可。


2.如下图,有时候希望图片跟文字这个整体居中,而不是仅仅文字居中,怎么半呢?

居中

演示如下:


居中演示

自己理解一下吧。

3.如图绿色框中怎么利用约束巧妙实现呢?思考一下吧。累了,今天就更新到这先。


福袋

欢迎提出意见和建议,有错误的地方请指正,谢谢!

欢迎关注我的

CSDN:http://blog.csdn.net/luoyuant

新浪博客:http://blog.sina.com.cn/memoriesofsnows

网易博客:http://memoriesofsnows.blog.163.com/

简书:http://www.jianshu.com/users/f4284f2cc646/latest_articles


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,560评论 4 361
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,104评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,297评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,869评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,275评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,563评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,833评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,543评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,245评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,512评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,011评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,359评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,006评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,062评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,825评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,590评论 2 273
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,501评论 2 268

推荐阅读更多精彩内容