UINavigationBar和UITabBar 上滾漸變顯示 下拉漸變隱藏

由于項目需求要做一個這樣的功能，所以做好之后，抽取出來，封裝了下，希望能幫到有需要的朋友。

一.效果圖

UINavigationBar和UITabbar漸變.gif

二.思路

A. 設置tableView

a.因為當UINavigationBar和UITabBar隱藏的時候，tableView要完全占據整個屏幕，當UINavigationBar和UITabBar顯示的時候，tableView又要顯示在UINavigationBar下方，所以需要設置tablewView的frame和contentInset：

 self.tableView.frame = CGRectMake(0, -kNavigationBarHeight,kScreenWidth,kScreenHeight+kNavigationBarHeight);

 self.tableView.contentInset = UIEdgeInsetsMake(kNavigationBarHeight,0,0,0);

B.設置UINavigationBar和UITabBar的位移

當tableView向上移動一個屬性,UINavigationBar要向上移動一個屬性，UITabBar要向下移動一個像素，所以需要在- (void)scrollViewDidScroll:(UIScrollView*)scrollView方法中獲取每一次tableView滾動的距離，因此需要記住上次tableView的偏移量距離：CGFloat_originalOffsetY;//上一次偏移量

CGFloat offsetY = scrollView.contentOffset.y-_originalOffsetY;//獲取每次滾動偏移的距離

_originalOffsetY = scrollView.contentOffset.y;//將這次tableView偏移量重新賦值給_originalOffsetY

又因為當UINavigationBar和UITabBar已經隱藏，繼續向上滾動，已經不需要隱藏，同樣的當tableView滾動到最后滾不動的時候UINavigationBar和UITabBar也不需要移動，所以添加判斷條件

//判斷是否滾動到底部
CGFloat bottomOffset = scrollView.contentSize.height - scrollView.contentOffset.y - scrollView.frame.size.height; 

//判斷UINavigationBar是否已經隱藏
scrollView.contentOffset.y > - (2*kNavigationBarHeight)

//UIScrollView 函數
- (void)scrollViewDidScroll:(UIScrollView*)scrollView {

    CGFloat bottomOffset = scrollView.contentSize.height- scrollView.contentOffset.y- scrollView.frame.size.height;

     if(scrollView.contentOffset.y> - kNavigationBarHeight && bottomOffset >0) {

          CGFloat offsetY = scrollView.contentOffset.y-_originalOffsetY;

          [self moveNavigationBarAndStatusBarByOffsetY:offsetY];
        }
     _originalOffsetY= scrollView.contentOffset.y;
 }

C.設置UINavigationBar和UITabBar相關transform.ty

moveNavigationBarAndStatusBarByOffsetY函數設置UINavigationBar和UITabBar相關transform.ty位置的值，同時設置相關背景圖片的透明度

// 通過偏移量移動NavigationBar和StatusBar
- (void)moveNavigationBarAndStatusBarByOffsetY:(CGFloat)offsetY {

    CGFloat transformTy = self.navigationController.navigationBar.transform.ty;
    CGFloat tabbarTransformTy = self.tabBarController.tabBar.transform.ty;
// 向上滾動
    if (offsetY > 0) {
        if (fabs(transformTy) >= kNavigationBarHeight) {
        //當NavigationBar的transfrom.ty大于NavigationBar高度，導航欄離開可視范圍，設置NavigationBar隱藏
            [self setNavigationBarTransformProgress:1 navigationBarStatusType:NavigationBarStatusOfTypeHidden];
    } else {
        //當NavigationBar的transfrom.ty小于NavigationBar高度，導航欄在可視范圍內，設置NavigationBar偏移位置和背景透明度
                [self setNavigationBarTransformProgress:offsetY navigationBarStatusType:NavigationBarStatusOfTypeNormal];
        }
    
        if (fabs(tabbarTransformTy) >= kStatusBarHeight) {
            //當StatusTabBar的transfrom.ty大于StatusTabBar高度，導航欄離開可視范圍，設置StatusTabBar隱藏
           [self setStatusBarTransformProgress:1 statusBarStatusType:StatusBarStatusTypeOfHidden];
        } else {
            //當當StatusTabBar的transfrom.ty小于StatusTabBar高度，導航欄在可視范圍內，設置StatusTabBar偏移位置和背景透明度
            [self setStatusBarTransformProgress:offsetY statusBarStatusType:StatusBarStatusTypeOfNormal];
        }
        // 向下滾動
        } else if(offsetY < 0){
        if (transformTy < 0 && fabs(transformTy) <= kNavigationBarHeight) {
            //當NavigationBar的transfrom.ty小于NavigationBar高度，導航欄進入可視范圍內，設置NavigationBar偏移位置和背景透明度
            [self setNavigationBarTransformProgress:offsetY navigationBarStatusType:NavigationBarStatusOfTypeNormal];
    } else {
        //當NavigationBar的transfrom.ty超過NavigationBar原來位置，設置NavigationBar顯示
        [self setNavigationBarTransformProgress:0 navigationBarStatusType:NavigationBarStatusOfTypeShow];
        }
    
        if (tabbarTransformTy <= kStatusBarHeight && tabbarTransformTy > 0) {
            //當StatusTabBar的transfrom.ty小于StatusTabBar高度，導航欄進入可視范圍內，設置StatusTabBar偏移位置和背景透明度
            [self setStatusBarTransformProgress:offsetY statusBarStatusType:StatusBarStatusTypeOfNormal];
        } else {
            //當StatusTabBar的transfrom.ty超過StatusTabBar原來位置，設置StatusTabBar顯示
            [self setStatusBarTransformProgress:0 statusBarStatusType:StatusBarStatusTypeOfShow];
        }
    }
}

