Xcode6中如何对scrollview进行自动布局(autolayout)

本文转载至 http://www.cocoachina.com/ios/20141011/9871.html

XCodeAutolayoutscrollView

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

时间: 2024-10-07 13:55:04

Xcode6中如何对scrollview进行自动布局(autolayout)的相关文章

Xcode6中自动布局autolayout和sizeclass的使用

一.关于自动布局(Autolayout) 在Xcode中,自动布局看似是一个很复杂的系统,在真正使用它之前,我也是这么认为的,不过事实并非如此. 我们知道,一款iOS应用,其主要UI组件是由一个个相对独立的可视单元构成,这些可视单元有的主要负责向用户输出有用的信息,有些则负责信息的输 入(交互),交互的过程中往往还伴随有动画的效果,已达到整个信息传递的连贯性以及用户体验的细腻感.可视单元,在实际开发中主要是view. button等,那么这些可视单元的关系由两个基本的关系构成:兄弟关系和父子关系

Xcode6中autolayout和sizeclass的使用

一.关于自动布局(Autolayout) 在Xcode中,自动布局看似是一个很复杂的系统,在真正使用它之前,我也是这么认为的,不过事实并非如此. 我们知道,一款iOS应用,其主要UI组件是由一个个相对独立的可视单元构成,这些可视单元有的主要负责向用户输出有用的信息,有些则负责信息的输入(交互),交互的过程中往往还伴随有动画的效果,已达到整个信息传递的连贯性以及用户体验的细腻感.可视单元,在实际开发中主要是view.button等,那么这些可视单元的关系由两个基本的关系构成:兄弟关系和父子关系,整

在xcode6中使用矢量图(iPhone6置配UI)

ios应用程序是一个图像主导的产品.在开发一个应用程序时,你需要各种尺寸的图标,你需要为每个图像文件制作一个@1x尺寸和一个@2x尺寸.这样你的应用看上去才足够精美.但缺点是你必须单独生成这些文件.随着iphone6和iphone6 Plus的到来,这个问题变得更加让人头疼:@3x 资源. 幸运的是,苹果在xcode6中提供了一些伟大的工具来管理这些资源.更好的是,这种方式也让你的应用程序能够运行在未来的ios设备上打下了基础.工具之一是xcode6和ios8支持以Storyboard(或xib

自动布局autoLayout解决不同屏幕

这篇不是autolayout教程,只是autolayout动员文章和经验之谈,在本文第五节友情链接和推荐中,我将附上足够大家熟练使用autolayout的教程.这篇文章两个月前就想写下来,但因为一直工作较多,没有时间来完成.今天终于狠下心,丢下代码不写,来完成他吧! 一.别和我提Autolayout,我想死!! 从iOS6/xcode4开始,苹果开始提供了autolayout——一种对不同屏幕尺寸有更好兼容的自动布局机制,但我相信大多数人在刚接触autolayout时,一定和我一样,几乎快被其折

自动布局(AutoLayout)使用

/*1. 创建控件,并添加到当前的View中*/ self.rightButton = [UIButton buttonWithType:UIButtonTypeRoundedRect]; self.rightButton.translatesAutoresizingMaskIntoConstraints = NO; [self.rightButton setTitle:@"RightButton" forState:UIControlStateNormal]; [self.view 

Xcode6中手动添加Precompile Prefix Header

Xcode5中创建一个工程的时候,系统会自动创建一个以以工程名为名字的pch(Precompile Prefix Header)文件,开发的过程中可以将广泛使用的头文件以及宏包含在该文件下,编译器就会自动的将pch文件中的头文件添加到所有的源文件中去,这样在需要使用相关类的时候不需要使用import就可以直接使用头文件中的内容,很大程度上给程序员带来了编程的便利性.但是在Xcode6中去掉Precompile Prefix Header文件. Xcode6去掉Precompile Prefix

[转]Xcode6中如何添加pch文件

在Xcode6之前,新建一个工程的时候,系统会帮我们自动新建一个以工程名为名字的pch (precompile header)文件,在开发过程中,可以将那些整个工程都广泛使用的头文件包含在该文件下,编译器就会自动的将pch文件中的头文件添加到所有的源文件中去,这样在需要使用相关类的时候不需要使用import就可以直接使用头文件中的内容,很大程度上带来了编程的便利性,但潜在的也带来了一些问题,这也是在Xcode6中默认不再创建pch的原因吧. 关于pch的得与失,stackoverflow上有段话

Xcode6中怎么添加空工程模板

亲们!是不是还在为Xcode中不能创建空工程模板苦恼,IT大鹏为大家准备了一个脚本,可以在Xcode6中直接创建空工程,跟以前一样一样的! 文档内容如下: 第一步确定你安装Xcode6之后在应用程序中的绝对路径是什么?(可以用终端进入Xcode 中然后pwd下就有Xcode的绝对路径了) 如果你的电脑上安装了两个xcode ,要找到xcode6的安装绝对路径 ,确保你找的xcode6的绝对路径是对的 /Applications/Xcode.app/Applications/Xcode 2.app

xcode6中导航栏 控制view用程序编写

1.新建个视图控制器用来管理视图 2.新建个按钮 通过按钮把新的view压入栈中 爽歪歪是个按钮  一点击它  直接进入第二界面   在第二界面自动生成个返回按钮 xcode6中导航栏 控制view用程序编写,布布扣,bubuko.com