平常遇到大多数的带有列表的应用都会遇到这个场景:在列表顶端有一个Header,当向上滑动列表时,压缩header,向下滑动列表到头时,展开header。这种样式在例如微博,twitter这些展示动态的界面里很常见。这种效果怎么实现呢?下面介绍我用的方法。

新博客:wossoneri.com

先看一下效果图

首先看一下BiliBili客户端的视频浏览界面。默认界面Header完全展开,并且Header显示AV号(别乱想,就是视频编号了)以及播放按钮。滑动之后Header被压缩,按钮移到AV号左边。

我就照着界面简单实现了主要功能,比较简陋。对于按钮移动的动画就没有去花时间还原了,毕竟这里主要是为了实现滚动压缩、展开Header,动画不讨论。

实现思路

如图所示:

首先在要将该界面分成两部分:一个ScrollHeader,一个UITableView

  • ScrollHeader占据屏幕上方,高度为展开后的高度
  • UITableView占据整个屏幕,这样可以完全滚动。为了让内容不被ScrollHeader遮盖,设置contentOffset属性即可

我这里用的ScrollHeader是作为独立的控件使用,与UITableViewHeaderView并无关系

之后将ScrollHeader分成两部分:topViewbottomView

  • topView 即为压缩后的布局
  • bottomView 即为展开后的布局

    我这里采取将topView固定在ScrollHeader的顶部,覆盖在bottomView上方,根据滑动对其淡入淡出。

另一种效果是把topViewbottomView上下连接在一起,也就是没有覆盖关系,然后当bottomView向上滑时topView从屏幕外滑入屏幕内。这个读者可以尝试着实现一下。

实现方法

首先按照前面的设计将界面布局好,之后的重点是为ScrollHeader增加滑动效果。

由于我的ScrollHeader继承的是UIView,所以为了处理滑动,为其设置一个UIScrollView

@property (nonatomic, strong) UIScrollView *headerScrollView;

这个属性的作用就是获得UITableView对应的scrollView,因为UITableView本身是继承UIScrollView的,所以在初始化ScrollHeader的时候可以这么写:

MyScrollHeader header = [[MyScrollHeader alloc] init];
header.headerScrollView = _tableView;

这样,在ScrollHeader中就可以通过headerScrollView来判断滑动状态了。

剩下的工作就是捕捉滑动状态,并且对滑动距离进行计算,移动topViewbottomView了。对于计算也不做过多说明了,因为没有几张草图也说不清。直接贴上代码,跟着代码算一下就知道怎么回事了。

