在上一节Xib 约束中，我们介绍了xib 的一些简单用法，今日，我们来看一下xib 复杂一点的知识，在实际开发过程中还是蛮常用到的。
一、图片设置
- 存在问题：在开发过程中，我们会设置UIImageView，那么有时候我们是适配的时候，如果固定UIImageView尺寸，那么，在大屏手机上面看起来会小，在小屏幕上面看起来会大，那么如何去自动适配他的尺寸呢？
关键设置：设置Aspect Ratio
效果如：
效果图1.png
1）第一步：先把UIImageView调到合适的位置跟尺寸
1.png
2）在第一步里面，只设置了宽高比25:12，如果不合适，可以编辑去设置；
当然，这还不能确定该控件的位置，我们可以让该控件宽度自适应，那么，高度就可以随着高度的变化而变化（确定水平方向的位置）
此处还是不能确定该控件的位置，因为还需要设置竖直方向的位置
【这里我们就简单设置一些即可】
2.png
二、百分比布局
View.Width 占其 Superview.Width 的百分比
View.Leading 与 Superview.Leading 间距占 Superview.Width 的百分比
View.Trailing 与 Superview.Trailing 间距占 Superview.Width 的百分比
View.Leading 与 Superview.CenterX 间距占父视图 Superview.Width 的百分比
限定View的宽高比
以 Superview.Width 宽度的某一百分比为 View 之间的间隔
-
View.Width 占其 Superview.Width 的百分比
该功能实现很简单，以一个居中UIImageView 为例
效果图2.png
首先将UIImageView相对于父容器添加 Equal Width 的 constraint，然后将它的 multiplier 设成 0.5，这样就可实现 UIImageView 的宽度为父容器宽度的 0.5 倍。操作步骤如下:
此时只确定宽度：
3.png
确定x、y、高度【自己可以去设置】
4.png
- View.Leading 与 Superview.Leading 间距占 Superview.Width 的百分比
效果图3.png
该功能实现其实是使 View.Leading 相对于 Superview.Trailing 布局，然后再调整 multiplier 参数实现
1)将 UIImageView 的左边距离父视图左边界的距离站父视图宽度的0.25倍,
2)将UIImageView相对于父容器添加 Equal Width 的 constraint，然后将它的 multiplier 设成 0.5
这样 UIImageView 左右就剧中了，只需要设置高度与y轴了
如下：【除了设置2.5 之外，别忘了下面的标记】
4.png
-
View.Trailing 与 Superview.Trailing 间距占 Superview.Width 的百分比
效果图与上图差不多，只不过换一种方式
该需求实现是使 View.Trailing 相对于 Superview.Trailing 布局,然后再调整 multiplier 参数
需要注意的是使用Reverse First And Second Item调整如下表达式中 item1 和 item2 在等式中两边的位置。
以下步骤实现 UIImageView 的 Trailing 距离父视图右边距为父视图宽度的0.2倍,
需要注意的是,此时的 multiplier 是 (1-0.2=0.8),在修改 UIImageView 约束值时,可以从顶部导航中看到约束表达式的变化:
添加设置 UIImageView 的 Trailing 距离父视图右边距为父视图的约束，双击这个约束，会出现如下图：
5.png
你发现什么了吗？
我的需求是使 View.Trailing 相对于 Superview.Trailing 布局
我们查看标记1、标记2，发现这个需求是倒过来的，所以，我们需要替换一下First Item 与 Second Item 这个位置
点击标记1出尾端的向下的箭头，然后选择Reverse First And Second Item【Reverse是反向的意思】
6.png
如下图：然后在设置Constant 、Multiplier
7.png
最后设置其他的约束即可
三、自己动手去完成xib布局
这种类型的布局如何去处理适配问题呢？如果按比例来又如何去 处理呢？
makeIt.png
下一节：
UILabel xib下高度自适应
网友评论