[iOS] 列表滑动展开隐藏头部HeaderView
平常遇到大多数的带有列表的应用都会遇到这个场景:在列表顶端有一个Header,当向上滑动列表时,压缩header,向下滑动列表到头时,展开header。这种样式在例如微博,twitter这些展示动态的界面里很常见。这种效果怎么实现呢?下面介绍我用的方法。
新博客:wossoneri.com
先看一下效果图
首先看一下BiliBili客户端的视频浏览界面。默认界面Header
完全展开,并且Header
显示AV号(别乱想,就是视频编号了)以及播放按钮。滑动之后Header
被压缩,按钮移到AV号左边。
我就照着界面简单实现了主要功能,比较简陋。对于按钮移动的动画就没有去花时间还原了,毕竟这里主要是为了实现滚动压缩、展开Header
,动画不讨论。
实现思路
如图所示:
首先在要将该界面分成两部分:一个ScrollHeader
,一个UITableView
。
- ScrollHeader占据屏幕上方,高度为展开后的高度
- UITableView占据整个屏幕,这样可以完全滚动。为了让内容不被
ScrollHeader
遮盖,设置contentOffset
属性即可
我这里用的
ScrollHeader
是作为独立的控件使用,与UITableView
的HeaderView
并无关系
之后将ScrollHeader
分成两部分:topView
和bottomView
。
- topView 即为压缩后的布局
- bottomView 即为展开后的布局
我这里采取将topView固定在ScrollHeader
的顶部,覆盖在bottomView
上方,根据滑动对其淡入淡出。
另一种效果是把
topView
与bottomView
上下连接在一起,也就是没有覆盖关系,然后当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
来判断滑动状态了。
剩下的工作就是捕捉滑动状态,并且对滑动距离进行计算,移动topView
和bottomView
了。对于计算也不做过多说明了,因为没有几张草图也说不清。直接贴上代码,跟着代码算一下就知道怎么回事了。
#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);
}
最后放上源码
粗略写的,代码是用自动布局写的。往后抽空会优化一下代码,把ScrollHeader
封装成控件方便使用。
[iOS] 列表滑动展开隐藏头部HeaderView的更多相关文章
- iOS 列表三级展开
效果图如下: #import <UIKit/UIKit.h> @interface AppDelegate : UIResponder <UIApplicationDe ...
- cell左右滑动展开更多按钮-MGSwipeTableCell
MGSwipeTableCell是一个UITableViewCell的子类, 它实现了左,右滑动展开更多按钮用来实现一些相关操作就和QQ好友列表滑动展开的按钮一样,封装的很好,动画效果也处理很到位,废 ...
- 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态。点击列表的项,切换二级列表的显示或隐藏状态
查看本章节 查看作业目录 需求说明: 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态.点击列表的项,切 ...
- 滑动listview隐藏和显示顶部布局
需求: 1.listview向下滑动时,隐藏顶部布局 2.listview向上滑动到最上面,显示顶部布局 3.顶部布局的隐藏和显示有过渡效果 4.第一次加载listview时,顶部不要隐藏 布局: 注 ...
- ListView点击Item展开隐藏项(单项展开、多项展开、复杂布局时的展开处理)
手机屏幕毕竟有限,当我们要显示较多数据时便不得不舍去一些次要信息.将主要信息优先显示,也使显示效果更加简洁美观.遇到类似的需求,我们使用最多的就是 ListView ,而假设每次点击一个 Item 都 ...
- 记 页面使用overflow-scroll在iOS上滑动卡顿的问题
页面使用overflow-scroll在iOS上滑动卡顿的问题 因在做一个滑动的list列表,为某个div使用了overflow: scroll属性. 结果在手机上测试时,ios手机有明显的滑动卡顿问 ...
- CSS3学习笔记(4)—上下滑动展开的按钮
最近写了一个动画,下面来看看我以前写的一个上下滑动展开的按钮效果: 这类的效果经常会在一些网站页面下载按钮处看到,当你鼠标悬浮在下载按钮时,会提醒你是否已注册,或者点击登录什么的小提示~~~~~ 一. ...
- 类似IOS的滑动返回上一级,SwipeBackLayout-android的滑动返回类库
最近,公司在开发App的需求中增加了一个新的需求,要在android的页面中增加向右滑动的时候返回上一级页面.我刚知道这个需求的时候,感觉有点坑,可能设计那边最近接触到知乎的客户端或者是IOS的滑动可 ...
- jQuery hover事件鼠标滑过图片半透明标题文字滑动显示隐藏
1.效果及功能说明 hover事件制作产品图片鼠标滑过图片半透明,标题文字从左到右滑动动画移动显示隐藏 2.实现原理 首先把效果都隐藏,然后定义一个伪类来触发所有的效果,接下来当触发伪类后会有一个遍历 ...
随机推荐
- 修改Hosts文件提示没有权限怎么办
解决办法:给host文件赋予权限 1.打开电脑C盘,在目录C:\Windows\System32\drivers\etc 下找到hosts文件 2.右键hosts文件,选择属性 3.点击hosts属性 ...
- JavaScript -- Navigator
-----040-Navigator.html----- <!DOCTYPE html> <html> <head> <meta http-equiv=&qu ...
- 使用node和express+mongodb实现数据增删改功能
2018即将过去,2019即将来临,前端技术不断在在更新,学的东西越来越多.我们只有不断的学习,才不能被淘汰.在前后端分离的一个时代,后端提供接口,前端调用接口,逻辑判断,每个都是独立的工作.如果自己 ...
- 关于oracle的缓冲区机制与HDFS中的edit logs的某些关联性的思考
可能大家会问,oracle和HDFS属于不同场景的存储系统,它们之间为什么会有联系呢?确实,从技术本身来看,他们确实无关联,但利用“整体学习”的思想,跳出技术本身,可以发现Oracle的缓冲区和HDF ...
- 系统启动时队列自动下单--ServletContextListener
package com.liying.pear.queue; import javax.servlet.ServletContextEvent; import javax.servlet.Servle ...
- screen 实战后台命令执行备份
一.安装 [root@vmware ~]# yum install -y screen 二.直接在命令行键入 screen 命令 [root@vmware ~]# screen 三.暂时终端会话 那么 ...
- 配置Vim的显示样式
进入用户目录: cd ~ 复制系统的vim配置到用户的目录下: cp -r /usr/share/vim/vimrc ~/.vimrc 如果无法编辑,可能时因为/usr/share/vim/vimrc ...
- WPF 中动态改变控件模板
在某些项目中,可能需要动态的改变控件的模板,例如软件中可以选择不同的主题,在不同的主题下软件界面.控件的样式都会有所不同,这时即可通过改变控件模板的方式实现期望的功能. 基本方法是当用户点击切换主题按 ...
- Tomcat学习总结(15)—— Tomcat优化时的参数分析
(1).maxHttpHeaderSize=”8192” 此选项用于配置:来自于客户端请求的Request和Response的HTTP header 的最大长度,以字节计算.如果不设置,该属性为409 ...
- 分享一个shell脚本的坑:grep匹配+wc取值 在脚本执行后的结果与手动执行结果不一致
打算在跳板机上写一个shell脚本,批量检查远程服务器上的main进程是否在健康运行中. 先找出其中一台远程机器,查看main进程运行情况 [root@two002 tmp]# ps -ef|grep ...