运行效果
之前做过一个UITableView对应一个头部，并且有推拉或者视差效果。但这次不一样，是多个UITableView对应同一个头部，并且也需要推拉效果。开始不以为意，做着做着才发现比较有难度。难在同一个头部被多个UITableView的contentOffset影响，会在切换页面的时候contentOffset.Y产生冲突。
头部的推拉效果
仔细观察效果，可以简单的概括为：
- header有向上移动的空间就向上移动，并且tableview的contentoffset不变化
- header没有向上移动的空间就开始移动tableview，即tableview的contentoffset.y增加
- tableview有向下移动的空间就向下移动，即tableview的contentoffset.y减少
- tableview没有向下移动的空间就开始移动header，且tableview的contentoffset.y始终==0
代码
MYTableView.h中添加属性
@interface MYTableView : UITableView
@property(nonatomic , assign) CGFloat velocity;//速度，有方向
@property(nonatomic , assign) CGFloat lastTranslationPointInView;//最后转变方向的点
@property(nonatomic , assign) CGFloat lastTranslationInView;//最后转变方向与上一次转变方向手指滑动的距离
@property(nonatomic , assign) CGFloat headerOffset;//头部偏移
@property(nonatomic , assign) CGFloat beginDragingY;//开始拖拽时的Y方向偏移
@end
所有的UITableView在滚动的时候调用下列方法
- (void)myteamscrollViewWillBeginDragging:(UIScrollView *)scrollView beginDraggingY:(CGFloat)draggingY {
MYTableView *myscrollView;//其他类型的UIscrollView也会调用，所以先判断下是不是MYTableView
if ([scrollView isKindOfClass:[MYTableView class]]) {
myscrollView = (MYTableView *)scrollView;
}
if (!myscrollView) {
return;
}
myscrollView.lastTranslationPointInView = [scrollView.panGestureRecognizer translationInView:scrollView.panGestureRecognizer.view].y;//手指开始拖拽的偏移
myscrollView.velocity = [scrollView.panGestureRecognizer velocityInView:scrollView.panGestureRecognizer.view].y;//速度
myscrollView.headerOffset = CGRectGetMinY(self.headerView.frame);//头部偏移
myscrollView.beginDragingY = myscrollView.contentOffset.y;//tableview的偏移
myscrollView.lastTranslationInView = 0;//手指移动距离
}
- (void)myteamScrollViewDidScroll:(UIScrollView *)scrollView beginDraggingY:(CGFloat)draggingY {
MYTableView *myscrollView;
if ([scrollView isKindOfClass:[MYTableView class]]) {
myscrollView = (MYTableView *)scrollView;
}
if (!myscrollView) {
return;
}
CGFloat velocity = [scrollView.panGestureRecognizer velocityInView:scrollView.panGestureRecognizer.view].y;//获取当前速度
CGFloat translation = [scrollView.panGestureRecognizer translationInView:scrollView.panGestureRecognizer.view].y;
CGFloat y = myscrollView.contentOffset.y;
if (myscrollView.velocity == 0) {//调整速度,因为手指松开后速度会变为0
myscrollView.velocity = velocity;
}
//判断方向是否发生改变 方向改变就等价于刚开始drag只不过方向相反 所以相关的参数重置 减去之前方向上滑动的距离
if (velocity*myscrollView.velocity<0) {//方向改变
myscrollView.velocity = velocity;
if (y <= 0 && velocity < 0) {//
myscrollView.lastTranslationInView = fabs(myscrollView.lastTranslationPointInView-translation);
}
myscrollView.lastTranslationPointInView = translation;
myscrollView.headerOffset = CGRectGetMinY(self.headerView.frame);
myscrollView.beginDragingY = scrollView.contentOffset.y;
}
translation = fabs(myscrollView.lastTranslationPointInView-translation);//计算手指在同一方向上的偏移，例如先下滑再上滑再松开，计算结果就是向上滑动的距离
CGFloat headerMinY = CGRectGetMinY(self.headerView.frame);//header的y值
if (velocity < 0) {//向上drag
if (headerMinY > -115 && y >= 0) {//如果header还可以向上滑 就设置tableview的contentOffset为(0 , 0)
[self.headerView mas_remakeConstraints:^(MASConstraintMaker *make) {
make.left.right.mas_equalTo(0);
make.top.mas_equalTo(MIN(MAX(myscrollView.headerOffset-(translation-myscrollView.lastTranslationInView), -115), 0));
make.height.mas_equalTo(115);
}];
[scrollView setContentOffset:CGPointMake(0, 0) animated:NO];
}
}
if (velocity == 0) {//isdraging == NO 手指松开 速度为0
if (y > myscrollView.beginDragingY) {//上滑
if (headerMinY > -115) {
[self.headerView mas_remakeConstraints:^(MASConstraintMaker *make) {
make.left.right.mas_equalTo(0);
make.top.mas_equalTo(MAX(myscrollView.headerOffset-translation, -115));
make.height.mas_equalTo(115);
}];
[scrollView setContentOffset:CGPointMake(0, 0) animated:NO];
}
}else{//下滑
if (y <= 0) {
[self.headerView mas_remakeConstraints:^(MASConstraintMaker *make) {
make.left.right.mas_equalTo(0);
make.top.mas_equalTo(MIN(fabs(y)-115, 0));
make.height.mas_equalTo(115);
}];
}
}
}
if (velocity>0) {//向下drag
if (headerMinY < 0 && y <= 0) {//header 还有下滑的空间
[self.headerView mas_remakeConstraints:^(MASConstraintMaker *make) {
make.left.right.mas_equalTo(0);
make.top.mas_equalTo(MIN(myscrollView.headerOffset+translation-myscrollView.beginDragingY, 0));
make.height.mas_equalTo(115);
}];
[scrollView setContentOffset:CGPointMake(0, 0) animated:NO];
}
}
}
- (void)myteamscrollViewDidEndDragging:(UIScrollView *)scrollView beginDraggingY:(CGFloat)draggingY{
//拖动结束后，根据header的位置给出位移动画
MYTableView *myscrollView;
if ([scrollView isKindOfClass:[MYTableView class]]) {
myscrollView = (MYTableView *)scrollView;
}
if (!myscrollView) {
return;
}
myscrollView.lastTranslationInView = 0;
myscrollView.userInteractionEnabled = NO;
CGFloat headerMaxY = CGRectGetMaxY(self.headerView.frame);
[self.view setNeedsUpdateConstraints];
if (headerMaxY >= 57.5) {
//向下弹回
[self.headerView mas_remakeConstraints:^(MASConstraintMaker *make) {
make.left.right.mas_equalTo(0);
make.height.mas_equalTo(115);
make.top.mas_equalTo(0);
}];
}else {
//向上收起
[self.headerView mas_remakeConstraints:^(MASConstraintMaker *make) {
make.left.right.mas_equalTo(0);
make.height.mas_equalTo(115);
make.top.mas_equalTo(-115);
}];
}
//给约束添加动画
[UIView animateWithDuration:0.3 animations:^{
[self.view layoutIfNeeded];
} completion:^(BOOL finished) {
myscrollView.userInteractionEnabled = YES;
}];
}
在UITableview中调用上述方法
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
if (self.delegate) {
[self.delegate myteamscrollViewWillBeginDragging:scrollView beginDraggingY:beginDragingY];
}
}
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
if (self.delegate&&!scrollView.isDragging) {
[self.delegate myteamscrollViewDidEndDragging:scrollView beginDraggingY:beginDragingY];
return;
}
if (self.delegate) {
[self.delegate myteamScrollViewDidScroll:scrollView beginDraggingY:beginDragingY];
return;
}
}
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
if (self.delegate) {
[self.delegate myteamscrollViewDidEndDragging:scrollView beginDraggingY:beginDragingY];
}
}
demo地址
https://github.com/nikolamht/NestScroll