Auto Layout--Interface builder篇

AutoLayout-Logo

前言

随着Apple产品的更新换代，iPhone的屏幕尺寸也越来越大，对于iOS开发者来说，屏幕适配就变成了一个不得不去掌握的技术。小屏时代的Frame已经渐渐的不适合去处理屏幕适配的问题了，随之而来的新技术就是Auto Layout 。AutoLayout 重新构思了开发者构建界面的方式，通过相邻视图之间的关系来确定视图之间的位置关系，可以更快捷更方便的实现屏幕适配的问题。特别是通过Interface builder （IB）可以更快速、直观的完成对界面的搭建。

AutoLayout介绍

随着iPhone阵营的不断壮大，为了适应不断变大的屏幕，Apple提出了Auto Layout的方案来解决适配问题，因此适配方式从以前的UIViewAutoResizing过度到了现在Auto Layout阶段。现阶段的Auto Layout适配也有很多种不同的方案。

1. Masonry

   首先要说到的当然是纯代码流框架Masonry。作为开源三方框架，Masonry提供了一种更简单快捷的布局方式；

2. VFL
VFL (Visual Format Language)，苹果官方提供的AutoLayout API，也是被开发者吐槽不断的一种方式；
   （VFL我在之前的文章中也有过简单的介绍 -- 简书、 博客）

3. IB
IB(Interface Builder)， 直接通过Interface Builder 进行适配布局；

今天要介绍的就是第三种方法，通过IB来进行一些常见UI布局。

interface builder 介绍

工欲善其事，必先利其器。既然我们要用Interface Builder ，首先当然要了解下我们需要用到的功能板块。

1. Identity Inspector
   用于设置控件的父类、attributes属性 、以及控件对应的可访问属性等；
2. Attributes Inspector
   用于设置控件的基本属性、父类的属性等；
3. Size Inspector
   顾名思义，用于设置控件的Size等，例如auto layout 以及优先级等；
4. Connections Inspector
   用于查看控件与父视图的关联性；
5. Object Library
   控件库，Interface Builder 可以设置的控件，都可以在这里找到；

在这里只是大致的介绍了下功能板块的作用，也会在之后的Demo中使用到上面的功能板块。

-------------------------实践是第一生产力分割线----------------------------

约束设置介绍

Pin

在这里可以设置单个View的约束线：上边距Top、左边距leading、右边距trailing、下边距bottom、宽度width、高度height、等宽equal Widths、等高equal Heights、宽高比Aspect Ratio等；

Align

在这里可以设置多个View之间的约束线关系；左、右、上、下边距对齐，水平垂直居中对齐、相对于父视图垂直居中对齐等；

介绍了基础知识后，下面进入Demo演示时间！通过Demo可以更直观的了解通过Interface Builder It's show time ！

UILabel 设置Attribute属性字体

Label Attributes

在这个Gif中依次设置了文本对齐方式、字体颜色、背景颜色、字体大小、删除线、下划线。删除线和下划线分为单线和双线两种，并且可以设置线条颜色。

PS：这里设置删除线或下划线等属性有一个小窍门，当打开Fonts 面板时，再去选中要设置的文本部分，这样删除线和下划线才会生效。

设置UIView 圆角

Radius

在Identity Inspector板块设置UIView 的Runtime Attributes 属性。圆角、线框都是可以设置的，只要知道相对应的属性就可以了。

相邻视图等距分布

equal Widths

首先在屏幕上按比例放置四个View，然后设置等宽约束就完成了最简单的等宽设置。如果感兴趣的话，也可以自己把相邻View的间距为20或其它值、最左最右距离父视图间距为10或其他值再试下。

固定宽度，间距跟随屏宽度变化而变化

Fixed Width

这个Demo是在上一个Demo上的延伸。当需要相邻View宽度固定，间距跟随屏幕变化而变化时，单纯的使用一层View是不容易实现的。这时候我们可以借助上一个等分Demo的方法，再在View里添加子视图固定宽高后居中对齐，就可以实现这个需求了。

子视图确定父视图宽高

Adjust frame by sub views

在这个Demo中，我没有去设置View的宽高，只设置了View的X、Y而已，View的宽高会根据子视图Label的大小改变而改变。这个Demo是为了我们下一个TableViewCell的高度自适应的一个预热。

自适应TableViewCell高度

Adjust cell frame

TableViewCell的自适应，需要设置满足条件的Layout来让Cell确定它自身的高度，也就是我们上面Demo说到的，由子视图来确定父视图的宽高。一般情况下，如果Cell内布局是固定的，我们可以固定Cell的高度，不需要考虑Cell高度变化的情况。这里有个小问题要提一下，为了Label可以换行显示，需要把Label的 numberOfLines属性设置成0.

ScrollView


设置ScrollView的contentSize，也是上面的子视图确定父视图大小的延伸。通过确定的子视图在ScrollView中的位置，来确定ScrollView最终的contentSize的大小。这里要注意的是，需要把ScrollView的父视图的Size设置成FreeForm，通过调节父视图大小，设置ScrollView所有边距约束为0，且相对父视图水平、垂直居中对齐，然后添加子视图至ScrollView中。

总结

这次关于Interface Builder 的介绍就先到这里结束了。上面的这些实例，只需要根据需求灵活使用，基本可以满足日常开发需要，希望可以对iOS开发道友们有些许帮助。后续可能还会再添加一些关于视图优先级、挤压优先级、拉伸优先级以及约束优先级的介绍。优先级的学习，会让我们对于Autolayout有更深次的认知，更好的掌握AutoLayout。

如果有iOS同行遇到比较难解决的UI布局，或者有其他需求需要解决，可以私信找我，我会尽力帮助解决。

以上内容可能更偏向基础，如有错误，还烦请各位同行指出！若觉得本文不值得一看，也请谅解！

Demo地址

参考

iOS Autolayout 介绍
Auto Layout 开发秘籍(第2版)