标签:
设计MM小尹:“小李,邮件里是我们设计的用户登录界面初稿,请你看一下技术上有没有什么问题。”
程序猿小李:“好的,我看一下。”
小李打开邮件,看到界面设计初稿为:
这是一个同时支持iPhone和iPad的统一App(Universal App)。尽管小李对Auto Layout很熟悉,但是看到设计稿之后,小李却犯了难。因为设计稿中的iPhone横屏的界面布局方式是特殊情况,如果按照图1的方式添加一套自动布局约束,程序就需要判断设备类型(当前是iPhone还是iPad?)以及当前设备的方位(是横屏还是竖屏?)。如果是iPhone横屏,那么还得按照图2的要求重新修改约束。《自动布局系列5》中提到了修改界面约束的3种方式:改约束的常量值,删除旧约束添加新约束,修改约束的优先级。不管哪种方式,对于我们的这个例子来说,都是很麻烦的,很容易出错的。你得在iPhone竖屏转横屏时改一堆约束,然后横屏转竖屏时再改回来。且不说这个界面的层次不算复杂,要是真的遇到一个很复杂的、界面层次很深的界面,对开发者来讲那简直就是一场噩梦。
小李遇到的困惑,我想大多数读者也都曾遇到过。有读者aa3214560也在我的博客上提出了这样的问题:
aa3214560 2015-10-27 20:27发表:
博主,有个自动布局的问题很疑惑。希望能帮助解释一下。在ios中的xib或者storyboard中使用自动布局,是如何适配各种屏幕的。 比如说iphone5的高度是568,6的高度是667,当有一个控件是距上边距600的时候,这在iphone5如何显示(当然,可以都使用距离下边距多少来解决)。或者是当一个textfield距离左边100,右边100的时候,在iphone6上这个大小可能很好,但是在iphone5上就变窄了点。 这里想知道的是,autolayout距离上、下、左、右的距离都是写死的,这在适配上的作用还是不大啊? 难道是在写一套约束,或者在一个约束的基础上进行间距的调整,使在各个屏幕上都能较为完美的显示(一套约束总感觉不完美)? 总感觉自己卡在某个点上。 希望能帮助解疑一下,非常感谢。
其实问题的核心,就在于一套自动布局约束很难灵活地适应视图在不同大小情况下的所有布局。为了解决这个问题,苹果在iOS 8 SDK中提出了Adaptive Layout(姑且翻译为:自适应布局吧),这也是本篇文章要讲解的内容。如果小李的App还需要支持iOS 6和7,那么很遗憾本篇内容帮不了他,他只能使用一套约束并修改。如果仅需支持iOS 8及以上版本,那么他就可以使用自适应布局来轻松解决这个问题。
描述一个2维图形的尺寸,最简单的就是它的水平和垂直方向是大还是小。例如,高清电视的屏幕,水平方向大,垂直方向小。这里的大和小只是概念上相对而言的,拿电影院的荧幕和高清电视屏幕相比,其水平和垂直方向都是很大的。拿笔记本电脑的屏幕和高清电视屏幕比,其水平和垂直方向都是很小的。
在自适应布局中,苹果提出了Size Class(尺寸类型)的概念,用于在概念上表示水平或垂直方向的大小。共有3种类型尺寸,大的称之为Regular(标准尺寸类型,简记为+),小的称之为Compact(紧凑尺寸类型,简记为-),最后一种后面会提到。
下面的表格列出了iOS设备的尺寸类型:
在本文中我们约定用以下格式描述:
[水平尺寸类型,垂直尺寸类型]
这个表格展示了不同设备的不同方位下,水平方向与垂直方向的默认尺寸类型:
那么尺寸类型有什么卵用么?简言之就是我们可以针对不同的尺寸类型,设计与之对应的一套自动布局。例如,我可以设计一套针对[+, +]的自动布局在iPad上使用,其余的都使用另外一套自动布局在iPhone上使用,这样不就能很好地解决之前的问题了么。
这里插一句,除了标准和紧凑外,还有一个尺寸类型是Any(任意尺寸类型,简记为*)。我们都知道类的继承,把共性的、抽象的东西放在基类中,把差异化的、具体的东西放在子类中。苹果也希望我们能够以类似的方式来处理自适应布局,这里的*类似于通配符,既可以匹配+也可以匹配-。所以,当设计人员给出了不同设备上的界面设计稿之后,作为开发人员的我们应该首先总结出最通用的自动布局方案,将其作为任意尺寸类型的自动布局(基类);把差异化的布局放在某个特定尺寸类型的自动布局(子类)。以上图中的例子来说,图1可以作为通用布局方式,而图2可以作为特殊布局方式。
这么说可能有些难以理解,我们不妨以一个实际的例子来说明如何在Interface Builder中使用尺寸类型实现自适应布局。
未完,待续。。。
如果你对我写的东西有任何建议、意见或者疑问,请到我的CSDN博客留言:
iOS 9 Auto Layout界面自动布局系列6-自适应布局
标签:
原文地址:http://blog.csdn.net/pucker/article/details/49925335