Autolayout UIScrollView

http://www.cocoachina.com/ios/20141011/9871.html

 

Xcode6中如何对scrollview进行自动布局（autolayout）

 

Xcode6中极大的加强了IB中自动布局的能力，下面就经过对刺儿头scrollview进行一次自动布局实战，看看自动布局在Xcode6中到底值不值得使用。

说 UIScrollView是个刺儿头，实在没有夸张，这是因为scrollview自己contentSize、contentInsets等复杂的特性 致使，苹果文档在讲autolayout的时候甚至专门拿出一节讲如何对scrollview进行自动布局。国外有个哥们曾经那他遇到的布局问题请教苹果 员工，结果花费了40分钟才得出可行的办法：

When I had a chance to go talk to an actual Apple Engineer about AutoLayout last week at WWDC, I made sure to go. I thought of my most painful experience using AutoLayout recently – when I was making a login screen with username and password fields on a ScrollView (so it scrolls up when the keyboard comes up) – and had the Apple engineer walk me through the example.......This “simple” solution took the Apple Engineer 40 minutes to solve! However, several senior engineers I know said that they’ve never been able to get AutoLayout working quite right on a ScrollView, so 40 minutes is actually not bad! 【原文地址】

1、咱们的需求是什么？

咱们要以下图实现这样一种布局：

整个视图一共有三个组件：头像（UIimageView）、文字(UILabel)、和一个UIScrollView。咱们的布局预期是竖屏是整个view采用正常的上下结构；横屏时则采用左右结构。

2、竖屏布局

为 了方便布局，对于在逻辑或者结构上比较紧密的多个视图组件，咱们每每采起化零为整的办法，将多个view放在一个containerview中，让这个父 view独自去应对外部状况的变化，将内部和外部隔绝开来，本例中，就是将头像和文字label放入一个contanierview中的。这样，咱们布局 的主要工做就集中在两个组件之间了：头像所在的containerview和scrollview。一样的，对于scrollview中的子view，我 们一样也能够将其放在同一个父的container view中，而后将这个container view做为scrollview的子view也即content view，这样咱们对scroll view 的布局就能够简化为对content view的布局，而content view里面的子view相对于content view的布局就是普通的布局了，剩下的只须要咱们解决好scroll view和content view的布局便可。

打 开storyboard，首先对默认的size class进行布局（wAny, hAny）（关于size class的使用，详见我上一篇博文）,对头像的container view添加四个约束以肯定其frame (x, y, width, height)，这四个约束分别是：水平居中、距顶端定长、定宽、定长，布局基本功再也不多言，无非点击、选中、设置......详情请参见苹果官方文档，布局解析见下图：

接下来就是对 scrollview进行布局，咱们知道scroll view除了自身的布局须要考虑（x, y, width, height）外，还有一个contentSize属性也必需要在布局的过程当中进行肯定，contentSize是UIScrollView用于肯定它所 要展现的内容尺寸的大小，而这个contentSize在布局中其实是又scroll view的子view :content view的宽和高实现的，注意：咱们不能将content view的宽和高的约束设定为由scroll view决定（如和scroll view等宽、等高）,不然，Xcode会有警告：scroll view的content size不肯定！

在这种状况下，咱们必需要对content view的布局约束引入scroll view以外其余参照物，咱们拖进来一个辅助的view做为参照物or锚点，示意图以下：

在storyboard中，这三个view的层次是：

经过这个参考view，肯定content view的宽度和高度，尽管content view的尺寸能够不依赖于scroll view，但咱们还不得不设定content view 和其父view的关系：具体而言就是要肯定content view和scroll view的top, bottom, leading和trailing contstraints，这个地方可能比较具备迷惑性，缘由是苹果对于这四个约束的使用在scroll view中作了变化：它再也不是肯定content view尺寸的依据，而是帮助scroll view中content view四周的边界（or你能够理解为留白），进而肯定scroll view的contentSize属性。

这样，默认size class的布局就算完成了，（注：content view的子view的布局这里再也不详述）。

3、横屏布局

为了布局方 便，咱们首先将storyboard中view的尺寸调整为667 * 375, iphone 6 横屏时的尺寸，而后将size class的height设置为compact模式（由于横屏时，高度处于“压缩”状态），这样咱们就能够对横屏的状态进行单独的布局，Xcode对自动 布局经过size class的使用，灵活性大大提升（详细说明参加我上一篇博文），不一样size class下约束相互隔离，甚至另一个size class下添加的view也是不可见的（not installed）,这样咱们布局工做起来就大大的简化了。

调整完view的尺寸后将size class设为(wAny, hCompact)

前面需求中提到，在横屏模式咱们但愿中，将头像和scroll view按照左右顺序布局，这样能够有效的利用屏幕空间，给用户最好的使用体验（尤为是iphone6 & plus出来后）。

考虑横屏的状况，咱们不知道屏幕的具体宽度（实际从4s到6 plus可能有4种数值），咱们想肯定头像和scroll view 的具体位置，这时，咱们又要找一个参照物了，有了参照咱们就能很好的肯定各自的约束。这种参照物的思想在自动布局中有着普遍的应用，它能够有效的帮咱们降 低布局的复杂度、提升布局的灵活性。

咱们仍然选取一个view做为参考物or 锚点，咱们把它的位置放在整个屏幕的正中间，这个view咱们称之为：middle anchor view，头像的trailing space和scroll view 的leading space就均可以以这个middle anchor view为锚肯定x坐标值了。

接着，头像和scroll view以及content view的其余约束能够按照竖屏时的思路依次添加。布局完成后如图所示（红色view即为anchor view，在布局完成以后可将该view隐藏）：

注意，由于前面竖屏的时候咱们使用了（wAny, hAny）的宽和高都任意的size class，它包含（wAny, hCompact）这种状况，所以，在上一个size class设置的布局元素在当前的size class中依然都存在，为了防止布局干扰，咱们能够将这些布局所有清除掉再从新布局：

能够方便的在storyboard中清除所有约束

所有布局完成后，编译运行便可得到前面需求中所示的效果。

4、总结

1.布局以前考虑好需求是什么，横竖屏时的UI展现效果是什么；

2.布局UIScrollView的时候将其子view放在一个content view中去，简化布局；

3.布局content view的时候必需要引人第三方参照物（view）,已肯定其尺寸，注意不能根据scroll view 来肯定content view的尺寸；

4. 必定要设置content view 相对于scroll view 的上下左右（top, bottom, leading, trailing）间距，这些设置不是为了肯定content view的尺寸，而是帮助scroll view 肯定其contentSize;

5.布局时注意一些小技巧的使用，可时布局工做事半功倍：

  a. 将多个view放入一个container view的化整为零思想；

  b. 引入参照物or 锚点，辅助定位、布局.