iOS translucent引发的那点小事

前事不忘后事之师

题记

相信大家在项目中几乎都会用到navigationController或者是tabBarController，在iOS 6的时代，那个导航栏实在是有点丑，然而在iOS 7到来之后，界面发生了翻天覆地的变化，瞬间觉得高大上，其中导航栏的变化就特别大，支持半透明效果，其中涉及的知识就是我们今天需要看到的--translucent，虽然简单，但是涉及的东西还是有点小多，下面就简单记录下我的理解

translucent

translucent：这是iOS 7中给UITabBar、UINavigationBar新增的属性，如果为YES，那么显示的是半透明的效果，能够模糊看到被bar遮盖的东西，如果设置为NO，则没有模糊透明的效果。

当我们代码这样设置的时候

    self.view.backgroundColor = [UIColor purpleColor];
    //默认情况下 为yes 半透明
//    self.navigationController.navigationBar.translucent = YES;
    UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.height)];
    view.backgroundColor = [UIColor redColor];
    view.tag = 1001;
    [self.view addSubview:view];
    
    UIView *dotView = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 40, 40)];
    dotView.backgroundColor = [UIColor brownColor];
    [view addSubview:dotView];

可以看到如下效果

透明.png

再来看看详细的图层图

11.png

我们可以看到新添加的view和当前vc的view是一样大的。
而且我们的坐标是从(0,0)开始的。即全屏展示，将一部分view伸到bar下面了，并且bar的背景以其为底色，并加上半透明的模糊效果。

如果，我们将translucent设置为NO又是什么效果呢？
下面看图

不透明.png

图层效果

22.png
从图层效果我们可以看出，当我们translucent设置为NO时，当前vc的view的坐标默认是从导航栏下方开始，并且在tabbar上方结束，这里大家肯定发现了一个问题，就是新添加的view怎么比vc的view还长，这是由于在初始化的时候，我们在viewDidLoad中设置的坐标为:

UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.height)];

如何改变呢？有以下两种方法：
1、在初始化的时候，设置frame的时候减去导航栏和下方控制栏的高度

UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.height-49-64)];

2、在viewDidAppear中重新设置坐标

- (void)viewDidAppear:(BOOL)animated
{
    [super viewDidAppear:animated];
    UIView *view = [self.view viewWithTag:1001];
    [view setFrame:self.view.bounds];
}

关于第2个方法，可以这么理解，在viewDidLoad中vc的view为默认值，默认是撑满全屏的，而其坐标是会发生变化的，在viewDidAppear时，坐标已经确定，此时在设置我们添加的view的frame。

但是往往我们会有各种各样的需求，假如我们现在又这么一种需求，保留半透明效果，但是view的起始点和结束点不能超过导航栏和控制栏，该怎么办呢？
1、直接设置新添加的view的坐标

    UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 64, self.view.bounds.size.width, self.view.bounds.size.height-49-64)];

这样的话，我们可以得到如下效果

13.png

图层效果

44.png
从图层我们可以看出，这里navigationbar和tabbar的背景色均以当前vc的view的背景色作为了背景
这里是直接设置添加view的坐标，而当前vc的view的frame并没有改变，如果想改变又该怎么办呢？在iOS 7中的viewController的api中，引进了这么一个参数

@property(nonatomic,assign) UIRectEdge edgesForExtendedLayout NS_AVAILABLE_IOS(7_0); 

edgesForExtendedLayout

这是一个枚举类型，默认为UIRectEdgeAll：全屏显示，即坐标为(0,0)，在屏幕顶端。
针对上面的情况，我们可以这么做

- (void)viewDidLoad {
    [super viewDidLoad];
    ....

    UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.height-49-64)];
}
- (UIRectEdge)edgesForExtendedLayout{
    return UIRectEdgeNone;
}

得到的效果如下

12.png
图层图为
33.png
这样就保证了vc的view的frame发生了变化

小解:
edgesForExtendedLayout = UIRectEdgeNone
设置后，控制器的view的frame的坐标Y增加64px紧挨着navigationBar下方，底部同理，该属性支持iOS7及以后的版本。
说到这个，我们再来看一个属性，也是iOS 7引进的

@property(nonatomic,assign) BOOL automaticallyAdjustsScrollViewInsets NS_AVAILABLE_IOS(7_0);

automaticallyAdjustsScrollViewInsets

意思是是否由系统自动调整滚动视图的内边距，默认为YES，意味着系统将会根据导航条和TabBar的情况自动增加上下内边距以防止滚动视图的内容被Bar遮挡
注：上述的情况仅仅对UIScrollView或者子类（如UITableView）有效

- (void)viewDidLoad {
    [super viewDidLoad];

    self.view.backgroundColor = [UIColor purpleColor];

    
    UITableView *tableView = [[UITableView alloc] initWithFrame:self.view.bounds];
    tableView.dataSource = (id)self;
    tableView.delegate = (id)self;
    tableView.rowHeight = 60;
    tableView.tag = 1002;
    [self.view addSubview:tableView];
    
//    self.automaticallyAdjustsScrollViewInsets = NO;

}

下面我们断点看看tableView的相关信息

point.png

可以看出contentOffset默认向上偏移了64，在设置self.automaticallyAdjustsScrollViewInsets = YES系统会默认干下面这些事情

本来我们的cell是放在（0,0）的位置上的，但是考虑到导航栏、状态栏会挡住后面的主视图，而自动把我们的内容（cell、滚动视图里的元素）向下偏移离64px,（下方位置如果是tarbar向上偏移离Buttom49px、toolbar是44），也就是当我们把navigationBar给隐藏掉时，滚动视图会给我们的内容预留部分的空白（所有内容向下偏移20px，因为状态栏的存在）。

当然，如果我们设置self.automaticallyAdjustsScrollViewInsets = NO的话，那么操作就和上面讲的view一样了，系统不会自动调节。

关于translucent所引发的，还有一个就是，我们设置导航栏的背景颜色，如果只设置barTintColor，是达不到我们想要的效果，之前看过两种方案
1、配置颜色的方案
2、对UINavigationBar动点手脚，添加个cateGory
核心实现:新添加一个view

        [self setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
        self.newTinBar = [[UIView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, CGRectGetHeight(self.bounds))];
        self.newTinBar.userInteractionEnabled = NO;
        self.newTinBar.autoresizingMask = UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight;
        [self insertSubview:self.newTinBar atIndex:0];

总结

到此，对于translucent引起的小事就完了，确实不是什么大事，只是记录记录，如果能帮到你，是我的荣幸，如果有什么不对，请多多指教