made in 小蠢驢的京東搜圖.jpg

京東App的效果演示：

京東Demo演示.gif

京東App首頁導(dǎo)航條 - 細節(jié)點：

• 根據(jù)拖動，導(dǎo)航條的透明度漸變
• 拖動到一定的位置，整個導(dǎo)航條的元素 (按鈕&&搜索框)發(fā)生變化
• 導(dǎo)航條的透明度在改變，但是上面的文字&&圖片還是很清晰，未被透明度所影響
• 頂部的時間工具條，在導(dǎo)航條顏色變化的時候，也會變化

搭建步驟

1.隱藏系統(tǒng)默認導(dǎo)航條，自定義導(dǎo)航條

因為要改變導(dǎo)航條透明度，改變導(dǎo)航條顏色等操作，系統(tǒng)默認的導(dǎo)航條實現(xiàn)起來比較困難。
思路：使用UIView創(chuàng)建自定義導(dǎo)航條，然后在自定義的UIView進行操作

隱藏導(dǎo)航條:

- (void)viewWillAppear:(BOOL)animated{
 
    [super viewWillAppear:animated];
    self.navigationController.navigationBarHidden = YES;
}

初步樣式.gif

隱藏導(dǎo)航條之后，創(chuàng)建一個UIView，上面左右兩個button，中間一個textField，就搭建起來了初步樣式。

2.監(jiān)聽滾動，實現(xiàn)透明度變化

這里，就需要用到scrollView的代理方法 scrollViewDidScroll了

1.png

監(jiān)聽scrollView的滾動方法，拿到tableView的偏移量(offset.y)的值
如圖我們可以發(fā)現(xiàn)，往下滑動的時候，tableView的offset.y一直在遞增

思路：tableView的offset.y 一直在變化，根據(jù)這個偏移量，動態(tài)設(shè)置導(dǎo)航條的透明度

- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
    
    //約定 偏移量達到300的時候，就改變顏色
    static CGFloat tagOffsetY = 300.0;
    CGFloat offsetY = scrollView.contentOffset.y;
    CGFloat alpha = offsetY / tagOffsetY;
    _navigationView.alpha = alpha;

}

初步導(dǎo)航條變化演示.gif

這里發(fā)現(xiàn)起始的時候，導(dǎo)航條是隱藏的，因為默認offsetY = 0，所以 導(dǎo)航條的alpha等于0，符合京東導(dǎo)航條(雖然目前看上去丑了點)；
==>如果有需求是起始alpha=1，慢慢下拉會慢慢透明的，解決辦法：_navigationView.alpha = 1 - alpha;

3.監(jiān)聽導(dǎo)航條透明度，當它等于1的時候，改變導(dǎo)航條顏色和按鈕狀態(tài)

- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
    
    static CGFloat tagOffsetY = 300.0;
    CGFloat offsetY = scrollView.contentOffset.y;
    CGFloat alpha = offsetY / tagOffsetY;
    _navigationView.alpha = alpha;

    if (_navigationView.alpha >= 1) {
        
        //開始導(dǎo)航條變化
        _navigationView.backgroundColor = [UIColor darkGrayColor];
        _leftBtn.selected = YES;
        _rightBtn.selected = YES;
    }
}

導(dǎo)航條樣式變化演示.gif

如圖，我們發(fā)現(xiàn)導(dǎo)航條顏色&&按鈕圖片改變了
但是，變成darkGrayColor顏色之后，offsetY又往上移，導(dǎo)航條樣式?jīng)]變回來

    if (_navigationView.alpha >= 1) {
        
        //開始導(dǎo)航條變化
        _navigationView.backgroundColor = [UIColor darkGrayColor];
        _leftBtn.selected = YES;
        _rightBtn.selected = YES;
    }
    else{
        
        //默認導(dǎo)航條樣式
        _navigationView.backgroundColor = [UIColor orangeColor];
        _leftBtn.selected = NO;
        _rightBtn.selected = NO;
    }

4.監(jiān)聽導(dǎo)航條透明度，動態(tài)設(shè)置頂部時間狀態(tài)欄顏色

    if (_navigationView.alpha >= 1) {
        
        //開始導(dǎo)航條變化
        _statusBarStyle = UIStatusBarStyleLightContent;
    }
    else{
        
        //默認導(dǎo)航條樣式
        _statusBarStyle = UIStatusBarStyleDefault;
    }
    //設(shè)置狀態(tài)欄刷新
    [self setNeedsStatusBarAppearanceUpdate];
}

//設(shè)置頂部狀態(tài)欄顏色
-(UIStatusBarStyle)preferredStatusBarStyle{
    
    return _statusBarStyle;
}

頂部工具條樣式變化演示.gif

5.透明度變化的時候，圖片 && 搜索框之類的透明度也跟著變化，不符合要求

對比京東Demo，發(fā)現(xiàn)問題所在

錯誤界面結(jié)構(gòu).png

如圖所示，因為當前的兩個按鈕&&textField都是添加到naviView上，父控件naviView的透明度變化，其上面的子控件，也會變透明！不符合要求

正確界面結(jié)構(gòu)搭建.png

• 注意點我在圖中說明了，一定要切記，放控件的naviView，一定不要成為 透明度會改變的背景View的子控件！不然透明度還是會受影響！
• naviView弄成一個透明的View，添加到self.View上即可(在背景View之后添加)
• 本質(zhì)上，三個控件(左右兩個按鈕 && textField)都直接添加到self.view上也可以實現(xiàn)功能

最終演示.gif

demo