iOS页面布局：edgesForExtendedLayout的使用

从iOS7开始UIViewController添加了新的属性edgesForExtendedLayout，页面默认是全屏布局，使用edgesForExtendedLayout按自己的开发需求控制viewController的view的布局。

如果在页面中使用了UINavigationController和UITabBarController时，在默认的情况下viewController被延伸到UINavigationController、UITabBarController、UIStatusBar的下面，如果我们要让viewController不被延伸到Bar的下方，让显示范围是从navigationBar底部到tabBar的顶部就需要设置edgesForExtendedLayout了。

由于iOS7鼓励全屏布局，所以它的默认值是UIRectEdgeAll，四周边缘均延伸，就是说，如果即使视图中上有navigationBar或tabBar，那么视图仍会延伸覆盖到四周的区域，也就是说控制器的frame的y值是在屏幕的顶端开始的。当设置值为UIRectEdgeNone时ViewController的起始位置为navigationBar的底部，也就是说控制器的frame的y值是在导航条下面开始的。

• 左侧为UIRectEdgeAll，右侧为UIRectEdgeNone

  
  
  [email protected]

• UIRectEdge枚举类型：

typedef NS_OPTIONS(NSUInteger, UIRectEdge) {
UIRectEdgeNone = 0, //不延伸
UIRectEdgeTop = 1 << 0,//向顶部延伸
UIRectEdgeLeft = 1 << 1,//向左侧延伸
UIRectEdgeBottom = 1 << 2,//向底部延伸
UIRectEdgeRight = 1 << 3,//向右侧延伸
UIRectEdgeAll = UIRectEdgeTop | UIRectEdgeLeft | UIRectEdgeBottom | UIRectEdgeRight //向四个方向延伸，全屏布局
}

UIRectEdgeAll

• 代码

self.edgesForExtendedLayout = UIRectEdgeAll;

• 页面效果

UIRectEdgeAll

如你所见红色的view被铺满屏幕，延伸到了navigationBar和tabBar下面。

UIRectEdgeNone

• 代码

self.edgesForExtendedLayout = UIRectEdgeNone;
self.tabBarController.edgesForExtendedLayout = UIRectEdgeNone;

• 页面效果

  
  
  UIRectEdgeNone

如你所见红色的view的起始位置在navigationBar一下，也就是向下移动了64的高度，由于整个页面使用了navigationBar和tabBar，所以需要将两个控制器的edgesForExtendedLayout都设置为UIRectEdgeNone，即tabBarController的view的顶部不被导航栏遮挡，ViewController的view的底部不被tabBarController遮挡

translucent与edgesForExtendedLayout

[self.navigationController.navigationBar setTranslucent:NO];
[self.tabBarController.tabBar setTranslucent:NO]; //为了view不在tabBarController下
self.edgesForExtendedLayout = UIRectEdgeNone;
self.tabBarController.edgesForExtendedLayout = UIRectEdgeNone;//为了view不在tabBarController下

• 页面效果

  
  
  translucent与edgesForExtendedLayout

如果将navigationBar和tabBar的translucent属性值设置为NO的话（不透明），即便将控制器的edgesForExtendedLayout设置为UIRectEdgeAll，控制器的view是不会在navigationBar和tabBar的下边。也就是说translucent=NO，页面的布局不在是全屏布局了！

extendedLayoutIncludesOpaqueBars

extendedLayoutIncludesOpaqueBars的默认值是NO,只有再navigationBar是不透明的情况下才起作用。如果需求要求导航条不透明，并且viewController的起始位置在屏幕顶端，这样就需要将其值设置为YES;

• 代码

[self.navigationController.navigationBar setTranslucent:NO];//默认值
[self.tabBarController.tabBar setTranslucent:NO];//默认值

self.extendedLayoutIncludesOpaqueBars = YES; 
//因为使用了tabBar所以要设置tabBar的extendedLayoutIncludesOpaqueBars
self.tabBarController.extendedLayoutIncludesOpaqueBars = YES;

//添加的子view，用于判断页面起始位置
UIView * subView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 200, 200)];
[subView setBackgroundColor:[UIColor yellowColor]];
[self.view addSubview:subView];

注意下面黄色view的位置。

• 页面效果
  左侧值为NO,右侧值为YES。

  
  
  [email protected]