[iOS] 列表滑动展开隐藏头部HeaderView

先看一下效果图

首先看一下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封装成控件方便使用。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏向治洪

React Native项目实战之搭建美团个人中心界面

在很多app应用型APP中,个人中心往往会单独出一个模块,而对于刚入门React Native的朋友来说,怎么去实现一些静态的页面,并且怎么着手实现,怎么分层,...

3946
来自专栏GIS讲堂

Geoserver2.11矢量切片与OL3中的调用展示

GIS的底图一直使用金字塔技术进行切图,使用户能够快速访问指定级别的地图或者影像。但是切图本身是一张图片,无法进行交互。于是又引入了矢量图层用来显示矢量点线面,...

1613
来自专栏用户2442861的专栏

PyQt4中的布局管理 (入门较好2)

http://www.blogjava.net/glorywine/archive/2008/07/30/217842.html

1481
来自专栏MasiMaro 的技术博文

对话框伸缩功能的实现

对话框的伸缩功能是指当触发某一操作时只显示部分对话框的内容,再次触发时显示全部的对话框范围,就比如画图软件上的选择颜色对话框,我们可以使用系统预定义的颜色,也可...

1122
来自专栏WindCoder

一个创建产品动画说明视频的新手指南

英文原文:A Step-by-step Guide to Creating Animated Product Explainer Videos

1921
来自专栏非典型技术宅

iOS动画系列之五:基础动画之缩放篇&旋转篇Swift+OC1. 思路和最终成果2. 抽取公共方法3. 懒加载Layer4. 添加动画

1471
来自专栏Android机动车

Android 约束布局ConstraintLayout1.1.0 版详解

在http://dyg8.com/20180205/Android-ConstraintLayout-Detailed/这篇文章中,我们对 Constraint...

1164
来自专栏偏前端工程师的驿站

CSS魔法堂:再次认识font

一、前言                                 文字承载着站点内涵,而良好的字体、排版则为用户提供舒适的阅读体验。本文打算对字体稍微深...

28810
来自专栏非典型技术宅

iOS动画系列之六:利用CABasic Animation完成带动画特效的登录界面1. 画风突变的笑脸2. 心跳3. iOS实践:实现一个带动效的登录界面

1386
来自专栏一“技”之长

iOS开发封装一个可以响应超链接的label——基于RCLabel的交互扩展

        iOS系统是一个十分注重用户体验的系统,在iOS系统中,用户交互的方案也十分多,然而要在label中的某部分字体中添加交互行为确实不容易的,如果...

901

扫码关注云+社区

领取腾讯云代金券