iOS之页面布局-踩坑的原由

iOS之页面布局

原文请点击

在《iOS 7 UI Transition Guide》中有在《iOS 7 UI Transition Guide》的Bar and Bar Buttons一节中有这么一段话

In iOS 7, the status bar is transparent, and other bars—that is, navigation bars, tab bars, toolbars, search bars, and scope bars—are translucent. As a general rule, you want to make sure that content fills the area behind the bars in your app.

翻译过来：

在iOS7中，状态栏是完全透明的，而其他bar，即navigation bars, tab bars, toolbars, search bars和scope bars都是半透明的。开发者需要保证页面内容能覆盖到这些bar的后面。

事实上，iOS7中的状态栏不仅变完全透明了，而且完全不占空间。
有码有真相 —— 新建一个UIViewController，再viewDidLoad里面输入以下代码，作为rootViewController启动应用：

- (void)viewDidLoad
{  
    [super  viewDidLoad];
    self.view.backgroundColor = [UIColor whiteColor];
    UILabel *label = [[[UILabel alloc]initWithFrame:CGRectMake(0, 0, 200, 20)]autorelease];
    label.text = @"I am a label";
    [self.view addSubview:label];
}

应用效果：

Paste_Image.png

可以看到的是label和status bar悲催地重叠了。
我们再套一个UINavigationController，可以看到更悲催的事情:

Paste_Image.png

label活生生地被navigationBar盖住了。

可以说，苹果这次在iOS7上的redesign对开发者来说是惨绝人寰的。
不过苹果还是有节操的，在iOS7上运行iOS7 SDK以下开发的应用时，保留了原先的页面结构布局，并且做了不少向下兼容策略。
而且，iOS7 SDK提供了一系列接口和策略方案，下文将会一一介绍并顺带剖析一下iOS7上的页面结构框架。

Realtime Debug Protal
首先介绍一个小工具，可以方便我们进行学习。它的小名叫RDP，是一个类似Web Inspector的工具，把这个工具引入我们的项目工程，并做一些简单的配置，然后运行真机或者模拟器。应用启动后，在浏览器输入手机的IP地址，就可以看到UIView的树状结构和Log信息，还可以在浏览器中对View进行移动，隐藏，选中高亮等操作。

Paste_Image.png

状态栏
在iOS7中，状态栏是透明的，就是说，状态栏只有文字没有背景。
而变透明之后就很容易和后面的内容混淆，虽说一般应用不会把内容和状态栏叠合在一起，但是至少，现在的情况是，默认是会叠合的，开发需要从20px像素以下开始布局页面元素才能避免。

苹果为了让深色浅色背景均能让状态栏内容清晰显示，提供两种状态栏样式：

UIStatusBarStyleDefault = 0 黑色文字，浅色背景时使用
UIStatusBarStyleLightContent = 1 白色文字，深色背景时使用

而以下两个旧状态栏样式将被废弃：
UIStatusBarStyleBlackTranslucent = 1
UIStatusBarStyleLightContent = 2

还有，iOS7中我们通过ViewController重载方法返回枚举值的方法来控制状态栏的隐藏和样式。
首先，需要在Info.plist配置文件中，增加键：UIViewControllerBasedStatusBarAppearance，并设置为YES；
然后，在UIViewController子类中实现以下两个方法：

- (UIStatusBarStyle)preferredStatusBarStyle
{    
    return UIStatusBarStyleLightContent;
}

- (BOOL)prefersStatusBarHidden
{
    return NO;
}

最后，在需要刷新状态栏样式的时候，调用[self setNeedsStatusBarAppearanceUpdate]方法即可刷新，若果需要以动画形式切换状态栏样式，则用以下方式调用即可:

[UIView animateWithDuration:0. animations:^{
    [self setNeedsStatusBarAppearanceUpdate];
}];

导航栏
在iOS7，由于状态栏背景透明，那么，导航栏背景就可能要兼职充当状态栏背景了。
iOS7默认导航栏样式就是这么做的，见下图：

Paste_Image.png

虽然用户看来，iOS7默认样式的状态栏和导航栏时连在一起的，但是实际上导航栏的位置和大小是和之前系统版本一样的，依然是贴在状态栏下面， 依然是高44px；之所以用户看来它们是连在一起，这是因为UINavigationBar里面的_UINavigationBarBackground 定位在y方向-20px的位置，然后高度增加到64px，这样就可以同时充当了两者的背景。

