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

桃扇骨 2021-09-16 00:52 343阅读 0赞

# iOS之页面布局 #

[原文请点击][Link 1]

在《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];
    }

应用效果：

![360][]

Paste\_Image.png

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

![362][]

Paste\_Image.png

label活生生地被navigationBar盖住了。

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

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

![700][]

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默认导航栏样式就是这么做的，见下图：

![695][]

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。

![700 1][]

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][]一节中  
中有详细说明：

![700 2][]

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;

![700 3][]

Paste\_Image.png

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

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

![695 1][]

Paste\_Image.png

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

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

![700 4][]

Paste\_Image.png

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

[Link 1]: https://link.jianshu.com/?t=http://www.vinqon.com/codeblog/?detail/11109
[360]: /images/20210813/ccf9fa67d23b4b8485fc80f213ab6e14.png
[362]: /images/20210813/9da8bd5f5c944604860e608bbcfff67a.png
[700]: /images/20210813/6c6a0b069c324739ab2e1b9f8cc1dc63.png
[695]: /images/20210813/ff5ff50e899741dda28896414d2e5d9f.png
[700 1]: /images/20210813/8a76418266ef431283a25e0c311de283.png
[Bar and Bar Buttons]: https://link.jianshu.com/?t=https://developer.apple.com/library/prerelease/ios/documentation/UserExperience/Conceptual/TransitionGuide/Bars.html#//apple_ref/doc/uid/TP40013174-CH8-SW1
[700 2]: /images/20210813/a2bf4728182d436a82f0ee5e789af8a7.png
[Layout and Appearance]: https://link.jianshu.com/?t=https://developer.apple.com/library/prerelease/ios/documentation/UserExperience/Conceptual/TransitionGuide/index.html#//apple_ref/doc/uid/TP40013174
[700 3]: /images/20210813/1fcd42fbb0de437693b71d9980bc48fe.png
[695 1]: /images/20210813/a83e0e86852e47bf91ce94e3afae0471.png
[700 4]: /images/20210813/8df086de8cd7402b879afe12a5ce83ab.png