D. UINavigationBar和UITabBar背景圖透明度和顏色
通過這兩個函數
- (void)setStatusBarTransformProgress:(CGFloat)progress statusBarStatusType:(StatusBarStatusType)statusBarStatusType
和
- (void)setNavigationBarTransformProgress:(CGFloat)progress navigationBarStatusType:(NavigationBarStatusType)navigationBarStatusType
改變NavigationBarStatusTabBar背景圖透明圖和顏色

// 根據傳入的類型和漸變程度,改變StatusBar的顏色和位置
- (void)setStatusBarTransformProgress:(CGFloat)progress statusBarStatusType:    (StatusBarStatusType)statusBarStatusType{
  CGFloat transfromTy = self.tabBarController.tabBar.transform.ty;
    if (statusBarStatusType == StatusBarStatusTypeOfHidden) {
        if (transfromTy != kStatusBarHeight) {
            [self.tabBarController.tabBar fj_moveByTranslationY:kStatusBarHeight * progress];
            [self.tabBarController.tabBar fj_setImageViewAlpha:progress];
        }
     }else if(statusBarStatusType == StatusBarStatusTypeOfNormal) {
        [self.tabBarController.tabBar fj_setTranslationY:-progress];
         CGFloat alpha = 1 - fabs(self.tabBarController.tabBar.transform.ty)/kStatusBarHeight;
        [self.tabBarController.tabBar fj_setImageViewAlpha:alpha];
    }else if(statusBarStatusType == StatusBarStatusTypeOfShow) {
        if (transfromTy != 0) {
           [self.tabBarController.tabBar fj_moveByTranslationY: -kStatusBarHeight * progress];
            [self.tabBarController.tabBar fj_setImageViewAlpha:(1-progress)];
        }
    }
}

// 根據傳入的類型和漸變程度,改變NavigationBar的顏色和位置
- (void)setNavigationBarTransformProgress:(CGFloat)progress navigationBarStatusType:(NavigationBarStatusType)navigationBarStatusType{
CGFloat transfromTy = self.navigationController.navigationBar.transform.ty;
if (navigationBarStatusType == NavigationBarStatusOfTypeHidden) {
if(transfromTy != -kNavigationBarHeight){
[self.navigationController.navigationBar fj_moveByTranslationY:-kNavigationBarHeight * progress];
[self.navigationController.navigationBar fj_setImageViewAlpha:progress];
}
}else if(navigationBarStatusType == NavigationBarStatusOfTypeNormal) {
[self.navigationController.navigationBar fj_setTranslationY: - progress];
CGFloat alpha = 1 - fabs(self.navigationController.navigationBar.transform.ty)/kNavigationBarHeight;
[self.navigationController.navigationBar fj_setImageViewAlpha:alpha];
}else if(navigationBarStatusType == NavigationBarStatusOfTypeShow) {
if(transfromTy != 0){
[self.navigationController.navigationBar fj_moveByTranslationY:-kNavigationBarHeight * progress];
[self.navigationController.navigationBar fj_setImageViewAlpha:(1-progress)];
}
}
}
E.設置UITabBar和UINavigationBar類方法

// 設置背景圖透明度
- (void)fj_setImageViewAlpha:(CGFloat)alpha;
// 根據translationY在原來位置上偏移
- (void)fj_setTranslationY:(CGFloat)translationY;
// 設置偏移translationY
- (void)fj_moveByTranslationY:(CGFloat)translationY;

**F.停止時刻處理 **

在- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate函數里面判斷當前NavigationBar偏移是否超過一半，如果一半則動畫隱藏，如果沒有則動畫顯示:

//恢復或隱藏navigationBar和statusBar
- (void)restoreNavigationBarAndStatusBarWithContentOffset:(CGPoint)contentOffset {
    CGFloat navigationBarCenterHeight  = kNavigationBarHeight/2.0;
    CGFloat transformTy = self.navigationController.navigationBar.transform.ty;
    if (transformTy < 0 && transformTy > -kNavigationBarHeight) {
        if (transformTy < -navigationBarCenterHeight && contentOffset.y > -navigationBarCenterHeight) {
            [UIView animateWithDuration:kDefaultAnimationTime animations:^{
                [self hideNavigationBarAndStatusBar];
            }];
        
        }else {
            [UIView animateWithDuration:kDefaultAnimationTime animations:^{
                [self showNavigationBarAndStatusBar];
            }];
        }
    }
}

三.最后:

送上一張喜歡的圖片:

光.jpeg

這是gitHub鏈接，大家有興趣可以看一下，如果覺得不錯，麻煩給個喜歡或星，謝謝！

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 發現 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,229評論 4贊 61
  • 吹過街口凌晨的冷風 喝過桌上低八度的冰啤酒 握不住的人坐在對面 終究還是要走
    孤葉233閱讀 212評論 0贊 0
  • 通過了五天的全員生發，讓我認識到了我們團隊的戰斗力。 這幾天我們的學習強度非常大，反而我們更有激情，更有狀態，更有...
    XUGUOQIANG閱讀 269評論 0贊 0
  • http://blog.csdn.net/qq_16619361/article/details/69568773
    yuzhan550閱讀 233評論 0贊 0