美文网首页iOS开发好文iOS分享的demo控件类
iOS仿喵播的一个隐藏导航栏和TabBar的效果

iOS仿喵播的一个隐藏导航栏和TabBar的效果

作者: love平_冲 | 来源:发表于2016-07-15 17:00 被阅读1458次

    有同志说,使用我的这个自动隐藏bar的小框架,点击cell不能跳转,于是对代码进行了相应的修改,修改后的代码将不会影响cell的点击等其他可能出现问题,最新版的可以登录我的github进行查看(https://github.com/ITChong/YCAutoHideOrShowBarObj ), 另外使用的方法也有所改变,请查看下图(16/9/19更新)

    最新的使用方法

    这几天不是很忙,就写了一个非常小的小工具,使用它,我们就可以自动隐藏和显示iOS的导航栏和TabBar栏了,也就是喵播那个隐藏导航栏和TabBar栏的效果

    只需要在控制器里写上下面一行代码即可,如果你设置了UINavigationController属性,没有设置UITabBarViewController,那么就只有导航栏支持自动隐藏和显示的效果,如果都设置了,那么都将会有自动隐藏和显示的效果,目前的应用的需求大多数,都是要么隐藏导航栏,要么导航栏和TabBar栏都隐藏,所以目前我就只写了这两种情况,如果你有只隐藏TabBar栏的需求,可以告诉我,我将修改代码,实现你要的效果

        /*--------------------------> 设置自动隐藏导航栏和tabBar栏 <------------------------*/
    [YCAutoHideOrShowBarObj setupNavBarorTabBarWithScrollView:self.tableView NavigationVc:self.navigationController tabBarVc:self.tabBarController];
    

    下面是setup方法的介绍
    + (void)setupNavBarorTabBarWithScrollView:(UIScrollView *)scrollView NavigationVc:(UINavigationController *)navVc tabBarVc:(UITabBarController *)tabBarVc {
    YCAutoHideOrShowBarObj *obj = [self sharedInstance];
    obj.autoHideNavigationVc = navVc;
    obj.autoHideTabBarVc = tabBarVc;
    scrollView.delegate = obj;
    }

    下面是scrollView代理方法的实现

    #pragma mark UIScrollViewDelegate
    /**
     *  开始拖拽
     */
    - (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {
        
        self.originY = [NSNumber numberWithFloat:scrollView.contentOffset.y];
        self.lastY = [NSNumber numberWithFloat:scrollView.contentOffset.y];
        
    }
    
    /**
     *  正在拖拽
     */
    - (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    #warning 控制器第一次显示的时候,会调用一次这个方法,而不调用上一个方法,所以要在这里做一层判断
        if (self.lastY == nil) { // lastY 代表 上一次的contentOfset的y值
            return;
        }
        
        CGFloat distance = scrollView.contentOffset.y - self.lastY.floatValue;
        
        if (distance >= 0) {
            if (self.autoHideNavigationVc.navigationBar.frame.origin.y <= -44) {
                self.autoHideNavigationVc.navigationBar.transform = CGAffineTransformMakeTranslation(0, -64);
                self.autoHideTabBarVc.tabBar.transform = CGAffineTransformMakeTranslation(0, 49);
                return;
            }
        } else {
            if (self.autoHideNavigationVc.navigationBar.frame.origin.y >= 20) {
                self.autoHideNavigationVc.navigationBar.transform = CGAffineTransformMakeTranslation(0, 0);
                self.autoHideTabBarVc.tabBar.transform = CGAffineTransformMakeTranslation(0, 0);
                return;
            }
        }
        
        self.lastY = [NSNumber numberWithFloat:scrollView.contentOffset.y];
        if(scrollView.contentOffset.y - self.originY.floatValue > 64 && self.originY != nil) {
            self.autoHideNavigationVc.navigationBar.transform = CGAffineTransformMakeTranslation(0, -64);
            self.autoHideTabBarVc.tabBar.transform = CGAffineTransformMakeTranslation(0, 49);
        } else if(self.originY.floatValue - scrollView.contentOffset.y > 64 && self.originY != nil){
            self.autoHideNavigationVc.navigationBar.transform = CGAffineTransformIdentity;
            self.autoHideTabBarVc.tabBar.transform = CGAffineTransformIdentity;
        } else {
            self.autoHideNavigationVc.navigationBar.transform = CGAffineTransformTranslate(self.autoHideNavigationVc.navigationBar.transform, 0, -distance);
            self.autoHideTabBarVc.tabBar.transform = CGAffineTransformTranslate(self.autoHideTabBarVc.tabBar.transform, 0, distance);
        }
        
    }
    
    /**
     *  拖拽完了
     */
    - (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
        [self hideOrHiddenNavBar:scrollView];
        self.lastY = nil;
        self.originY = nil;
    }
    
    /**
     *  减速完了
     */
    - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
        [self hideOrHiddenNavBar:scrollView];
        self.lastY = nil;
        self.originY = nil;
    }
    
    /**
     *  拖拽都停止了,调用这个方法,判断显示和隐藏
     */
    - (void)hideOrHiddenNavBar:(UIScrollView *)scrollView {
        CGFloat navY = self.autoHideNavigationVc.navigationBar.frame.origin.y;
        if (navY == 20 || navY == -44) {
            return;
        }
        if (navY > -11) {
            [UIView animateWithDuration:0.3 animations:^{
                self.autoHideNavigationVc.navigationBar.transform = CGAffineTransformMakeTranslation(0, 0);
                self.autoHideTabBarVc.tabBar.transform = CGAffineTransformMakeTranslation(0, 0);
            }];
            
        } else {
            [UIView animateWithDuration:0.3 animations:^{
                self.autoHideNavigationVc.navigationBar.transform = CGAffineTransformMakeTranslation(0, -64);
                self.autoHideTabBarVc.tabBar.transform = CGAffineTransformMakeTranslation(0, 49);
            }];
            if (scrollView.contentOffset.y < 0) {
                [scrollView setContentOffset:CGPointMake(0, 0)];
            }
        }
    }
    
    

    采用单利模式来创建对象,然后让obj对象成为传进来的tableView的代理,就可以在代理方法中,监听scrollView的拖拽了,通过代理方法,检测手滑动的位置来判断bar的显示和隐藏(修改的它们的transform属性)。具体的实现内容,可以查看我的demo:https://github.com/ITChong/YCAutoHideOrShowBarObj,有bug了,欢迎提出来

    demo.gif

    欢迎给星

    相关文章

      网友评论

      • f2558aaa2231:您好。我想问下。我只想改变tabBar. 不想改变导航。这个怎么做啊。
        love平_冲:@四六不懂 这个需要改一下里面的东西,你研究一下
      • Cc丶Lucky:往下滑动时。tabbar会跳动一下。怎么解决呢
        Cc丶Lucky:@love平_冲 github上的代码您是还没有更新的吗?刚才down完看了一下,还是会跳
        love平_冲:@Cc丶Lucky bug已祝福,我晚上更新下
        love平_冲:@Cc丶Lucky 我先看下,以前可能没注意
      • superGM:楼主,你好,你写的这个框架用在WKwebView上好像没用的,
        love平_冲:@superGM 你好,可以试试最新版的
        love平_冲:@superGM 好的,我测试下
      • Amy莫莫:我上面的导航栏是自定义的,上拉的时候上面会出现黑色的框,下面的tableview不会到顶部去,是为什么呢?
        love平_冲:@树上蚍蜉 我去改下这个框架,改成传导航栏的
        Amy莫莫:@love平_冲 所以,我把自定义的导航控制器传进去了,然后上拉的时候,导航栏处都是黑的
        love平_冲:@树上蚍蜉 自定义的话,那我就需要改下源代码了,我的是 你把导航控制器传进来,然后我才拿到导航控制器的
      • c57dddf3b833:写得不错。同时分享一个github上一个挺好用的类似的库,支持webView、tableView、collectionView、scrollView。 :smile: http://t.cn/Rt7L172
        love平_冲:@c57dd 哈哈,我这会只要是scrollview,或者,继承自scrollview都行,应该和那个差不多吧,多谢分享

      本文标题:iOS仿喵播的一个隐藏导航栏和TabBar的效果

      本文链接:https://www.haomeiwen.com/subject/pumyjttx.html