iOS 表视图控件当存在导航栏与Tabbar时内容的自动偏移

iOS7以后苹果将导航栏与标签栏(Tabbar)改为半透明(毛玻璃效果),iOS7以前导航栏与标签栏为不透明.同时也伴随着坐标系统的变化.

在iOS7以后当我们创建一个视图,并将其y坐标设置为0,x坐标与宽高任意,如下代码

    self.view.backgroundColor = [UIColor grayColor];    UIView *redView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 80, 80)];    redView.backgroundColor = [UIColor redColor];    [self.view addSubview:redView];

运行效果如下

大家会发现红色视图的y坐标为0时,其上半部分会被导航栏遮挡,也就意味着y坐标原点是从屏幕上边缘开始的,可以隐约透过导航栏看到红色视图的身影,没错这就是毛玻璃效果,苹果在iOS7之后特别推崇这种效果.

然后我们试着将导航栏改为不透明,观察一下红色视图的变化

    UINavigationBar *navigationBar =  self.navigationController.navigationBar;    navigationBar.translucent = NO;

我们可以通过控制导航栏的translucent属性来控制器导航栏是否透明,iOS7以后导航栏的translucent默认为YES也就是半透明,iOS7以前translucent默认为NO,导航栏为不透明.

红色视图的位置发生了变化,导航栏的颜色也变为了白色,因为此时导航栏已经不透明了,此时系统y坐标由导航栏下方开始.

那么了解了以上概念,接下来开始我们的表视图之旅把.

通常情况下,很多iOS应用为了合理的展示大量的内容,大量采用了UITableView(表视图)控件,传统的布局中一般UI界面中会同时存在Tabbar(标签栏)与NavigationBar(导航栏),用来控制界面的切换,而屏幕中间则是用表视图展现数据,而且大多数情况下,表视图会占据整个屏幕,那么如何定义表视图的宽高呢?

iOS7以前,界面中的表视图的高度通常会定义为ScreenHeight(屏幕高) - TabbarHeigth(标签栏高度 49)  - NavigationBarHeight( 导航栏高度 44) - StausBarHeight(状态栏高度 20),不然的话,表视图内容可能会被遮挡.

iOS7以后其实就不需要这样了,如果非要减去导航栏和状态栏的高度的话,反而会出现莫名其妙的效果.我们完全可以这样定义表视图的宽高

    UITableView *tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, kScreenWidth, kScreenHeight) style:UITableViewStylePlain];    tableView.dataSource = self;    tableView.delegate = self;    [self.view addSubview:tableView];

我们可以直接将表视图的宽高设置为屏幕宽高,kScreenWidth与kScreenHeight分别为屏幕宽高,表视图的x,y坐标也为0,0.那么我们来看一下运行效果

我们滑动到最后一个单元格

也就是说,表视图的frame虽然占据整个屏幕,但其单元格内容并没有被遮挡,表视图的内容发生了自动偏移,也就是说iOS7以后,我们完全没必要减去导航栏与标签的高度,表视图会的内容会自动发生偏移.

那么表视图发生偏移的条件是什么呢?

1.当导航栏为半透明时,表视图内容会自动向下偏移64.

2.当标签栏为半透明时,表视图内容会自动向上偏移49

以上两点很好理解,iOS7以后苹果将导航栏设为半透明,那么我们在滑动视图了,用户可以通过导航栏隐约看到视图上的内容,这种特效算是iOS7以后的一大亮点,同时也是区别与iOS6的一个特点,这种用户体验要远远好于iOS6.

但是,掌握了以上两点,当我们将表视图的frame设置为屏幕大小,并确定导航栏,和标签栏均为半透明,但表视图还是被遮挡了,而且莫名其妙的是,项目中的其他地方却没事.

我们试着在控制器的视图(表视图的父视图)上再添加一个视图,并把它插入到表视图的下方.

   UITableView *tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, kScreenWidth, kScreenHeight) style:UITableViewStylePlain];    tableView.dataSource = self;    tableView.delegate = self;    [self.view addSubview:tableView];        UIView *anyView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 30, 30)];    [self.view insertSubview:anyView belowSubview:tableView];

再看一下运行效果

此时表示图的内容被遮挡了,当把表视图的滑动最后,最后一个单元格的内容也被遮挡了,如果我们将刚才添加的view移除,表视图的内容又会重写自动偏移

那么我们此时就可以做一个总结了

iOS7以后表视图内容偏移的条件

1.导航栏为半透明,表视图会自动向下偏移64(注意当给导航栏设置backIndicatorImage时,可能会影响导航栏的透明度,(系统会根据图片的透明度值推算)

2.标签栏为半透明,表视图会自动向上偏移49(注意当给标签栏设置backIndicatorImage时,可能会影响标签栏的透明度,(系统会根据图片的透明度值推算)

3.表视图必须是第一个被添加到控制器上的视图,也就是表视图在其父视图的子视图数组中的index必须为0

我们如果将导航栏或状态栏改为不透明呢?

如果我们将导航栏设置为不透明,那么系统的y坐标将从导航栏下方开始,表视图的高度如果还是屏幕高的话,势必会出现不好的效果,那么此时你需要将高度减去64.

如果将标签栏设为不透明呢?同样我们需要将表视图的高度减去49.不然内容可能会被遮挡.