iOS实现点击状态栏自动回到顶部效果详解

前言

大家都知道实现状态栏(statusBar)点击自动回到顶部效果,旨在为用户在浏览界面时提供便利,点击状态栏能够快速回到界面顶部,所以主要针对可以滚动的UIScrollView和其子类UITableVIewUICollectionView

这里将从以下几个方面实现该功能。

1.苹果自带功能

分析:

首先,苹果自己已经提供了该功能,往上滑动tabView,点击statusBartableView会自动回到初始位置。如下图所示,此时点击statusBar,屏幕最上方显示的将是第一个cell。在一个控制器上添加一个tabView,那么默认点击statusBar是可以自动回到顶部的。

既然苹果已经提供了该功能,我们直接拿来用就好了,干嘛还要自己实现呢?

其实不然,在一些情况下该功能是无效的。比如,在窗口上同时存在两个或两个以上UIScrollView或其子类时。例如,将上面的tabView先添加到一个scrollView上,然后再将该scrollView添加到控制器的View上,此时点击statusBar,tabView不能自动回到顶部。

因为,该效果是否有效,与 scrollsToTop属性相关。查看官方文档,以下几点值得注意:

1.默认情况下scrollsToTop是为YES的,只有当该属性为YES时,点击statusBar才有效。

2.该效果是让距离statusBar最近的ScrollView自动回到顶部

3.在iPhone屏幕上方,当存在多个ScrollView(或其子类),如果scrollsToTop= YES ScrollView超过一个,所有ScrollView都不会响应statusBar的点击。

小结:

从上面分析我们可以得出结论:我们必须保证窗口上scrollsToTop == YESScrollView(及其子类)同一时间内有且只有一个。这一样才能保证点击statusBar,该唯一存在的ScrollView能自动回到顶部。

如何保证苹果自带的该功能一直好使呢?

解决办法:我们希望回到顶部的ScrollViewscrollsToTop =YES,其他scrollsToTop = NO

有时,为了满足某种需求,我们在一个scrollView上面会添加多个TabView,实现上下滑动显示cell的不同内容,左右滑动可以切换不同的tabView,这时点击statusBar是没有效果的。因为所有的scrollViewscrollsToTop =YES。要想展示每个TableView时,点击statusBar都有效,必须让除了展示在最上面的TabView以外的所有的ScrollViewscrollsToTop =NO。这就需要去判断,到底显示的是哪一个TabView

参考代码如下:

1.让最下面的scrollViewscrollsToTop =NO。其他TableView都是该scrollView的子类。

2.遍历判断

 // 控制scrollView的scrollsToTop属性
 for (NSInteger i = 0; i < self.childViewControllers.count; i++) {
  UIViewController *childVc = self.childViewControllers[i];

  // 如果控制器的view没有被创建,跳过
  if (!childVc.isViewLoaded) continue;

  // 如果控制器的view不是scrollView,就跳过
  if (![childVc.view isKindOfClass:[UIScrollView class]]) continue;

  // 如果控制器的view是scrollView
  UIScrollView *scrollView = (UIScrollView *)childVc.view;
  scrollView.scrollsToTop = (i == index);
 }

2.自己实现

statusBar的区域添加一个遮盖,监听遮盖的点击事件。

UIView

首先我们想到用UIView来做这个遮盖。但是,在这里我们使用UIView是着不住statusBar的,UIView会一直在statusBar的下面,所以不能接收点击事件。因为statusBar其实是一个UIWindow,且优先级高于下面的keyWindow。所以,添加的UIView会在statusBar的下面。


UIWindow

由于优先级的关系,我们可以用一个UIWindow来做遮盖,设置遮盖window的优先级高于statusBar即可。当然,设置最高优先级(UIWindowLevelAlert)肯定是可以的。然后给遮盖Window添加一个点击事件,背景色设置透明即可。

 dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.1 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{

  UIWindow * coverWindow =[[UIWindow alloc]initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, 20)];
  self.coverWindow = coverWindow;
  coverWindow.hidden = NO;
  coverWindow.backgroundColor = [UIColor redColor];
  coverWindow.windowLevel = UIWindowLevelAlert;
  //添加手势
  UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(coverWindowClick)];
  [self.coverWindow addGestureRecognizer:tap];
 });
- (void)coverWindowClick {
 [UIView animateWithDuration:0.5 animations:^{

  self.tableView.contentOffset = CGPointMake(0, 0);
 }];
}

AppDelegate中直接监听statusBar的点击

AppDelegate中实现touchesBegan:方法

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
  if ([touches.anyObject locationInView:nil].y > 20) return;
 [[NSNotificationCenter defaultCenter]postNotificationName:@"click" object:nil];

}

