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采用正常的上下结构;横屏时则采用左右结构。
二、竖屏布局
三、横屏布局
为了布局方便,我们首先将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中清除全部约束
全部布局完成后,编译运行即可获得前面需求中所示的效果。