由于项目需求要做一个这样的功能，所以做好之后，抽取出来，封装了下，希望能帮到有需要的朋友。

一.效果图

UINavigationBar和UITabBar 上滚渐变显示下拉渐变隐藏_第1张图片

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

三.最后:

送上一张喜欢的图片:

UINavigationBar和UITabBar 上滚渐变显示下拉渐变隐藏_第2张图片

光.jpeg

这是gitHub链接，大家有兴趣可以看一下，如果觉得不错，麻烦给个喜欢或星，谢谢！

UINavigationBar和UITabBar 上滚渐变显示 下拉渐变隐藏

一.效果图

二.思路

三.最后:

你可能感兴趣的:(UINavigationBar和UITabBar 上滚渐变显示 下拉渐变隐藏)

UINavigationBar和UITabBar 上滚渐变显示下拉渐变隐藏

你可能感兴趣的:(UINavigationBar和UITabBar 上滚渐变显示下拉渐变隐藏)