从此爱上iOS Autolayout

转:从此爱上iOS Autolayout

这篇不是autolayout教程,只是autolayout动员文章和经验之谈,在本文第五节友情链接和推荐中,我将附上足够大家熟练使用autolayout的教程。这篇文章两个月前就想写下来,但因为一直工作较多,没有时间来完成。今天终于狠下心,丢下代码不写,来完成他吧!

一、别和我提Autolayout,我想死!!

从iOS6/xcode4开始,苹果开始提供了autolayout——一种对不同屏幕尺寸有更好兼容的自动布局机制,但我相信大多数人在刚接触autolayout时,一定和我一样,几乎快被其折磨致死!

autolayout因为布局思路与传统frame有所不同,国内关于autolayout的教程有过少,且autolayout在刚上手时灵活性不易掌控,导致大家更多选择了放弃。

二、为啥我要用autolayout?

随着3.5寸/4寸iPhone在市面同时使用越来越多,以及即将上市的iPhone6、iPhone6 Plus,不同尺寸、不同分辨率的iOS设备将会越来越多,使用传统frame布局的工作量必将越来越大;加上苹果发出的信号,使用autolayout势在必行。

好了,我该来表扬表扬autolayout了,它到底能解决什么问题,给我们带来哪些好处?
1)你基本上可以不用考虑3.5寸和4寸以及即将上市的x.x寸屏幕不同分辨率的问题,你终于可以不用在viewDidLoad方法里判断不同分辨率下,不同控件应该放在哪里,或者针对不同分辨率写不同的storyboard和xib;
2)你可以抛弃那些根据不同文字来计算tableViewCell、UILabel高度的代码了,因为autolayout会帮你自动计算好;
3)如果你的布局在横屏竖屏下变化不是特别大,你不用再为横着竖着写两套代码或者写两个storyboard/xib了;
4)对于即将上市的4.7寸和5.5寸iPhone,你基本上能很快甚至不用动一行代码就完成他们的自适应屏幕布局,不用每次来了新分辨率,你只能say f*ck,然后改两个通宵。

再看看苹果的态度,默认就是选择了使用autolayout。虽然我现在仍有时会骂autolayout,但我还是会坚决地选择走上这条道路。

三、Autolayout之折腾二三事

刚刚表扬完autolayout,那我得为和我一样,愿意选择走上这条道的同志们提点醒了,你究竟要做好哪些折腾的准备。

3.1.布局思维的转变

传统布局思路中,一个view在哪里有多大,那就写清楚它的坐标位置和宽高就定了,平时用CGRect和CGPoint这两种模型就足够了,而且它一定非常听你的话,写的是多少,它绝对就是多少;但是autolayout的思路却变化了,或者说改进了,它囊括了传统frame布局思路,除了可以告诉view的坐标和宽高,它更提供了一种相对的概念,比如:
1)view相对于屏幕视图左边5点,右边10点,上面15点,下面20点,如果屏幕的长宽比例发生了改变(比如从3.5寸的320:480变成了4寸的320:568,或者从横屏切换到了竖屏),view仍然会随着屏幕的比例而拉伸改变,仍然保持离屏幕视图左边5点,右边10点,上面15点,下面20点;
2)view1和view2之间相距10点,当屏幕尺寸发生改变或者旋转时,他俩仍然可以通过改变自身的尺寸或位置改变来保证它们中间就是相距10点;
3)...
所以,使用autolayout的第一步是你需要考虑它相对于superView或者brotherView的上下左右的距离,改变自己布局的思维。

3.2.使用autolayout可能会经常得到自己不想看到的样子,而且你改变frame还没用

frame时代,是你写的多少位置点就是多少位置点,view不会被自动的拉伸或者改变位置,但是autolayout中的view却会根据屏幕长宽比或者其他view的改变而改变,你经常就会看到被自动布局成了不是你想的样子,这也是太多人被折磨的原因。只要你考虑的相对的位置不正确,它真的就可能会乱掉。

3.3.autolayout的VFL(Visual Format Language)语法初看起来真蛋疼

好吧,既然使用了autolayout,使用frame来改变位置不起作用了,那我也用代码来完成autolayout总行了吧。但是,让我选一段最普通的VFL代码给你看看:

NSString *vfl = @"V:|-5-[_view]-10-[_imageView(20)]-10-[_backBtn]-5-|";

纳尼?!这是什么地干活?!我又要付出学习成本了啊!!!其实这段话就是说,在垂直方向从上到下,view离父视图5点,imageView距离view 10点,同时imageView是20点高,backBtn离imageView底部10点,距离父视图底部5点。

3.4.手动Constraint书写,那个长长长啊~~

