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

最近做了一个模仿微信聊天界面头部下拉出现小程序的效果,同时也可以通过头部的按钮控制弹出框的伸缩,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"];

即可。

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