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!&【】一、我们的需求是什么？我们要如下图实现这样一种布局：整个视图一共有三个组件：头像（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 确定其contentS5.布局时注意一些小技巧的使用，可时布局工作事半功倍：& a.&将多个view放入一个container view的化整为零思想；& b. 引入参照物or 锚点，辅助定位、布局.
CocoaChina是全球最大的苹果开发中文社区，官方微信每日定时推送各种精彩的研发教程资源和工具，介绍app推广营销经验，最新企业招聘和外包信息，以及Cocos2d引擎、Cocos Studio开发工具包的最新动态及培训信息。关注微信可以第一时间了解最新产品和服务动态，微信在手，天下我有！
请搜索微信号“CocoaChina”关注我们！
关注微信 每日推荐
扫一扫 浏览移动版iOS: 让自定义控件适应Autolayout注意的问题
第一个是initWithCoder方法：因为开发者多在Storyboard中使用Autolayout，而Storyboard中的View初始化不是使用常见的initWithFrame方法的，而是使用initWithCoder方法来初始化View。因此自定义控件有初始化逻辑的话（如设置变量默认值什么的），注意不要只写在initWithFrame方法里。
第二个是UIView的translatesAutoresizingMaskIntoConstraints属性，如果使用Autolayout，则不需要将古老的AutoresizingMask转换成Autolayout的Constraint。这个属性默认是YES，不过貌似Storyboard创建时调用initWithCoder方法时控件的translatesAutoresizingMaskIntoConstraints已经是NO了。
第三个是UIView的contentMode属性，如果在Autolayout改变控件尺寸后需要刷新drawRect，则需要设置contentMode属性为UIViewContentModeRedraw。而另一个常见的自定义控件依赖的方法：layoutSubviews，则会被自动调用，这里不需要担心。
那么，自定义控件的初始化可以这样写：
//UIView构造方法
- (id)initWithFrame:(CGRect)aRect
if ((self = [super initWithFrame:aRect])) {
[self commonInit];
//Storyboard用
- (id)initWithCoder:(NSCoder*)coder
if ((self = [super initWithCoder:coder])) {
[self commonInit];
- (void)commonInit
/* 这里开始初始化 */
//如果需要重新调用drawRect则设置contentMode为UIViewContentModeRedraw
self.contentMode = UIViewContentModeR
//不允许从Autoresizing转换Autolayout的Constraints
//貌似Storyboard创建时调用initWithCoder方法时translatesAutoresizingMaskIntoConstraints已经是NO了
self.translatesAutoresizingMaskIntoConstraints = NO;
> 本站内容系网友提交或本网编辑转载，其目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请及时与本网联系，我们将在第一时间删除内容！
1.概述:随着iOS设备的更新迭代,屏幕适配问题也变得愈发重要,应运而生了Autolayout.在Xcode4.1和OS X10.7之后才起效. 2.简介:Apple提供了2种方式布局Autolayout,用xib来布局;另一种利用代码进行布局,在Apple的sdk中提供了2个类库:NSLayoutManager和NSLayoutConstraint.NSL ...
问题描述: 在使用Autolayout布局方式对ScrollView进行布局时,如果你想做一个可以垂直方向滚动的九宫格类似这样:
拿一行来说,一定不要想当然的尝试去给一行图标进行均匀排列的操作(指定padding,图片尺寸自适应),你的针对ScrollView右边和下边的约束是无效的.约束了结果也是没用的,然后图片的内在尺寸约束会占据主导,把Scroll ...
文章来自/ios/ios-masonry-demo.html#comment-353 如果说自动布局解救了多屏幕适配,那众多三方库的出现就解救了系统自动布局的写法.Masonry就是其中一个.在Github上,Masonry已经得到6+个star,用法上也比较简单灵活,很大程度上替代了传统的NSLayoutCon ...
1.为有图的做一个cell,为没图的也做一个cell? 2.就做一个cell,然后用代码方式动态计算cell的高度(似乎抛弃了autolayout)? 以上两种方式,那种方式更优,还望老鸟们来指导一二! 那两个 cell 是大部分都不一样,还是只有 有图/没图 这一点不一样呀? 如果大部分不一样肯定是做两个cell好. 如果只是有图没图的区别,这个说实话之前 ...
autolayout自动布局技术在iOS6就已经推出了,但是因为很多人一开始不习惯使用xib编程,而是坚持使用代码布局控件,所以autolayout并没有普及的太快.但是现在随着越来越多的人开始使用xib,怎样适配不同屏幕的尺寸和横竖屏,成了亟待解决的问题,好在两年前就已经推出并且日臻完善的xib autolayout技术可以完美的解决. AutoLayou ...
现在知道了如果我们使用了xib 或者是SB 进行布局 关联的子view是无法进行view修改frame,就算你修改了 也没有用,这不是意味着就能去改变这个view的布局了 ,首先我们必须要改变他的 约束,通过改变约束从而实现改变.好了 废话不多说 来实践一下 就以输入框的
输入的时候 界面向上抬起 为例子,当然 一般的做法是 点击 textfield
转载自: /ios-autolayout-scrollview/ Posted on June 11th, 2014 Ok, I'll admit. I've been seriously struggling with AutoLayout ever since it's been introduced. ...
*/ 以下不常用
// 务必记住 // 1.当给某个控件设置约束时候,必须关闭这个控件上autoresing // 2.当给一个控件添加约束时候,必须保证这个控件在控制器View的层次结构中 - (void)viewDidLoad {
[super viewDidLoad];
UIView *redView = [[UIVi ...