在xib和story board上实现代码自动布局（解决添加约束时，大于等于小于等于繁琐的问题,以及占位view的问题)...

 

　　一直认为写博客是一个非常有意义却又懒得去做的事情，因为去看别人的博客的时候会觉得收获很大，所以才觉得写博客非常的有意义。为了感谢那些一直被我看了博客的博主和网民们，也是为了成为促进互联网发展的一块小小的砖头，从今天起我也决定写自己的博客了，可能写的有些因为自己表达不够比较难懂的东西，或者有些只是一些小技巧，但是在平时的工作当中，这些都是非常实用的技巧。

　　在这个开源当然社会,如果一直保持着保守的状态,是无论如何都无法促进社会的进步的,在这里先向大家保证,此博文与我的github的博客,所有的一切代码与知识,将全部开源,你将不会看到任何的加密锁密才能访问,我将尽自己的一生,完善此技术博客,而你获得的,将是永无至今分享与源代码Demo.

　　 貌似装逼过头了,先自我介绍一下, 本人擅长动画设计，自动布局，今天的第一篇博文就不为大家唠叨什么了不起的工程，为大家介绍一下自动布局上本人发现的一些非常有用的小技巧，或许能帮到大家。

　　好了废话不多说，现在开始进入正题

　　所谓的自动布局，就是为控件添加约束，使控件能够在不同尺寸比例的屏幕下完美地呈现在相应的位置，属于适配的一种方法，做适配有两种方法，一种是代码适配，另一种则是自动布局，我们先说代码的适配（前面都懂的也请耐心看到最后的解决办法）

代码的适配

附上一段代码自动布局的自定义CGRectMakeInLine的函数

//下面是一段内联函数,目的是为了让控件适应不同机型时所在的位置及大小,以iphone6plus的大小和尺寸为基准,接下来VC

CG_INLINE CGRect CGRectMakeInLine (CGFloat x, CGFloat y, CGFloat width, CGFloat height)

{

    

    CGRect rect;

    //以6plus为基准

    CGFloat autoSizeX = [UIScreen mainScreen].bounds.size.width / 414;

    CGFloat autoSizeY = [UIScreen mainScreen].bounds.size.height/736;

    rect.origin.x = x * autoSizeX;

    rect.origin.y = y * autoSizeY;

    rect.size.width = width * autoSizeX;

    rect.size.height = height * autoSizeY;

    return rect;

}

 

　　详细说明：所谓的内联函数，可以让代码的执行效率更快，具体的意义就不在这里多说，感兴趣的大伙可以上stackOverFlow上看一下大神的解释，因为国内给的翻译真的是太渣了，即使你懂中文你也看不懂内联函数是什么。

　　代码上的适配，归根接地就是比例适配而已，按照上述的代码，只要自己设计UI界面的时候按照自己脑海里面的6lus的尺寸比例进行输入，那么它在任何尺寸上的机型，都比较能完美地适配出来，注意：这里是比较完美地适配出来，因为代码适配并不是万能的，如果控件的长高比例很不协调的话那么就很容易早上控件在试图上的扭曲，过度拉长，或者过度拉高。

 

　　然而，代码的适配并不是我们今天要讲的主题，我们今天要讲的主题是如何让Xib上的约束叶能够实现和代码适配的一个效果。

 　  首先，是xib上的控件长度和宽度的比例适配

　　长度和宽度的比例适配：在VC的xib上添加一个imageView拉到屏幕中央，设置的约束有四个，相对于view是：1.容器视图的竖直中心。2.容器视图的水平中心。3.和view同宽4.和view同高。（本人喜欢夏娜，这里就不要吐槽了）

 　　

　　第二步：点击刚刚的imageView，来到右侧选项栏的尺度选项下面，为刚刚得等高等宽的contrains进行编辑

　　如下面两张图片所示

 　　

 

　　这样子就能保证可爱的夏娜无论在哪个机型下面都能保证与屏幕的比例相协调了。

　　我们可以这样子查看不同屏幕比例下的格局：

　　

　　这样子就实现了imageView的宽高随着屏幕尺寸的变化而变化了。

　　可是，仅仅是控件的宽高能够自适应，位置却很难自适应，以前解决位置上的自适应的方法一般都是按照附近的控件的位置来添加约束，大于等于一定的距离或者小于等于一定的距离，然而这种添加约束的方法不仅开发效率慢，而且容易导致逻辑混乱。

　　接下来的位置自适应就是本篇博文要讲的重点了，首先，我先提一个问题

　　问题：现在有三张图片，如何让三张图片在不同的屏幕上，保持在同一水平线上，且三张图片的间距，最左边的图片距离屏幕左边界的距离，最右边的图片距离屏幕右边界的距离，三样距离都相等。。

　　以前这个问题交给我的同事，他是这么解决的，如下面图片所示

　　

　　大家应该也都知道了他的大致的解决思路了，他是在三张图片之间添加了一个辅助view然后通过这些辅助view来确定三张图片的位置，这种方法也是一个方法，但是这种方法的话在可视化编程上耦合度太高，一旦删除了其中的一个控件，其余的控件的位置也会跟着变化，而且添加的约束也很多，牵扯太大，一旦需求修改，将是个非常大的麻烦。

　　现在我介绍我的方法给大家

　　1.首先是给中间的图片添加约束，约束如下：让中间图片位与屏幕中央

　　

　　2.再者给三张图片添加宽高的约束： （三张图片的宽高相同）这时候添加完应该会报红色警告，因为左右两张图片的位置并没有约束条件

　　

　　3.给左边的图片添加位置约束：使其位于容器视图的竖直中心和水平中心

　　这时候应该也会显示这样的黄色警告：因为图片没有出现在黄色线警告上出现的相对应的位置，这时候先不要着急updateFrame，先按照以下步骤进行操作

　　

　　4.点击左边图片，来到右边选项浪的尺度选项栏，点击位置约束进行edit操作，先设置水平中心约束的edit下的倍数，再设置竖直中心约束的edit下的倍数

　　　如下图所示：

　　                 

 

 　　直到黄色线完全消失为止，你也可以自己先算出图片的为止的倍数关系，大概原理如下

　　它的大概原理是  最左边0 ~ 1（水平中间）~ 2最右边

　　同理上下一样    最上边 0~  1 (竖直中间) ~ 2最下边

　　接着就可以根据左边图片的设置方法，另外设置中间图片和最右边图片的位置约束啦，这样子就实现了夏娜酱在任何屏幕上的位置上的完美适配

　　再结合高度和宽度的比例适配，这样子就能完全实现x,y,width,height完全只靠比例适配，不需要添加任何的其他大于等于或者小于等于的约束了

　　　　

 

 

转载于:https://www.cnblogs.com/yejingtian/p/5277464.html