自动布局之Auto resize



自动布局应用场景


iPhone的设备尺寸区别越来越大,无论是屏幕尺寸还是分辨率大小,从最开始的3.5寸到5.5寸。


1.那么这些应用的界面布局怎么去适应不同屏幕大小的iPhone呐?


2.本来iPhone与iPad的尺寸区别就比较大,怎么样在应用程序方面去控制它的外观呐?


3.不管是iPhone还是iPad,它们横屏和竖屏状态下的尺寸比例是相反的,在切换的时候怎么才能保持程序布局基本一致呐?


这些问题就是我们这一个章节要解决的问题。



关于组件布局(Layout)—四种布局方式


1.自己根据UIScreen计算


我们可以通过UIScreen得到硬件屏幕大小,然后计算它们的大小得到合适的位置。


2.Adopting AutoLayout


Ios6以前的比较老布局方式。


3.Auto Layout


Ios5以后引入的布局方式,最常见的布局方式。


auto1.png


4.Size Classes


尺寸匹配,便于我们写一个程序就能在不同设备上匹配大小。


大家有没有觉得,我们明明是在做iPhone开发,为什么这个屏幕这么胖,一点也不像是iPhone的屏幕呐?那这个就是Xcode6用到的Size Classes的新特性。我们来看一下没有这些属性的效果。


下面这张图就是取消这两个效果之后的屏幕。我们先选中屏幕,再打开属性浏览器,去掉Use Auto Layout和Use Size Classes 选项。


auto2.png


auto3.png


我们通过对控件的拖拽将它移动到中间,现在再来查看它的运行结果。


auto4.png


运行结果如下:看起来的确已经达到居中的效果了,但是,当我们按住Command+left切换屏幕为横屏是,结果却是这样,再次变得不居中了。无论是横屏还是竖屏,它有一个量却是没有改变,那就是距离左边屏幕边缘的绝对距离并没有改变。


auto5.png


接下来我们了解为什么这个是绝对距离,选中控件,然后打开它的尺寸观察器,红色实线代表绝对距离,虚线代表相对距离,距离是多少在上面显示的数据中我们可以看到。如果我们希望他居中,我们是否希望左右都是相对距离,那样它就可以自动调整左右间距了。


auto6.png


这就是两个控件调整之后的控制器了。接下来我们再来查看一下运行结果。


auto7.png


运行结果如下:我们可以看到在横屏状态下已经居于左右的中心了。


auto8.png


我们可以看到中间黑色方框中间还有一些虚线,当我们将它变成实线之后,这个组件的大小就会随着屏幕的大小改变而发生改变。


auto9.png


运行结果如下:位置依然在屏幕中间,但是这个Label组件的大小也发生了改变。


auto90.png


这个就是Auto resize的做法,但是这种方式已经算是比较老的布局方式了。从Xcode5,ios6,之后我们就不用这种布局方法了。我们使用的是Auto layout,下面一章将学习Auto layout的布局方式。



【本文由麦子学院独家原创,转载请注明出处并保留原文链接】

logo
© 2012-2016 www.maiziedu.com
蜀ICP备13014270号-4 Version 5.0.0 release20160127

免费领取价值1888元求职宝典!

客服热线 400-862-8862

回到顶部