关闭

IOS--Auto Layout

标签: IOS--Auto Layout
121人阅读 评论(0) 收藏 举报
分类:

做过Android应该都知道相对布局这个概念,一个控件以另一个控件为参照进行布局,那么即使屏幕变化,布局也会随着进行微调,以达到良好的视觉效果并且保持了代码的可拓展性。


随着iPhone5 的面世,iPhone的屏幕比例也失调了。今年的WWDC就有了iOS的新特性auto layout,当然这个自己也还在学习当中。这里就把自己这几天的收获记录下…..

首先讲讲auto Layout在xib中的应用,这里有两篇raywenderlich网站的帖子讲的非常好,讲得很透彻,本人跟着步骤一步一步做下来已经大概明白auto layout 的一个思路了,很有启发性,建议大家先看,如果有xcode 4.5的话,最好跟着练一下。

part1
part2

再者,本人的习惯,UI基本都是用代码敲出来的。然而,自动布局用到纯代码上,就没有原来那么方便,但是逻辑上还是很好理解的。苹果的文档是一定要看的。其实自动布局,在Mac上去年就已经开始用了,官方有3个Demo,虽然是os x的代码,但是原理是一样的,可以好好研究。

个人觉得,之前界面思路是固定的,因为屏幕的比例是固定的,每个UI都可以有自己确定的坐标和大小,虽然之前的也有autoresizing但是还是有局限性的,然后对于横竖的UI布局,要么另匹配代码,要么就是另用一个xib,毕竟也不是很方便。

自动布局就很好的解决了上述问题。

好了下面我们来看下自动布局,


如图,我们之前布局一个button的话,肯定先指定的它的frame。有经验的程序员,会尽量不把代码写死,可能会参照屏幕的frame或是当前界面的frame,按照一定比例取frame值。所以一个button,在坐标系中,坐标确定了,位置也就确定。因为前5代iPhone屏幕比例是一样的,所以这也不会带来问题。但是iPhone5出来了,需要做些调整了。auto layout去布局的时候,首先我们要选择一个参照对象,根据参照对象设置参照值,根据参照对象和参照值就可以知道自己的位置了。就如上图的button,我们知道,button距离屏幕的左边缘的间距和上边缘的间距就可以的确定button的位置了,autolayout还有一个独特的地方,就是UI可以根据字体大小和字数自动计算大小,当然你也可以自己指定大小。这样button在屏幕的相对位置就不变了,不管是横屏还是竖屏。

当然这里优势还并不明显,那么当有两个button时呢?我们在看下下图。这里第二button以第一button为参照,进行布局。以此类推。
  


但是我为什么要用自动布局呢?看下下面这个图。


以你的经验,代码量会是多少?或是是不是要再加一个xib?
我们知道,如果界面整体的布局是确定的,就如图所示,那么很适合进行自动布局,因为相对位置确定了,相对关系确定了,尺寸和位置系统会自动给我们计算出来,所以这里只要一套代码或是一个xib就可以很好的适用任何一个屏幕(可能有点绝对)。

其实,auto layout 的关键就是关系的确定,要十分确定,如果是个模棱两可的关系,很多时候系统是会迷糊会报错,即使有时候绘制出来了,也会丢给你一大堆它不确定的警告。所以构建的时候要想好布局,选好合适的参照对象,最后保证语法没有错误,那么一个效果良好的布局会就实现了。

这里再给大家介绍下语法,这个呢apple文档里有,我这里算是摘抄下




所以这些语法,一但熟悉了逻辑还是比较清晰的。

最后奉上一小片段代码,帮助理解下纯代码的写法,请用xcode 4.5打开。


 AutoLayout.zip (31 K) 
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:75988次
    • 积分:2028
    • 等级:
    • 排名:第19772名
    • 原创:95篇
    • 转载:178篇
    • 译文:8篇
    • 评论:2条
    最新评论