首页 > 代码库 > xcode6中如何对scrollview进行自动布局（autolayout）

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

2024-07-22 21:24:17   221人阅读

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! 【原文地址】

一、我们的需求是什么？

我们要如下图实现这样一种布局：


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

二、竖屏布局

为了方便布局，对于在逻辑或者结构上比较紧密的多个视图组件，我们往往采取化零为整的办法，将多个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的布局这里不再详述）。

三、横屏布局

为了布局方便，我们首先将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中清除全部约束


全部布局完成后，编译运行即可获得前面需求中所示的效果。

四、总结

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 锚点，辅助定位、布局；

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


联系
我们