#pragma mark - scroll state
-(void)willMoveToSuperview:(UIView *)newSuperview{
[self.headerScrollView addObserver:self forKeyPath:@"contentOffset" options:(NSKeyValueObservingOptionNew) context:Nil];
self.headerScrollView.contentInset = UIEdgeInsetsMake(_bottomHeight, 0, 0, 0); // tableview 偏移
} -(void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context{ //监视滑动
CGPoint newOffset = [change[@"new"] CGPointValue];
[self updateSubViewsWithScrollOffset:newOffset];
} -(void)updateSubViewsWithScrollOffset:(CGPoint)newOffset { // NSLog(@"scrollview inset top:%f", self.headerScrollView.contentInset.top);
// NSLog(@"new offset before:%f", newOffset.y);
// NSLog(@"newOffset : %f", newOffset.y); float startChangeOffset = - self.headerScrollView.contentInset.top; newOffset = CGPointMake(newOffset.x, newOffset.y < startChangeOffset ? startChangeOffset : (newOffset.y > _destinaOffset ? _destinaOffset : newOffset.y));
// NSLog(@"new offset after:%f", newOffset.y); float newY = - newOffset.y - _bottomHeight;
float d = _destinaOffset - startChangeOffset;
float alpha = 1 - (newOffset.y - startChangeOffset) / d; self.frame = CGRectMake(0, newY, self.frame.size.width, self.frame.size.height);
topView.frame = CGRectMake(0, -newY, self.frame.size.width, self.frame.size.height); topView.alpha = 1 - alpha;
bottomView.alpha = alpha; _currentOffset = newOffset.y;
NSLog(@"current offset: %f", _currentOffset);
}

最后放上源码

github

粗略写的,代码是用自动布局写的。往后抽空会优化一下代码,把ScrollHeader封装成控件方便使用。

[iOS] 列表滑动展开隐藏头部HeaderView的更多相关文章

  1. iOS 列表三级展开

    效果图如下:        #import <UIKit/UIKit.h> @interface AppDelegate : UIResponder <UIApplicationDe ...

  2. cell左右滑动展开更多按钮-MGSwipeTableCell

    MGSwipeTableCell是一个UITableViewCell的子类, 它实现了左,右滑动展开更多按钮用来实现一些相关操作就和QQ好友列表滑动展开的按钮一样,封装的很好,动画效果也处理很到位,废 ...

  3. 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态。点击列表的项,切换二级列表的显示或隐藏状态

    查看本章节 查看作业目录 需求说明: 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态.点击列表的项,切 ...

  4. 滑动listview隐藏和显示顶部布局

    需求: 1.listview向下滑动时,隐藏顶部布局 2.listview向上滑动到最上面,显示顶部布局 3.顶部布局的隐藏和显示有过渡效果 4.第一次加载listview时,顶部不要隐藏 布局: 注 ...

  5. ListView点击Item展开隐藏项(单项展开、多项展开、复杂布局时的展开处理)

    手机屏幕毕竟有限,当我们要显示较多数据时便不得不舍去一些次要信息.将主要信息优先显示,也使显示效果更加简洁美观.遇到类似的需求,我们使用最多的就是 ListView ,而假设每次点击一个 Item 都 ...

  6. 记 页面使用overflow-scroll在iOS上滑动卡顿的问题

    页面使用overflow-scroll在iOS上滑动卡顿的问题 因在做一个滑动的list列表,为某个div使用了overflow: scroll属性. 结果在手机上测试时,ios手机有明显的滑动卡顿问 ...

  7. CSS3学习笔记(4)—上下滑动展开的按钮

    最近写了一个动画,下面来看看我以前写的一个上下滑动展开的按钮效果: 这类的效果经常会在一些网站页面下载按钮处看到,当你鼠标悬浮在下载按钮时,会提醒你是否已注册,或者点击登录什么的小提示~~~~~ 一. ...

  8. 类似IOS的滑动返回上一级,SwipeBackLayout-android的滑动返回类库

    最近,公司在开发App的需求中增加了一个新的需求,要在android的页面中增加向右滑动的时候返回上一级页面.我刚知道这个需求的时候,感觉有点坑,可能设计那边最近接触到知乎的客户端或者是IOS的滑动可 ...

  9. jQuery hover事件鼠标滑过图片半透明标题文字滑动显示隐藏

    1.效果及功能说明 hover事件制作产品图片鼠标滑过图片半透明,标题文字从左到右滑动动画移动显示隐藏 2.实现原理 首先把效果都隐藏,然后定义一个伪类来触发所有的效果,接下来当触发伪类后会有一个遍历 ...

随机推荐

  1. 修改Hosts文件提示没有权限怎么办

    解决办法:给host文件赋予权限 1.打开电脑C盘,在目录C:\Windows\System32\drivers\etc 下找到hosts文件 2.右键hosts文件,选择属性 3.点击hosts属性 ...

  2. JavaScript -- Navigator

    -----040-Navigator.html----- <!DOCTYPE html> <html> <head> <meta http-equiv=&qu ...

  3. 使用node和express+mongodb实现数据增删改功能

    2018即将过去,2019即将来临,前端技术不断在在更新,学的东西越来越多.我们只有不断的学习,才不能被淘汰.在前后端分离的一个时代,后端提供接口,前端调用接口,逻辑判断,每个都是独立的工作.如果自己 ...

  4. 关于oracle的缓冲区机制与HDFS中的edit logs的某些关联性的思考

    可能大家会问,oracle和HDFS属于不同场景的存储系统,它们之间为什么会有联系呢?确实,从技术本身来看,他们确实无关联,但利用“整体学习”的思想,跳出技术本身,可以发现Oracle的缓冲区和HDF ...

  5. 系统启动时队列自动下单--ServletContextListener

    package com.liying.pear.queue; import javax.servlet.ServletContextEvent; import javax.servlet.Servle ...

  6. screen 实战后台命令执行备份

    一.安装 [root@vmware ~]# yum install -y screen 二.直接在命令行键入 screen 命令 [root@vmware ~]# screen 三.暂时终端会话 那么 ...

  7. 配置Vim的显示样式

    进入用户目录: cd ~ 复制系统的vim配置到用户的目录下: cp -r /usr/share/vim/vimrc ~/.vimrc 如果无法编辑,可能时因为/usr/share/vim/vimrc ...

  8. WPF 中动态改变控件模板

    在某些项目中,可能需要动态的改变控件的模板,例如软件中可以选择不同的主题,在不同的主题下软件界面.控件的样式都会有所不同,这时即可通过改变控件模板的方式实现期望的功能. 基本方法是当用户点击切换主题按 ...

  9. Tomcat学习总结(15)—— Tomcat优化时的参数分析

    (1).maxHttpHeaderSize=”8192” 此选项用于配置:来自于客户端请求的Request和Response的HTTP header 的最大长度,以字节计算.如果不设置,该属性为409 ...

  10. 分享一个shell脚本的坑:grep匹配+wc取值 在脚本执行后的结果与手动执行结果不一致

    打算在跳板机上写一个shell脚本,批量检查远程服务器上的main进程是否在健康运行中. 先找出其中一台远程机器,查看main进程运行情况 [root@two002 tmp]# ps -ef|grep ...