当然,你还可以一个一个的写布局约束Constraint,就和frame分别指定origin和size类似,但是却像这样:

[self.view addConstraint: [NSLayoutConstraint constraintWithItem:blueView
attribute:NSLayoutAttributeLeft
relatedBy:NSLayoutRelationEqual
toItem:redView
attribute:NSLayoutAttributeLeft
multiplier:1
constant:0]];

而上文中的“view离父视图5点,imageView距离view 10点,同时imageView是20点高,backBtn离imageView底部10点,距离父视图底部5点”每一个逗号短句都是像这样的一个constraint。

四、你是不是已经准备放弃了?NO!说好的爱上Autolayout呢!

写到这里,我忽然觉得我是在黑autolayout了,不,看我的题目,我是真的已经爱上使用autolayout了。就让我来说说应该怎么使用autolayout。

4.1.autolayout一般应用步骤和最适宜场景

当你的页面不会变更整体布局和设计,只有在不同屏幕尺寸、不同文字和内容下有适应性的变化,那这种情况使用autolayout就再适宜不过了。不会在像frame的时代,苦逼的要为不同屏幕尺寸计算各自的位置点坐标和大小了。通常使用xcode->Editor->Pin/Align菜单为视图添加约束即可。一般通过InterfaceBuilder确定控件位置,当存在需要自动被拉伸、适应或位移的控件时就要添加constraint;具体使用教程可参考《开始iOS 7中自动布局教程1》

4.2.你的视图有比较简单的布局改变

当需要产生比较简单动画或动态添加视图时,autolayout还算好用。通常有两种方式:
1.在Controller中像声明UIView的IBOutlet一样,声明一个Constraint属性,例如XXViewTopConstraint.当进行布局变化时,直接修改XXViewTopConstraint的constant属性,即可改变其相对位置。然后再来一句

[self.view layoutIfNeeded];

搞定!
2.通过Constraint的优先级(Priority)来变更视图相对布局。如过是两条同样描述距离superview上边缘距离的约束,如果这两个约束的数值不同,但是优先级一样,则autolayout将报布局冲突,将会丢弃某一条约束(这时可能就会丢弃你想要的约束,而恰恰保留了你不想看到的布局)。所以,当我们发生布局变化时,无法像frame的绝对定位,直接改变,并且只有唯一的位置信息。那么,我们该怎么处理这种布局冲突呢?那就是让描述相同但数值不同的这两个约束采用不同的优先级。autolayout默认将使用数值较大的优先级约束。

通常1就能搞定大部分问题,2的情况较少,但有时有奇效!

4.3.你的视图有较为复杂的动画效果或者较大的布局改变

虽然autolayout可以完成所有的布局问题,但它仍然在某些情况下是不方便的,就像4.2节描述的,你的每一行代码只能改变一个constraint,但要知道每个视图通常需要4个甚至更多constraint来约束,所以一旦有较为复杂的布局改变和动画,那你可能需要写好几行,但是frame一行代码就可以搞定。
并且,好几行代码还不是最要命的,要命的是你可能还需要给这每一个约束声明IBOutlet,或者通过view的constraints属性,从constraints数组里判断出对应方向、大小的约束,再改值,真心好折腾!
所以,当你需要非常频繁的变更控件布局,并且变更的位置是不确定的(例如通过手势拖动一个视图到屏幕任意位置),那么,我建议此视图不要使用autolayout,而使用frame的所写即所得的绝对定位方式更好,你只需要充分考虑各种屏幕适配,并为其计算适合的坐标点即可。同时,我还建议这种频繁变更的视图甚至不要InterfaceBuilder来绘制,最好直接代码书写,因为一旦你勾选了autolayout,那么storyboard中的所有视图都将autolayout。当你需要变更视图布局时,则必须使用
view.translatesAutoresizingMaskIntoConstraints = NO;
superview.translatesAutoresizingMaskIntoConstraints = NO;
来避免为你的视图新增默认autolayout约束。

五、友情链接和推荐

1.《开始iOS 7中自动布局教程1》
这个教程看完基本上可以比较熟悉的使用autolayout,再结合本文的一些经验,应该能够解决大部分问题了。而该文的教程2没有中文翻译,只有英文原版:《Beginning Auto Layout Tutorial in iOS 7: Part 2》
2.《Autolayout及VFL经验分享》
这篇文章以较简单的描述囊括了VFL使用方法和常用的autolayout技巧。足够大家使用了。
3.《AutoLayout(自动布局)入门》
这篇文章精简的囊括了autolayout的代码操作方式。
4.《Auto Layout 使用心得》
作者JohnLui囊括了autolayout最常用的使用场景,描述清晰详细,使用swift实现,实用性超强。

