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

zgllzh 7年前發布 | 8K 次閱讀 iOS開發移動開發 UINavigationBar

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

1.效果圖

UINavigationBar和UITabbar漸變.gif

2.思路

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.當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.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.通過這兩個函數

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

本文由用戶 zgllzh 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1484207235760.html

iOS開發移動開發 UINavigationBar

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

1.效果圖

2.思路

A. 設置tableView

相關經驗

相關資訊

相關文檔

目錄

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

1.效果圖

2.思路

A. 設置tableView

相關經驗

相關資訊

相關文檔

目錄

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