iOS7之后的页面布局问题

iOS9 页面布局问题

前言

从iOS7之后,页面布局默认延伸到了手机界面的边缘。习惯了iOS7之前的布局,一时之间还有些适应不了,再加上之前从未使用AutoLayout。其实,从iPhone6出来之后,AutoLayout就应该强制的用起来了,可是公司一直在维护老项目,再者我也说了不算 T_T。

正文

界面结构分析

先看几个截图,随后分解iOS7之后的界面结构


图1 添加UITableView外观图
图1 添加UITableView外观图
图2 添加UITableView结构图
图2 添加UITableView结构图

说明:

  1. 图1 透过导航栏明显能看出底层是模糊的红色而并非绿色。红色一并穿透过状态栏一直延伸到界面的边界;
  2. 图2 根据标记,标记1 红色是UITableView的背景色,标记2 绿色是它上面的cell的背景色;
  3. UITableView上面添加了一个_UITableViewWrapperView视图,cell是添加在它上面的;并且它是从导航栏下方开始布局(空出了导航栏的位置);
  4. 标记3 导航栏却并没有延伸到边界,导航栏里面添加的_UINavgationBarBackground视图却延伸到了边界。而此视图上面添加了UIImageView和视图是一样大的。(上面还添加了视图_UIBackdropView,其实就是push到下一个页面显示出来的Back按钮,这里暂时不说)。

到这里,界面的布局其实大概已经说清楚了;关于给导航栏设置背景色或是背景图片参考我的上一篇文章,后面说一下UITableView上面的cell怎么设置会空出导航栏的位置,怎么设置会从最顶端开始显示。


iOS7 新添属性介绍

iOS7之后,弃用了之前用于全屏显示的属性wantsFullScreenLayout,而改用
edgesForExtendedLayout,并添加了其他2个用于方便AutoLayout布局UIScrollView及其继承控件的属性

@property(nonatomic,assign) UIRectEdge edgesForExtendedLayout NS_AVAILABLE_IOS(7_0); // Defaults to UIRectEdgeAll
@property(nonatomic,assign) BOOL extendedLayoutIncludesOpaqueBars NS_AVAILABLE_IOS(7_0); // Defaults to NO, but bars are translucent by default on 7_0.  
@property(nonatomic,assign) BOOL automaticallyAdjustsScrollViewInsets NS_AVAILABLE_IOS(7_0); // Defaults to YES

解释:

  • edgesForExtendedLayout:类型为UIRectEdge,有以下值可供选择,默认值为UIRectEdgeAll,即:四边都和父视图贴合。
typedef NS_OPTIONS(NSUInteger, UIRectEdge) {
    UIRectEdgeNone   = 0,
    UIRectEdgeTop    = 1 << 0,
    UIRectEdgeLeft   = 1 << 1,
    UIRectEdgeBottom = 1 << 2,
    UIRectEdgeRight  = 1 << 3,
    UIRectEdgeAll    = UIRectEdgeTop | UIRectEdgeLeft | UIRectEdgeBottom | UIRectEdgeRight
} NS_ENUM_AVAILABLE_IOS(7_0);
  • extendedLayoutIncludesOpaqueBars:默认值为NO(看有些文章说默认值是YES,不知道是不是XCode7之后苹果修改了这个值,以前到没怎么在意),这个属性在状态栏不透明的状态下才生效。也就是说,一般使用这个属性应该这样使用:
    // 状态栏不透明(必须设置,并且为NO)
    self.navigationController.navigationBar.translucent = NO;
    // 视图延伸不考虑透明的Bars(这里包含导航栏和状态栏)
    // 意思就是延伸到边界
    self.extendedLayoutIncludesOpaqueBars=YES;
    
    // 意思就是空出导航栏位置
    // self.extendedLayoutIncludesOpaqueBars=NO;
  • automaticallyAdjustsScrollViewInsets:默认值为YES,如果是UIScroolview以及继承自它的控件,默认值YES是设置它的Insets为自适应。这里自适应其实就是空出状态栏的位置。

其他

添加UIView视图时,除了不牵扯到automaticallyAdjustsScrollViewInsets属性外,其他设置与上面类似。

最后

贴出完整代码和设置前后的效果图:

#import "ViewController.h"

@interface ViewController ()<UITableViewDataSource>

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    //1 默认情况(导航栏透明,cell自适应:空出导航栏位置开始布局)
    // 
    
    //2 情况一(导航栏透明,cell禁止自适应:从UITaleView顶端开始布局)
    //self.automaticallyAdjustsScrollViewInsets=NO;
    
    //3 情况三(cell禁止自适应,导航栏不透明,空出导航栏位置开始布局)
    //self.navigationController.navigationBar.translucent = NO;
    //self.extendedLayoutIncludesOpaqueBars=NO;
    //self.automaticallyAdjustsScrollViewInsets=NO;
    
    //4 情况四(cell禁止自适应,导航栏不透明,从UITaleView顶端开始布局)
    //self.navigationController.navigationBar.translucent = NO;
    //self.extendedLayoutIncludesOpaqueBars=YES;
    //self.automaticallyAdjustsScrollViewInsets=NO;
    
    //5 情况五(导航栏透明,cell禁止自适应,extendedLayoutIncludesOpaqueBars的设置是无效的)

    UITableView * tableVeiw = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, CGRectGetWidth(self.view.frame), CGRectGetHeight(self.view.frame)) style:UITableViewStylePlain];
    tableVeiw.backgroundColor = [UIColor redColor];
    tableVeiw.dataSource = self;
    tableVeiw.rowHeight = 80;
    [self.view addSubview:tableVeiw];
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return 2;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    static NSString * cellID = @"Identifider";
    UITableViewCell * cell = [tableView dequeueReusableCellWithIdentifier:cellID];
    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellID];
    }
    
    cell.backgroundColor = [UIColor greenColor];
    cell.textLabel.text = @"测试页面";
    
    return cell;
}

@end
默认情况测试图
默认情况测试图

情况一测试图
情况一测试图

情况二测试图
情况二测试图

情况三测试图
情况三测试图

到这里要介绍的内容就完了,内容基本都是从头文件和结构图扒出来的,并参考了官方的文档进行了测试,如有不对的地方希望能指出来,我会虚心接受。谢谢。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,259评论 4 61
  • 前言 TangramKit是iOS系统下用Swift编写的第三方界面布局框架。他集成了iOS的AutoLayout...
    欧阳大哥2013阅读 9,488评论 12 74
  • 我们这帮有志青年的老大姓韩,叫韩兮。 老大就是老大,比我们都大出一截,老大不小了,没女朋友。 倒不是条件不好,老大...
    漪付阅读 1,030评论 28 26
  • 很多年前我加了个群,叫做「戏剧化人格」,群里的人说话特别有意思。 群里的人关系都还不错,但难免会有分歧。有一次群主...
    上帝板板阅读 433评论 3 17
  • 文/鹿小喵 认识的一个朋友,25岁,根正苗红的好青年,在问及他有没有女朋友的时候,他说不想找了,过两年在家人的安排...
    鹿小喵阅读 4,354评论 0 5