下拉头部-模仿微信聊天头部拉下小程序效果

最近做了一个模仿微信聊天界面头部下拉出现小程序的效果,同时也可以通过头部的按钮控制弹出框的伸缩,GitHub传送门

先上效果:

滑动.gif

下面讲下我的思路:

1.通过runtime的关联方法

runtime-AssociatedObject

对UIScrollview写一个扩展类,增加一个UIView的属性,frame设置在UIScrollview的头部。

2.然后UITableView的tableHeaderView这个属性来实现的,因为怎么想都觉得这只是一个头部的视图,往下拉时,通过对tableview的滑动时的delegate回调,通过设置tableview的

- (void)setContentOffset:(CGPoint)contentOffset animated:(BOOL)animated;

这个方法直接偏移位置就行了,但是tableview的数据如果不是足够多到能铺满一个屏幕的话,比如UITableViewCell只有2条的时候,设置[_tableView setContentOffset:CGPointMake(0, -100)]时,tableview的contentOffset还是在(0, 0)的位置。

折腾了许久后,想起MJRefresh的下拉刷新效果,然后参照MJRefreshHeaderView写了一个继承于MJRefreshBaseView的类LFTableHeaderView,通过对UIScrollview的KVO监听,设置当前弹出视图的状态state,以及临界点的判断,重写该state属性,实现对应的动画(不了解的童鞋可以详读MJRefresh源码),并在LFTableHeaderView中加入了一个自定义的view,这样基本弹出效果的功能也就实现了,可以通过


来设置头部的展示与隐藏。

3.然后就是上面点击按钮的收拉头部的功能,以及滚动时按钮箭头的转向,我是通过对UIScrollview的扩展类新增了一个NSNumber* isShowLFHeader的属性来记录当前的状态(本来用BOOL的,但是objc_getAssociatedObject会报错,需要以NSObject,就改用NSNumber),当展开时设置该值为@1,隐藏时为@0。

4.至于里面的CollectionView就是个小视图的功能了,因为业务需要,添加了右上角的角标设置,使用时直接使用

_tableView.lf_header.badgeNumArr = @[@"20",@"1",@"101",@"2",@"0",@"0"];

即可。

第一次写文章,语言的表述不好,讲重点也没抓好,希望以后能提高。感悟就是还需多阅读大佬的源码,站在巨人肩膀上真的能事半功倍!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AGI阅读 16,003评论 3 119
  • 1.ios高性能编程 (1).内层 最小的内层平均值和峰值(2).耗电量 高效的算法和数据结构(3).初始化时...
    欧辰_OSR阅读 29,520评论 8 265
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,135评论 1 32
  • 一个纸团, 跟着另一个纸团, 以或优美或生硬的路线, 走向垃圾筐。 一团团思绪, 从纠结的双眉间, 以或留恋或决绝...
    光影剪刀手阅读 280评论 0 4
  • 今天我们班来了个同学叫王雨,一个爱学习的女孩。老师告诉同学们,下课跟她一块玩游戏。她挨着马凯,我相信她很快和大家成...
    杨腾晋阅读 189评论 0 0