運行效果
之前做過一個UITableView對應一個頭部，并且有推拉或者視差效果湖蜕。但這次不一樣，是多個UITableView對應同一個頭部，并且也需要推拉效果评也。開始不以為意炼杖，做著做著才發(fā)現(xiàn)比較有難度坤邪。難在同一個頭部被多個UITableView的contentOffset影響，會在切換頁面的時候contentOffset.Y產(chǎn)生沖突罚缕。
頭部的推拉效果
仔細觀察效果，可以簡單的概括為：
- 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在滾動的時候調(diào)用下列方法
- (void)myteamscrollViewWillBeginDragging:(UIScrollView *)scrollView beginDraggingY:(CGFloat)draggingY {
MYTableView *myscrollView;//其他類型的UIscrollView也會調(diào)用，所以先判斷下是不是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) {//調(diào)整速度,因為手指松開后速度會變?yōu)?
myscrollView.velocity = velocity;
}
//判斷方向是否發(fā)生改變 方向改變就等價于剛開始drag只不過方向相反 所以相關的參數(shù)重置 減去之前方向上滑動的距離
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{
//拖動結束后，根據(jù)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中調(diào)用上述方法
- (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];
}
}