接收通知,修改tabViewcontentOffset

- (void)coverWindowClick {
 [UIView animateWithDuration:0.5 animations:^{

  self.tableView.contentOffset = CGPointMake(0, 0);
 }];
}

总结

以上就是这篇文章的全部内容,希望对大家开发IOS能有所帮助,如果有疑问大家可以留言交流,谢谢大家对我们的支持。

(0)

相关推荐

  • iOS 自定义状态栏和导航栏详细介绍

    iOS 自定义状态栏和导航栏 开发IOS APP 经常会根据需求更改状态栏和导航栏,这里整理了几种方法,大家可以看下. 导航栏透明 -(void)viewWillAppear:(BOOL)animated { //viewWillAppear中设置透明 [super viewWillAppear:animated]; [self.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault]; /

  • IOS点击按钮隐藏状态栏详解及实例代码

    IOS点击按钮隐藏状态栏详解 前言: 最近学习IOS的基础知识,实现隐藏状态栏的功能,这里就记录下来,希望对大家有所帮助 实例代码: @interface SecondViewController () @property (nonatomic, assign,getter=isHideStatus) BOOL hideStatus; @end @implementation SecondViewController - (void)viewDidLoad { [super viewDidLoa

  • iOS 设置状态栏的背景颜色方法

    设置状态栏的背景颜色 - (void)setStatusBarBackgroundColor:(UIColor *)color { UIView *statusBar = [[[UIApplication sharedApplication] valueForKey:@"statusBarWindow"] valueForKey:@"statusBar"]; if ([statusBar respondsToSelector:@selector(setBackgro

  • 详解在iOS App中自定义和隐藏状态栏的方法

    自定义状态栏 有时候,需要在状态栏上显示一些自定义信息,比如新浪微博的官方iOS客户端:告知用户信息处于发送队列.发送成功或者发送失败. 如上图,通过在状态栏显示自定义信息,可以给用户友好又不影响软件使用的提示. 为此,我们显得定义一个自定义状态栏类,包含一个显示信息的Label: 复制代码 代码如下: @interface CustomStatusBar : UIWindow  {      UILabel *_messageLabel;  }    - (void)showStatusMes

  • iOS 隐藏导航条和状态栏实现方法

     iOS  隐藏导航条和状态栏实现方法 状态栏的高度是20,导航栏的高度是44,如果同时存在状态栏的导航条,我们通常会设置view上的控件的位置的X 大于等于 64. 一:隐藏导航条:self.navigationController.navigationBarHidden = YES; 二:隐藏状态栏: 第一步:在info.plist 文件里增加两个类型(Type)为bool 选项, Status bar is initially hidden 设为YES:View controller-ba

  • iOS在状态栏上显示提醒信息的功能定制

    先看效果图 实现这个效果,用到了JDStatusBarNotification,这是一个易于使用和定制的在状态栏上显示提醒信息的控件,可自定义颜色.字体以及动画,支持进度条展示,并可以显示活动指示器. 假设这么一个场景,需要调接口修改个人资料,这时有3个状态,正在修改.修改成功.修改失败.我们可以写一个公共类,方便调用,譬如 NSObject+Common. .h文件写方法 #import <Foundation/Foundation.h> @interface NSObject (Commo

  • IOS 开发状态栏隐藏的实现办法

    IOS 开发状态栏隐藏的实现办法 解决方法:  IOS7以下版本隐藏UIStatusBar的方法: - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { [application setStatusBarHidden:YES]; return YES; } 升级到iOS7后的方法: 在基类中重载UIViewController.h

  • 深入理解iOS的状态栏

    一.状态栏的隐藏 状态栏的隐藏主要有两种方法,下面来一起看看吧. 方法一:通过代码控制 @interface UIApplication(UIApplicationDeprecated) // Setting statusBarHidden does nothing if your application is using the default UIViewController-based status bar system. @property(readwrite, nonatomic,ge

  • 图文讲解如何解决App的iOS 7顶部状态栏适配问题

    首先说明下,ios7中,由于status bar不再占用单独的20px,如果app需要同时支持ios7和ios6.1以下,那就需要适配下了,适配开始: 先看用xcode新建项目后 IOS7和IOS6上的的运行效果: ps:一个empty application 里面+了一个rootcontroller,作为window的根控制器,view里面放了一个tableview; 是不是遇到的IOS7的新问题,状态栏跟tableview重叠了,OK,看见这个不想看到的结果,下面我们就开始正式的解决掉这个招

  • iOS实现点击状态栏自动回到顶部效果详解

    前言 大家都知道实现状态栏(statusBar)点击自动回到顶部效果,旨在为用户在浏览界面时提供便利,点击状态栏能够快速回到界面顶部,所以主要针对可以滚动的UIScrollView和其子类UITableVIew和UICollectionView. 这里将从以下几个方面实现该功能. 1.苹果自带功能 分析: 首先,苹果自己已经提供了该功能,往上滑动tabView,点击statusBar,tableView会自动回到初始位置.如下图所示,此时点击statusBar,屏幕最上方显示的将是第一个cell

  • 原生js实现淘宝首页点击按钮缓慢回到顶部效果

    淘宝首页的回到顶部按钮是这样的:下拉到一定距离后按钮才显示出来,鼠标放到按钮上时,按钮背景会变成灰色,并且图标变成了文字.点击按钮缓慢回到顶部 我们先分析下实现这样的效果需要添加哪些事件.鼠标移进移出按钮,按钮表现发生变化,所以需要给按钮添加mouseover, mouseout事件.要侦听滚动条的变化,所以需要给window添加scroll事件,点击按钮回到顶部,按钮添加click事件.我们将事件处理程序封装成三个函数moveIn, moveOut, goTop; 下面先给出html/css代

  • angularJS 指令封装回到顶部示例详解

    关于angularJS如何回到顶部,还是直接code吧! 1.构建指令,使用registerDirective构建指令添加到内部的hasDirectives对象内,以方便后面在全局查找指令的时候进行匹配. /** **回到顶部 **/ define(["app"], function (app) { app().registerDirective("backToTop", function () { return { restrict: "E",

  • JS实现带动画的回到顶部效果

    本文实例为大家分享了JS实现带动画的回到顶部效果的具体代码,供大家参考,具体内容如下 实现功能:滚动到页面某一个高度的时候,回到顶部按钮出现.点击之后回到网页顶部,按钮隐藏. 代码如下,jQuery引用的是百度CDN的,因此整段代码复制下来后在浏览器运行即可. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>实现回到顶部功能</title> &

  • jQuery实现回到顶部效果

    本文实例为大家分享了jQuery实现回到顶部效果的具体代码,供大家参考,具体内容如下 动画:通过点击侧栏导航,页面到达相应的位置 jQuery方法:show(), hide(), animate() 动画效果: 代码: <!DOCTYPE html> <head> <meta charset="UTF-8"> <title>回到顶部</title> <script src="D:\jQuery/jquery-3

  • jquery实现跳到底部,回到顶部效果的简单实例(类似锚)

    实例如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Co

  • JS采用绝对定位实现回到顶部效果完整实例

    本文实例讲述了JS采用绝对定位实现回到顶部效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" <html xmlns="http://www.w3.org/1999/xhtml"> <head&g

  • Android 状态栏的设置适配问题详解

    Android 状态栏的设置适配问题详解 最近看了很多关于状态栏的问题的处理,总结出处理状态栏分两个方向1>5.0一下2>5.0以上的手机状态栏的设置,,,,,,,,这里说的都是自定义的toolbar,我这里已经把titlebar给隐藏掉了 (1) 关于5.0一下:首先我们需要在res文件下的style中设置, <!-- Base application theme. --> <style name="AppTheme" parent="AppT

  • IOS登录页面动画、转场动画开发详解

    动画效果 需求分析 分析方法 下载这个gif动图,用mac默认的打开方式打开这个gif图(双击图片即可),效果如下 鼠标选中红色箭头所指的位置,然后按住键盘方向键下键,图片会以缓慢的可控的速度播放,便于分析动画的构成. 小tips:macos系统想正常浏览一个gif动图,可以鼠标单击图片后按空格,也可以选择用浏览器打开,gif图会以正常速度播放. 技术点分析 如何生成一个动画让控件执行? 现流行的方式主要有三种: 1.基本动画 2.核心动画 3.三方框架--POP框架(由Facebook开发)

  • 微信小程序实现分类菜单激活状态随列表滚动而自动切换效果详解

    目录 view结构 js部分 属性解释 说明 注意 这里主要用到微信小程序提供的SelectorQuery获取页面节点信息实现,组件用的是微信小程序的scroll-view 逻辑就是获取右侧盒子的节点信息,获取右侧子分类的节点信息,当子分类滑动到顶部的之后,则切换左侧分类状态,而且当右侧子分类的位置处于触顶以及包含顶部位置的状态下,同样激活左侧分类状态. view结构 左侧父级分类 <scroll-view class="left" scroll-y > <view

随机推荐