IOS实现上滑隐藏NvaigtionBar而下拉则显示效果

先看看原APP的效果

实现过程

主要是给view中的滚动视图添加一个KVO来监视它的滑动，再根据它的offset来做一下操作，下面是代码

[myTableView addObserver:self forKeyPath:@"contentOffset" options:NSKeyValueObservingOptionOld|NSKeyValueObservingOptionNew context:nil];

获取tableView的 contentOffset 之后再根据具体需求来实现逻辑判断

-(void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)change context:(void *)context {
 if ([object isEqual:myTableView] && [keyPath isEqualToString:@"contentOffset"]) {
  //获取新值旧值
  CGFloat newY = [change[@"new"] CGPointValue].y;
  CGFloat oldY = [change[@"old"] CGPointValue].y;
  float i = newY - oldY;//下拉是新值小于旧值的，所以i<0 是下拉 i>0 是上滑
   NSLog(@"%f",myTableView.contentOffset.y);
  if (myTableView.contentOffset.y > -64 && myTableView.contentOffset.y <= 24) {//边界条件，此处不精确
   if (i <= 0 && _isHide == NO && self.navigationController.navigationBar.frame.origin.y == 20){
    //下拉＋bar 已经显示的状态，不再移动
    return;
   }
   _isHide = NO;
   //设置navigationbar 的frame 使他根据tableView来滑动
   self.navigationController.navigationBar.frame = CGRectMake(0, -44 - myTableView.contentOffset.y, self.view.bounds.size.width, 44);
   //控制透明度
   self.navigationController.navigationBar.alpha = -myTableView.contentOffset.y/64;
  }else if (myTableView.contentOffset.y > 24) {
   if (i > 10) {//更改数值大小可以控制触发 navigation bar 的滑动速度
    _isHide = YES;
   }else if(i < -10) {
    _isHide = NO;
   }
  }
  [self.navigationController setNavigationBarHidden:_isHide animated:YES];
 }
}

完成效果图

总结

