iOS Storyboard约束详解(附gif图)


字数2079  阅读323  评论5 

约束,就是指……此处略去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


  • 4
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值