美文网首页首页投稿(暂停使用,暂停投稿)iOS
点击状态栏,滚动视图返回顶部的实现

点击状态栏,滚动视图返回顶部的实现

作者: 该简书已经停止更新 | 来源:发表于2016-02-27 16:09 被阅读1206次

    一、前言

    在iOS开发中,我们常常看到好多应用都有这样一个效果,如果一个应用当前页是是一个滚动视图,当用户点击状态栏的时候,滚动视图会自动的返回内容的最顶部。
    其实这个功能是UIScrollView自带的,不需要我们手动去实现,只需要设置self.scrollView.scrollsToTop = YES即可(scrollsToTop默认为YES)。但是这个属性有一个前提是窗口下必须只有一个可滚动的View才有效果。

    // When the user taps the status bar, the scroll view beneath the touch which is closest to the status bar will be scrolled to top, but only if its `scrollsToTop` property is YES, its delegate does not return NO from `shouldScrollViewScrollToTop`, and it is not already at the top.
    // On iPhone, we execute this gesture only if there's one on-screen scroll view with `scrollsToTop` == YES. If more than one is found, none will be scrolled.
    

    在实际应用中,我们可能会有多个scrollView(包含UITableView/UICollectionView),如网易新闻、简书、爱奇艺,腾讯视频等等应用,这时候,系统默认的点击状态栏返回到顶部效果就会失效,原因是当前window下多个scrollViewscrollsToTop属性的值都是YES,系统不知道该让哪一个scrollView滚动到顶部,所以就什么也不干了。如果还要让当前视图滚回顶部,只需要将除了当前显示的其它scrollViewscrollsToTop属性设置成NO就行。
    但是今天要讲的是应简友要求,讲一下自定义控件来实现此功能。就是《LYTopWindow》实现原理。

    二、基本思路

    1.获取当状态栏的点击事件
    2.取得当前window上显示的scrollView
    3.控制scrollView的偏移量,让其滚动到顶部

    三、实现步骤

    新建一个空白项目,我们可以查看应用结构可以知道,状态栏是独立出来的,并不在window上


    空白应用

    所以我们不能拿到状态栏直接操作,那么就需要自定义一个控件盖在状态栏上面,用来拦截状态栏的点击事件。

    一、添加窗口

    由于添加普通的控件都不能盖在状态栏上面,所有要新建一个普通的windowkeyWindow只能有一个)盖到状态栏的上面。

    • AppDelegate创建一个新的窗口,从iOS9.0开始,程序启动结束时的窗口都必须设置rootViewController。否则会报以下错误:
    Application windows are expected to have a root view controller at the end of application launch
    

    这里可以通过dispatch_after来给添加窗口一个延时就可以不设置根控制器而不会报错

    • UIWindow的显示不需要添加到其它控件上,只需要将hidden设置成NO就行。
    • 要想让自定义窗口盖在状态栏的上面还要设置窗口的级别windowLevel,窗口的级别有三种,分别是UIWindowLevelAlert > UIWindowLevelStatusBar > UIWindowLevelNormal,级别越高就越显示在顶部,如果级别一样,那么后创建添加的显示在顶部。
    static UIWindow *topWindow_;
    -(BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.5 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
            topWindow_ = [[UIWindow alloc] init];
            topWindow_.frame = [UIApplication sharedApplication].statusBarFrame;
            topWindow_.backgroundColor = [UIColor clearColor];
            topWindow_.hidden = NO;
            topWindow_.windowLevel = UIWindowLevelAlert;
        });
        return YES;
    }
    

    然后在给topWindow添加一个手势监听点击事件就可以拦截到状态栏的点击事件了。
    但是,这样写会有一个Bug,如果旋转屏幕的话,window上的添加的Viewframe不会跟着屏幕旋转而改变,就会不正确。

    • 如果需要屏幕旋转的话,必须要给UIWindwo设置rootViewController
    • Bug产生的原因是Autoresizing的影响,在旋转的屏幕时,窗口的View宽高被拉伸而造成frame不正确,这时只需要设置一下View跟随窗口的变化而变化即可。
    topWindow_.rootViewController.view.autoresizingMask = UIViewAutoresizingFlexibleWidth;
    

    居然这里已经设置了rootViewController,那么就不需要dispatch_after

    static UIWindow *topWindow_;
    -(BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
        topWindow_ = [[UIWindow alloc] init];
        topWindow_.frame = [UIApplication sharedApplication].statusBarFrame;
        topWindow_.backgroundColor = [UIColor clearColor];
        topWindow_.hidden = NO;
        topWindow_.windowLevel = UIWindowLevelAlert;
        [topWindow_ addGestureRecognizer:[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(topWindowClick)]];
        return YES;
    }
    

    二、监听顶部窗口点击,实现当前滚动视图滚回顶部

    /** * 监听顶部窗口点击 */
    +(void)topWindowClick{
        UIWindow *keyWindow = [UIApplication sharedApplication].keyWindow;
        [self searchAllScrollViewsInView:keyWindow];
    }
    

    查找当前keyWindow上的滚动视图,如果跟keyWindow重叠,就让其滚动到顶部

    /**
     *  查找view中的所有scrollView
     */
    -(void)searchAllScrollViewsInView:(UIView *)view {
        // 如果不在UIWindow矩形框里面,就直接返回
        // view和UIWindow没有重叠,就直接返回
        if (![view intersectWithView:nil]) return;
        
        for (UIView *subview in view.subviews) {
            [self searchAllScrollViewsInView:subview];
        }
        
        // 如果不是UIScrollView, 直接返回
        if (![view isKindOfClass:[UIScrollView class]]) return;
        
        UIScrollView *scrollView = (UIScrollView *)view;
        
        // 让UIScrollView滚动到最前面
        CGPoint offset = scrollView.contentOffset;
        offset.y = - scrollView.contentInset.top;
        [scrollView setContentOffset:offset animated:YES];
    }
    

    LYTopWindow的基本实现原理就是这样了,如果想看了解基本实现步骤可以查看LYTopWindow的源代码:https://github.com/DeveloperLY/LYTopWindow

    三、补充

    如果使用了自定义控件实现了点击状态栏滚动视图自动滚回顶部,那么控制器的这两个方法会失效
    1.控制器的- (BOOL)prefersStatusBarHidden方法决定状态栏的可见性
    2.控制器的- (UIStatusBarStyle)preferredStatusBarStyle方法决定状态栏的样式
    原因就是状态栏的样式\可见性,由最顶层(盖在最上面)window的控制器来决定
    所以如果使用了LYTopWindwo框架的,如果要控制状态栏的样式和可见性可以使用下面的代码:

    // 可见性
        [LYTopWindow sharedTopWindow].statusBarHidden = NO;
        [LYTopWindow sharedTopWindow].statusBarHidden = YES;
        
        // 样式
        [LYTopWindow sharedTopWindow].statusBarStyle = UIStatusBarStyleDefault;
        [LYTopWindow sharedTopWindow].statusBarStyle = UIStatusBarStyleLightContent;
    

    相关文章

      网友评论

        本文标题:点击状态栏,滚动视图返回顶部的实现

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