关于这些定位，苹果做了很多工作，后面也会谈到不少。不关心的同学可以略过，其实这些细节，个人觉得，即使对于开发者来说，也不是必需知道的，我们只需要知道怎么调用相关API就足够了。
实际情况下，我们会自定义导航栏背景，过去，我们也许会使用如下代码把一张高44像素（retina/88像素）的图片来平铺作为导航栏背景。

[navCtrl.navigationBar setBackgroundImage:[UIImage imageNamed:@"nav_background"] forBarMetrics:UIBarMetricsDefault];

启动应用，出现了意想不到的效果和久违的界面 —— 黑底白字的状态栏，不再被navigationBar盖住的label。

Paste_Image.png

这里两个点需要解释一下：

1. 若我们使用自定义图片作为导航栏的背景，那么UIViewController的view（下面称为视图）就不会延伸到navigationBar的顶部，而是从它的底部开始——正如往常一样。
2. 若我们使用一张高44像素（retina/88像素）的图片作为导航栏背景，那么状态栏就会保持黑色，图片只会在导航栏区域平铺。

另外，iOS7 SDK中新增了一个设置背景图片的方法(setBackgroundImage:forBarPosition:barMetrics:），比原有的方法多了一个UIBarPosition枚举参数，用于设置背景图片拉伸的策略。
针对不同的拉伸设置和背景图片尺寸，在《iOS 7 UI Transition Guide》的Bar and Bar Buttons一节中
中有详细说明：

Paste_Image.png

 

页面布局
在 《iOS 7 UI Transition Guide》的Layout and Appearance 一节中也提到 —— 在iOS7中，view controllers使用全屏布局 (In iOS 7, view controllers use full-screen layout)。

通过上面的讨论我们也知道，除非导航栏设置了自定义的背景图片，否则每个视图都会延伸到屏幕一样大小的。
所以，像上面第二张图片中出现导航栏遮盖label的情况也是正常的现象。

如果我们要让label从导航栏以下位置显示，可以通过修改UIViewController的edgesForExtendedLayout这个属性来实现。
edgesForExtendedLayout是一个类型为UIExtendedEdge的属性，指定边缘要延伸的方向。
因为iOS7鼓励全屏布局，它的默认值很自然地是UIRectEdgeAll，四周边缘均延伸，就是说，如果即使视图中上有navigationBar，下有tabBar，那么视图仍会延伸覆盖到四周的区域。

如果把视图做如下设置，那么视图就不会延伸到这些bar的后面了，于是label又出来了。

self.edgesForExtendedLayout = UIExtendedEdgeNone;

Paste_Image.png

也许，这时候你会想，那为什么不把UIExtendedEdgeNone作为默认态呢？
iOS7以后鼓励全屏，它希望用户在使用可滚动视图的时候可以透过半透明的bar还可以看到一些模模糊糊的内容。

为了保持设计的优雅，同时避免给开发者太多的困扰，iOS7在Conttoller中新增了这个属性：automaticallyAdjustsScrollViewInsets，当设置为YES时（默认YES），如果视图里面存在唯一一个UIScrollView或其子类View，那么它会自动设置相应的内边距，这样可以让scroll占据整个视图，又不会让导航栏遮盖，如以下例子：

Paste_Image.png

要注意的是，这个例子中我们没有设置edgesForExtendedLayout，即视图是延伸至全屏的。
我们可以从UIView树状图看到，tableview的bounds值中有64像素的偏移值，它作为一个内边距来保持内容显示在导航栏以下，而滚动时仍可以透过半透明的导航栏看到模糊的内容。

最后一个介绍的新属性是extendedLayoutIncludesOpaqueBars，这个属性指定了当Bar使用了不透明图片时，视图是否延伸至Bar所在区域，默认值时NO。
所以我们如果自定义了导航栏的背景图片，那么视图会从导航栏以下开始，不会延伸到导航栏区域。
如果把这个属性设置为YES，那么视图将会延伸至导航栏区域，即使我们把导航栏设置成了自定义背景，如下图：

Paste_Image.png

视图延伸之后，label又被导航栏覆盖住了，正如我们意料。