iOS Storyboard编程指南 图文详解 2.为无约束的故事版添加约束

继第一篇storyboard新手教程:

http://www.jianshu.com/p/2bf8eeff872e

继续讲解

3.添加约束(important)

选中item1这是一个普通的vc拖一个按钮button上去

此时button是被选中状态,哪个控件是被选中状态就为哪个控件添加约束

视角转到中间底部偏右wAny hAny右边

点击第二个按钮

其中上面灰色的约束是啥我不太清楚(不常用)最后两个约束的意思是如果值为0就垂直居中或者水平居中,左边的选择框选中后再点击下面的Add Constraints按钮

(灰色说明没有约束被选中)即可添加

此时注意添加约束时如果约束没有添加完全则会报错(比如你只添加了距离左边边距约束则会报错,不同的控件“约束添加完成”条件不同)

再来看第三个按钮的约束(简单约束核心内容)

首选取消Constrain to margins的选中状态

Constrain to margins的意思就是苹果官方默认为你准备的边距效果 他们认为距离8是不错的距离

所以如果你选中了Constrain to margins 设置边距为0后实际上是8(真是毫无意义的设定……)

取消选中后看上面实际上有四个约束

这四个约束分别就是距离上下左右最近的控件的距离 目前这个button的在vc的view上面 view上面也只有这一个button 所以这四个约束代表该button距离他的superview四个边距的距离 但都没哪一个约束是准备添加状态

此时已准备好添加两个约束(点一下红线就更改是否添加状态)它们分别是上边距和左边距

此时往下点击Add 3 Constraints按钮添加三个约束

发现界面上只有黄线而没有红线 这说明已满足约束完全条件(button的条件很随意 只要左边距和上边距即可满足)三根黄线代表了它的实际样子需要更新 视角转到左边

发现有一个小黄色按钮点击它

之后点击黄色三角

发现有很多选择 一般是选择Update frames更新该控件的frame

该按钮的意思是为所有控件都执行此方法进行修改 目前只有一个button 无需选中

点击按钮后 选中界面上的button

我们可以看到该button的长度是屏幕长度 而高度因为没有约束所以是按照字体大小来自适应的(如果没有左边距或右边距则长度会根据文字数量自适应)

接下来看下面的约束

一看就能明白 这是设置该按钮的固定长度和高度(注意此时设置width是不赞成的 如果设置为320可以编译通过 但是在iPhone6上因为屏幕尺寸长度不是320则会出问题,如果设置的数值不是320会报错),此时设置固定高度为40 选中左边选择框 之后点击下方添加约束按钮(这里就不配图了)

可以发现多了一根黄线 数值是-10 意思就是该按钮高度与实际高度相比-10

再看下面的约束

最后一个约束Align没用过……

看Aspect Ratio约束 意思就是该控件的长宽比

添加该约束 之后视角转到右上角

可以发现你自己已经添加的约束

总共是五个约束 其中是宽高比约束 点击右边的edit

第一个constant对于该约束没有实际意义(它的数值可以代表边距的距离数值)

第二个Priority代表优先值 默认都是1000 意思是先满足哪个约束要求 当你设置多个同类约束时设置好优先值就不会报错 同时会按照优先顺序满足你设置的约束条件

第三个multiplier就是该约束很重要的属性了 可以看到该按钮长宽是40和320 所以添加宽高比约束时默认是320:40也就是8:1 修改它可以更改宽高比(但是此时更改后会报错,因为你同时设置了左、右边距固定了长度 以及固定高度 所以你的宽高此时实际上是固定的,只不过该约束满足了其它约束条件所以没有报错,简而言之它们目前是同类约束)。

双击一个约束后会选中该约束,再按中键盘上的delete按钮即可删除该约束。

目前还剩下最后两个约束

这两个约束需要你同时选中两个控件,先在再添加一个button

删掉第一个button的宽高比和固定高度约束

为第二个按钮添加上下左右边距约束

添加完成后我们可以发现 报错了~ 这是因为此时编译器并不知道该如何为这两个按钮配置高度 因为虽然有根据字体自适应 但是因为你为第二个按钮设置了上边距 也就是两个按钮上下距离为0 那么他们的高度该如何确定?第一个自适应 第二个拉长?第二个自适应 第一个拉长?这是有歧义的

我们只需要添加一个equal heights约束就好了

先选中两个按钮

还可以看左边来确定是不是都选中了

如果两个button背景都变灰就是都选中了

添加完成后就不会报错了 更新一下frame

可以发现两个按钮高度相同

此时基本约束就讲解完成了

如果没看懂 就再看一遍 如果还没看懂 那简直连诚哥都不如~23333

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

推荐阅读更多精彩内容