最近做了一个模仿微信聊天界面头部下拉出现小程序的效果,同时也可以通过头部的按钮控制弹出框的伸缩,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"];
即可。
第一次写文章，语言的表述不好，讲重点也没抓好，希望以后能提高。感悟就是还需多阅读大佬的源码，站在巨人肩膀上真的能事半功倍！
网友评论