其实这个效果实现起来确实没有什么难度，写这个主要是给大家看一下我的实现过程与思路，希望可以帮到大家。如果有疑问可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • 总结IOS中隐藏软键盘的三种方式

    总结IOS中隐藏软键盘的三种方式

    一.使用软键盘的 Done 键隐藏键盘 出发软键盘隐藏最常用的事件是文本框的 Did End on Exit,它在用户按软键盘中的 Done 键时发生.选中一个UITextField控件,点击鼠标右键弹出面板,鼠标左键按住 Did End on Exit 事件旁边的圆圈,然后拖曳到右侧 .h 文件中,命名为 CloseTheKeyBoard,在 m 文件中具体实现如下图所示(此处同时显示 .h 文件与 .m 文件): 当页面中有很多个文本框时,如果每次都需要点文本框激活软键盘.输入后点击Retu

  • iOS 隐藏tabbar代码详解

    -(void)viewWillAppear:(BOOL)animated { NSArray *array=self.tabBarController.view.subviews; UIView *view=array[2]; view.frame=CGRectMake(0, [UIScreen mainScreen ].bounds.size.height, [UIScreen mainScreen ].bounds.size.width, 49); [UIView commitAnimati

  • iOS界面跳转时导航栏和tabBar的隐藏与显示功能

    一.当A页面要push到B页面,需要将B页面的导航栏隐藏时,我们只需要在A页面中重写以下两个方法: override func viewWillAppear(animated: Bool) { super.viewWillAppear(animated) self.navigationController?.setNavigationBarHidden(true, animated: true) } override func viewWillDisappear(animated: Bool)

  • 详解IOS点击空白处隐藏键盘的几种方法介绍

    详解IOS点击空白处隐藏键盘的几种方法介绍

    IOS7 点击空白处隐藏键盘的几种方法,具体如下: iOS开发中经常要用到输入框,默认情况下点击输入框就会弹出键盘,但是必须要实现输入框return的委托方法才能取消键盘的显示,对于用户体验来说很不友好,我们可以实现点击键盘以外的空白区域来将键盘隐藏,以下我总结出了几种隐藏键盘的方法: 首先说明两种可以让键盘隐藏的Method: 1.[view endEditing:YES]  这个方法可以让整个view取消第一响应者,从而让所有控件的键盘隐藏. 2.[textFiled resignFirst

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

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

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

    详解在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实现上滑隐藏NvaigtionBar而下拉则显示效果

    IOS实现上滑隐藏NvaigtionBar而下拉则显示效果

    先看看原APP的效果 实现过程 主要是给view中的滚动视图添加一个KVO来监视它的滑动,再根据它的offset来做一下操作,下面是代码 [myTableView addObserver:self forKeyPath:@"contentOffset" options:NSKeyValueObservingOptionOld|NSKeyValueObservingOptionNew context:nil]; 获取tableView的 contentOffset 之后再根据具体需求来实

  • jquery实现鼠标滑过显示二级下拉菜单效果

    jquery实现鼠标滑过显示二级下拉菜单效果

    本文实例讲述了jquery实现鼠标滑过显示二级下拉菜单效果.分享给大家供大家参考.具体如下: 这是一款jquery实现的下拉菜单,当鼠标移在主菜单上的时候,向下滑出二级子菜单,采用UL LI结构,便于修改完善,我觉得是很实用的菜单,希望大家平时能用得上. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-mouse-over-show-menu-codes/ 具体代码如下: <!DOCTYPE html> <head>

  • php+jQuery实现的三级导航栏下拉菜单显示效果

    php+jQuery实现的三级导航栏下拉菜单显示效果

    本文实例讲述了php+jQuery实现的三级导航栏下拉菜单显示效果.分享给大家供大家参考,具体如下: 首先看看效果图: 1.数据配置文件 db.php <?php return array( array( 'one' => '关于我们', 'two' => array( array( 'three_tit' => '公司介绍', 'three_cont' => array( '企业概况', '组织架构', '发展历程', '企业文化', '服务理念' ) ), array(

  • iOS开发使用UITableView制作N级下拉菜单的示例

    前言 demo地址:  https://github.com/963527512/MultilayerMenu, 如果有更好的办法, 请留言 前段时间在做项目的时候, 遇到了一个N级下拉菜单的需求, 可无限层级的展开和闭合, 下面是效果图 其中每一个UITableViewCell左右两部分拥有不同的功能 左半部分我放了一个按钮, 用来控制每个选项的选中状态 右半部分控制菜单的展开和闭合 下面是我在做这个功能时的思路, 使用的是MVC 创建控制器, 并添加数据 第一步, 创建一个新的项目, 并添加

  • Android自定义控件下拉刷新实例代码

    Android自定义控件下拉刷新实例代码

    实现效果: 图片素材: --> 首先, 写先下拉刷新时的刷新布局 pull_to_refresh.xml: <resources> <string name="app_name">PullToRefreshTest</string> <string name="pull_to_refresh">下拉可以刷新</string> <string name="release_to_refre

  • jQuery扁平化风格下拉框美化插件FancySelect使用指南

    FancySelect是一款小巧实用的jQuery下拉框美化插件.该下拉框美化插件采用扁平化设计风格,是追求时尚的开发者的首选下拉框美化插件之一. 使用方法 HTML结构 FancySelect实用十分简单,它可以和jQuery或Zepto结合使用.在页面中放置一些 <select> 下拉框组件,然后就可以通过 .fancySelect() 方法来调用该下拉框插件.如果下拉框中有某个选项没有值,该插件会使用某种占位文字来代替它. 默认情况下,FancySelect 在 iOS 设备上仅使用原生

  • Android SwipereFreshLayout下拉刷新

    Android SwipereFreshLayout下拉刷新 我们都知道现在android5.0以后就提倡使用Material Design设计了.在Material Design设计就有一个非常好的设计SwipereFreshLayout,下面我们就来看看它的使用.既然它来源于Material Design,我们第一步就应该是添加它的库. 1.我们就在build.gradle添加库: compile 'com.android.support:support-v4:22.1.1' 2.然后我们就

  • android实现上滑屏幕隐藏底部菜单栏的示例

    android实现上滑屏幕隐藏底部菜单栏的示例

    本篇文章引用github上一个仿今日头条项目,项目地址: https://github.com/iMeiji/Toutiao ,主要实现的功能是底部菜单栏随用户手势滑动而变化可见状态 布局代码 这个功能实现起来比较简单,主要利用了CoordinatorLayout的 layout_behavior 的属性.具体代码如下: <android.support.design.widget.CoordinatorLayout android:layout_width="match_parent&q

  • Android RecyclerView实现下拉刷新和上拉加载更多

    使用官方的刷新控件SwipeRefreshLayout来实现下拉刷新,当RecyclerView滑到底部实现下拉加载(进度条效果用RecyclerView加载一个布局实现) 需要完成控件的下拉监听和上拉监听,其中,下拉监听通过SwipRefreshLayout的setOnRefreshListener()方法监听,而上拉刷新,需要通过监听列表的滚动,当列表滚动到底部时触发事件,具体代码如下 主布局 <?xml version="1.0" encoding="utf-8&

  • BootStrap点击下拉菜单项后显示一个新的输入框实现代码

    我的页面上有一个下拉菜单,页面上有一个文本输入框,一个图像上传框,文本输入框默认是显示的,而图片上传框是隐藏的. 假设下拉菜单有两项A和B,我想实现这样的效果:点击A时显示文本输入框,隐藏图像输入框:点击B时显示图像上传框,隐藏文本输入框,请问怎么实现? 用firebug调试的时候发现只有在加载html页面的时候几个click函数才会执行,页面加载好后点击下拉菜单项,这些断点都不会被执行,求解是怎么回事. 我的js代码如下(定义在<head>部分中): <script type=&quo

随机推荐