iOS7和状态条适配的问题

2013年,苹果推出了iOS7,上半年的时候就已经可以使用,下半年正式发布。可以说iOS7这个版本的推出是iOS发展历史上变化非常巨大的一次。无论是从设计风格上来看,还是从开发需要注意的点上来看。

iOS7主推的理念是“Deference”“Clarity”和“Depth”,大意是“尊重”、“清晰”和“深度”。当然大家最直观感到变化的则是“扁平化”,而iOS7之前的版本的icon和界面都是带有立体感的拟物形式。刚刚接触iOS7的时候本人也表示很难理解和接受这种变化,很不习惯。但随着接触新版本iOS的时间变长,也就逐渐被新的理念所渗透,对iOS7的视觉和交互理念及其由此所带来的魅力变得熟悉和理解。而且除了视觉和交互上的新的设计观念外,iOS7这个版本的操作系统本身也带来了很多新的功能上的好处,如AirDrop等。2013年12月份,手机淘宝客户端也完成了全面的iOS7适配。

iOS的设计和API有着很大的变化。下面就说说今天在细节上涉及到的一个小问题和解决办法。

按照iOS7之前版本的页面布局,UIViewController的(root)view是不直接包含状态条StatusBar的那段高度(20)的,系统会直接将这个高度扣掉。

下面来个直接一点的例子。在ViewController的view使用

CGRectMake(0, 0, width, height)

赋值给frame布局,默认情况下就会有如下图的布局。

状态条布局重叠

iOS7状态条布局重叠

在iOS7中会发现这样做直接和状态条上的运营商、时间等内容重叠。

在iOS6及以前的版本中,UIViewController中有一个属性wantsFullScreenLayout,这个可以在一定程度上帮助我们做状态条覆盖布局,但通常情况下使用其默认值,即NO。这样,在iOS7以前大部分情况,我们在布局view的时候都不需太考虑系统状态条,只要知道一般情况下流出20高度即可。

而在iOS7中,状态条变成半透明,不占用布局空间,改变了之前的这一点。如果想象以前那样不与状态条重叠,一个简单的办法就是改为:

CGRectMake(0, 20, width, height)

即将origin的y值设置为状态条的高度,从上面数20的位置开始布局subview。比如在一个刚刚初始化过的UIViewController的view上使用一个UIWebView,于是就出现了下面的情况:

iOS7状态条问题

iOS7状态条显示问题

状态条是黑色?究其原因,是状态条在iOS7中已经全透明,而刚刚初始化的controller中view的backgroundColor是黑色,状态条使用了背景色,那么就出现了这种状况,简单的解决办法,将背景色改为whiteColor即可。

调整后的状态条

调整后的状态条

小结:iOS7中,状态条(StatusBar)实现为透明的,而且更重要的是,不再占用顶部高度20的布局空间。wantsFullScreenLayout不再有效,状态条的样式也是系统设定好的,需要用其它布局办法来解决重叠问题。

当然这个问题仅仅是iOS7 API中的一个变化点,只要在实践中仔细观察,还有很多其它变化,如UIButton不再能用CALayer类的layer属性设置边框,而且iOS6中圆角样式自带的边框也没有了,UITableView中的Cell之间分隔线偶尔会出现不以两端对齐,需要通过iOS7 SDK新提供的属性seperatorInset来调整等。欢迎大家在下面跟帖列举,一起分享。

当然,想全面系统地了解,还要参看官方的文档:

iOS 7 UI TransitionGuide

相关文章:

此条目发表在 iOS 分类目录,贴了 , , , 标签。将固定链接加入收藏夹。

iOS7和状态条适配的问题》有 1 条评论

  1. Pingback 引用通告: iOS7之后的各种bar和布局 | 三石·道

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>