iOS7之后的各种bar和布局

在iOS从版本6向iOS7升级的时候,UI上发生了颠覆性的变化。而且iOS7的UI设计风格大部分都在iOS8中保留了下来,相信也会持续下去。在本Blog此前的一些文章中也整理过(如《iOS7和状态条适配的问题》《再说说iOS的状态栏(显示与隐藏) 》),但仍然不够全面,也不彻底。最近看到一篇来自于外国朋友Jared Sinclair对iOS7之后状态栏、导航栏等变化和特点的整理,觉得写得很详细。本文将结合自己的实践,对这些要点再重新整理一下。

0. 状态条

状态条几乎是iOS6到iOS7之后讨论得比较多的一个UI关注点,以下对常见的问题点整理了一下:

  • iOS7下无法通过修改属性直接做到iOS7以前的效果,wantsFullScreenLayout的作用也彻底无效了;如果非要做成和iOS6相同相似的样子,可以用比较麻烦的布局手段来实现,但这是苹果所极力不支持的
  • 样式和布局等是不同的方面,互相没有直接影响
  • iOS7中只有2个样式可用:UIStatusBarStyleDefault(模糊透明背景+黑色前景文字)、UIStatusBarStyleLightContent(模糊透明背景+白色前景文字),其它样式均不生效,其中前者适用于浅色背景view,后者适用于神色背景view,这里所谓的“背景view”就是会显示在状态栏下面(后面)那层view
  • 容器Controller,比如UINavigationController可能会对基于ViewController的状态栏样式设置产生影响
  • iOS7之后,状态栏的属性可以通过“基于ViewController”和使用UIApplication对象动态设置两种方式来决定,前者需要在ViewController中实现prefer…方法,后者则可以调用application对象的setStatusBar…方法进行动态控制;这两种方式是互斥的,不能一起用
  • 如果想控制启动页面的状态栏样式或者显示/隐藏,可通过Info.plist中的key-value设置

1. NavigationBar、TabBar和edgesForExtendedLayout属性

在iOS7中,有个不成文的布局规则,当导航条(navigation bar)遇到了状态条(status bar),系统会自动连接成一个高度为64(状态条的20+导航条的44)的半透明结合体顶部Bar。而如果导航条没有挨到状态条(我只能说这种状况很少见),则高度还按自己单独的44计算。

默认情况下,用UINavigationController包装过的controller的view会自动延伸到屏幕顶端,在如上所说的64高度连接体顶部Bar出现的情况下,content view的上部64高度部分会被半透明地遮盖住。

默认情况下,使用UITabBarController情况类似,底部的44部分会被半透明形式遮盖住。

而这正是edgesForExtendedLayout属性发挥作用的地方,可以通过对content view controller对象的此属性设置UIRectEdgeNone的值,保证content view的任何部分都不被导航条或者TabBar遮盖。ToolBar应该也是类似的。

2. UIScrollView的contentInset自动匹配

我们知道iPhone的屏幕尺寸在不断变大,可是就算变得再大,也总有更多的内容,让一屏不能展示完全。这也正是UIScrollView的价值所在。

在iOS7中,在存在status bar、navigation bar,或者tab bar、tool bar的情况下,我们可能要担心,content view中的scroll view的上边、下边部分会不会被以半透明的形式覆盖掉。

实际上,这是不必担心的。首先,上面提到的edgesForExtendedLayout属性可以帮我们把content view只控制在可视范围内。另外,在iOS7中,UIViewController还提供了一个automaticallyAdjustsScrollViewInsets属性。它可以使得scroll view的上下部分仍然在各种Bar的后面以半透明的形式显示出来,同时scroll的主题内容不被bar遮盖。

在实际使用的时候,本人发现并不是任何时候都是这样的,能够生效的前提条件是UIScrollView对象是作为content view controller的root view或者是view0。

UITableView和UICollectionView是UIScrollView的子类,因此同样适用。

3. 其它

由于苹果官方文档中,对本文涉及到的内容只是略提,并未详述。本文内容主要是对Jared Sinclair老兄blog内容的翻译,不过其中也结合了很多其它实践、试验过程中的要点,将其丰富化详细化。

感兴趣的可以参看原文:http://blog.jaredsinclair.com/post/61507315630/wrestling-with-status-bars-and-navigation-bars-on-ios-7

此外,破船之家的blog也有一片文章,里面涉及到了各种bar style和layout之外的内容,如tintColor的使用等,供参考:http://beyondvincent.com/blog/2013/11/03/120-customize-navigation-status-bar-ios-7/

相关文章:

此条目发表在 iOS, iOS开发基础, 开发, 计算机技术 分类目录,贴了 , , , , , , 标签。将固定链接加入收藏夹。

发表评论

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

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