如果在通读了本文和以上链接后还无法灵活运用autolayout,欢迎给我留言,大家一起讨论!同时欢迎关注我的博客http://www.ilikewhite.com和微博http://weibo.com/ilikewhite

时间: 2024-10-11 12:04:13

从此爱上iOS Autolayout的相关文章

[转]从此爱上iOS Autolayout

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

iOS autoLayout总结

本文转自 http://ruikq.github.io/ios/autolayout/uiscrollview/2015/01/27/iOS-autolayout%E6%80%BB%E7%BB%93.html autolayout, and uiscrollview 以前学习iOS的时候没怎么接触过autoLayout,自从iPhone6个6+出来之后一直在为以前的app做适配,所以使用了大量的autoLayout做适配,一开始很不习惯,但是越用越觉得好用,接触到现在遇到很多问题,在这里总结一下

iOS — Autolayout之Masonry解读

前言 1 MagicNumber -> autoresizingMask -> autolayout 以上是纯手写代码所经历的关于页面布局的三个时期 在iphone1-iphone3gs时代 window的size固定为(320,480) 我们只需要简单计算一下相对位置就好了 在iphone4-iphone4s时代 苹果推出了retina屏 但是给了码农们非常大的福利:window的size不变 在iphone5-iphone5s时代 window的size变了(320,568) 这时auto

IOS Autolayout

●  Autolayout是一种"自动布局"技术,专门用来布局UI界面的 ●  Autolayout自iOS 6开始引入,由于Xcode 4的不给力,当时并没有得到很大推 广 ●  自iOS 7(Xcode 5)开始,Autolayout的开发效率得到很大的提升 ●  苹果官方也推荐开发者尽量使用Autolayout来布局UI界面 ●  Autolayout能很轻松地解决屏幕适配的问题 Autoresizing ● 在Autolayout之前,有Autoresizing可以作屏幕适配,

爱上iOS单元测试系列之爱上她就要先了解她:单元测试入门

前言 对于单元测试一开始我是拒绝的.单元测试是一个什么东东,因为我喜欢做iOS开发是因为喜欢写APP的啊,一切和这一目标不相干的东西我没兴趣啊,所以从事iOS开发几年都没去深入学习过单元测试(主要是之前单位没这要求).看到我的优点木有:目标性很强,嗯,记住我的优点,请忽略我拒绝学习边缘知识的缺点.但是最近被总监要求负责单元测试的探索和落地,我义(勉)不(为)容(其)辞(难)地扛起了夺取桥头堡的重任.随着对这个姑娘的不断的了解和接触,我发现自己逐渐爱上了她,她有着独立知性的气质,有着完美丰满的身材

iOS.AutoLayout.2.CustomViewWithAutoLayout

Custom View Which Support AutoLayout 创建支持AutoLayout的Custom View AutoLayout 通过使view更加的自组织来减轻controller类的负担. 当实现custom view类时,需要提供足够的信息来使AutoLayout系统能够正确计算和满足约束(Constraints). 1. 为Custom View指定 intrinsic size (内在的/固有的 size) "Leaf-level views, such as bu

IOS AutoLayout 代码实现约束—VFL

在autolayout下,尽管使用IB来拖放控件,但仍然避免不了用代码来创建控件,这是约束需要代码来实现. IOS 提供了两种添加约束的方法 第一种: +(instancetype)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(id)view2 attribute:(NSLayoutAttribute)attr2 multip

IOS AutoLayout详解(三)用代码实现(附Demo下载)

原创Blog,转载请注明出处 blog.csdn.net/hello_hwc 欢迎关注我的IOS SDK专栏,这个专栏我会持续进行更新. IOS SDK详解 前言: 在开发的过程中,有时候创建View没办法通过Storyboard来进行,又需要AutoLayout,这时候用代码创建就派上用场了,这篇文章我会详解用代码实现的两个主要函数,然后讲解一个Demo,最后Demo我会附上下载链接. 用代码实现的函数一 第一个函数通过描述两个view的参考线之间的约束来创建约束,例如有一个label和一个t

iOS AutoLayout自动布局中级开发教程(2)-初识autolayout

通过storyboard,我们初识一下autolayout的表现形式: 看下图,使用storyboard创建的两个控件视图: 上图中的四个圆角框内的距离值,就是约束; 比如上图的第二个视图,他的 约束是:  距离 view左边,右边界的距离,这样就确定了 宽度和水平方向上的位置,还有距离上面(第一个)视图的距离,还有高,这样就确定了 视图的高度和y轴的位置;这样就可以在一个二维空间(屏幕)中唯一的确定这个视图的位置了; 但是,需要注意的,在添加距离上一个视图下边界的约束时,第一个视图的位置一定要