美文网首页首页投稿(暂停使用,暂停投稿)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;

相关文章

  • 分页视图

    1、tableView也是滚动视图1> 禁用点击状态栏回到表格视图的顶部 self.tableView.scrol...

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

    一、前言 在iOS开发中,我们常常看到好多应用都有这样一个效果,如果一个应用当前页是是一个滚动视图,当用户点击状态...

  • jQuery点击锚点平滑滚动

    点击锚点平滑滚动到相应页面位置: .. "返回顶部"按钮效果:向下滚动页面出现 按钮,点击返回顶部。 …………EN...

  • vue下返回顶部功能实现

    vue下返回顶部功能实现 Vue中点击按钮回到顶部(滚动效果) vue中回到顶部 vue滚动到一定位置显示置顶元素...

  • iOS-父子控制器中点击状态栏返回顶部功能的实现方案

    应用场景需求:细心的人会发现,在很多app应用中点击顶部状态栏会快速返回顶部,系统有帮忙实现这个功能,但是有条件;...

  • 点击状态栏返回顶部

    1、自定义window2、转换坐标系3、递归判断该控件是否在主窗口上显示4、判断窗口的显示颜色 自定义window...

  • 2019-11-13

    在一个可滚动视图页面,要求顶部toolbar不可滚动,但顶部toolbar与下面的内容的背景一致,该怎么实现? 设...

  • TableView,点击状态栏滚动到顶部

    TableView,点击状态栏滚动到顶部 背景 iPhone上的应用,基本上都有个特点,只要有表格,那么用户点击状...

  • jquery滑到底部、返回顶部

    当页面有滚动条时,显示滑到底部,点击对应按钮到底部 到底部时,点击返回顶部 滚动到顶部和底部之间时,显示滑到底部、...

  • UIStatusBar的点击

    1 UIStatusBar的系统点击事件 系统默认的点击状态栏时,scrollView的内容返回到顶部,如图所示....

网友评论

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

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