码迷,mamicode.com
首页 > 移动开发 > 详细

iOS Storyboard约束详解

时间:2017-09-06 15:50:38      阅读:450      评论:0      收藏:0      [点我收藏+]

标签:去掉   png   文字   constant   row   水平   imageview   数值   拖动   

链接:http://www.jianshu.com/p/b88c65ffc3eb

约束,就是指……此处略去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.如下图,有时候希望图片跟文字这个整体居中,而不是仅仅文字居中,怎么半呢?

技术分享
居中

演示如下:

 

技术分享
居中演示

自己理解一下吧。






iOS Storyboard约束详解

标签:去掉   png   文字   constant   row   水平   imageview   数值   拖动   

原文地址:http://www.cnblogs.com/mnstar/p/7484685.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!