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];

可以看到如下效果

再來看看詳細的圖層圖

我們可以看到新新增的view和當前vc的view是一樣大的。
而且我們的座標是從(0,0)開始的。即全屏展示，將一部分view伸到bar下面了，並且bar的背景以其為底色，並加上半透明的模糊效果。

如果，我們將translucent設定為NO又是什麼效果呢？
下面看圖

圖層效果

從圖層效果我們可以看出，當我們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)];

這樣的話，我們可以得到如下效果

圖層效果

從圖層我們可以看出，這裡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;
}

得到的效果如下

圖層圖為

這樣就保證了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的相關資訊

可以看出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引起的小事就完了，確實不是什麼大事，只是記錄記錄，如果能幫到你，是我的榮幸，如果有什麼不對，請多多指教