两种方法实现"轻重下拉"交互

仿淘宝之前版本的一个交互,现在看不到了,
描述下.页面主体是tableview上面有个下拉刷新控件.小范围滑动时触发下拉刷新. 大范围滑动时"切换到一个新的界面".
如何去实现一个交互动作. 我用了两种方案.

方案1

XTDraggableTable

原理介绍

利用上下两个tableView切换实现.分为主table和上table.分别有下拉刷新

1.gif
特性介绍

1)XTDraggableTableMainDelegate,XTDraggableTableAboveDelegate
灵活的协议接口. 按需求使用.
2)轻便的封装.初始化一行搞定. 可以都放在一个controller. 也可分离在不同的controller或其他对象.
3)无需再处理scrollViewDelegate
4)可调整的大范围拖拽的高度.

调用方式
- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    [self.navigationController setNavigationBarHidden:YES animated:NO] ;
    self.edgesForExtendedLayout = UIRectEdgeNone ;
    
    self.draggableTable = ({
        XTDraggableTable *view = [XTDraggableTable new] ;
        [view setup:self] ;
        view ;
    }) ;
    
}

#pragma mark - XTDraggableTableDelegate
- (void)main_pullup:(MJRefreshHeader *)header
{
    NSLog(@"请求 main") ;
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2ull * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        
        // 模拟请求结束 .
        [header endRefreshing] ;
    });
}

- (void)mainDisplayComplete
{
    NSLog(@"mainDisplayComplete") ;
}

- (void)above_pullup:(MJRefreshHeader *)header
{
    NSLog(@"请求 above") ;
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2ull * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        
        // 模拟请求结束 .
        [header endRefreshing] ;
    });
}

- (void)aboveDisplayComplete
{
    NSLog(@"aboveDisplayComplete") ;
}


#pragma mark - UIScrollViewDelegate

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    [self.draggableTable manageScrollViewDidScroll:scrollView] ;
}

- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset
{
    [self.draggableTable manageScrollViewWillEndDragging:scrollView withVelocity:velocity targetContentOffset:targetContentOffset] ;
}

.h文件


@protocol XTDraggableTableMainDelegate <NSObject>
@required
- (void)main_pullup:(MJRefreshHeader *)header ; // [header endrefresh] when request complete or fail .
@optional
- (void)mainDisplayComplete ;
@end

@protocol XTDraggableTableAboveDelegate <NSObject>
@required
- (void)above_pullup:(MJRefreshHeader *)header ; // [header endrefresh] when request complete or fail .
@optional
- (void)aboveDisplayComplete ;
@end


@interface XTDraggableTable : UIView
@property (nonatomic,weak) id <XTDraggableTableMainDelegate>    mainDelegate    ;
@property (nonatomic,weak) id <XTDraggableTableAboveDelegate>   aboveDelegate   ;
@property (nonatomic,strong,readonly) UITableView *mainTable     ;
@property (nonatomic,strong,readonly) UITableView *aboveTable    ;
@property (nonatomic,assign) float mainDragHeight   ;
@property (nonatomic,assign) float aboveDragHeight  ;
// setup
- (void)setup:(id)handler ; // ctrller,mainHandler,aboveHandler
- (void)setupWithController:(UIViewController *)ctrller
mainHandler:(id)mainHandler
aboveHandler:(id)aboveHandler ;
// scrollViewDelegate
- (void)manageScrollViewDidScroll:(UIScrollView *)scrollView                    ;
- (void)manageScrollViewWillEndDragging:(UIScrollView *)scrollView
withVelocity:(CGPoint)velocity
targetContentOffset:(inout CGPoint *)targetContentOffset    ;
// reload table
- (void)reloadMain  ;
- (void)reloadAbove ;
@end

方案2

原理介绍

利用原生tableView的insertCell动作插入一个cell.将新的页面绘制在这个cell上.并且自定义绘制一个MJRefreshHeader.
插入之前可将新的cell的部分绘制到header里. 造成一种视差的效果.插入之后重新绘制这个diy的header. 在此我用的MJRefresh是个高度封装又有灵活性的第三方的下拉刷新控件.相信大家已经熟知.

2.gif

api


@class MJRefreshHeader ;

@protocol XTDragInsertCellViewDelegate <NSObject>
- (void)pullup:(MJRefreshHeader *)header ;
@end

@interface XTDragInsertCellView : UIView
@property (nonatomic)       float                               heightReset ;
@property (nonatomic,weak)  id <XTDragInsertCellViewDelegate>   delegate    ;
@property (nonatomic,strong,readonly) UITableView               *table      ;

- (instancetype)initWithHandler:(id)handler
                    heightReset:(float)height ;

- (NSInteger)rowsInfirstSection ;

- (void)manageScrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset ;
- (void)manageScrollViewDidScroll:(UIScrollView *)scrollView ;
@end

调用方便,


- (void)viewDidLoad
{
    [super viewDidLoad];

    self.edgesForExtendedLayout = UIRectEdgeNone ;

    self.insertView = ({
        XTDragInsertCellView *view = [[XTDragInsertCellView alloc] initWithHandler:self heightReset:[Zam1Cell cellHeight]] ;
        [view.table registerNib:[UINib nibWithNibName:kIDZam1Cell bundle:nil] forCellReuseIdentifier:kIDZam1Cell] ;
        view ;
    }) ;
    
}


#pragma mark - XTDragInsertCellViewDelegate <NSObject>
- (void)pullup:(MJRefreshHeader *)header
{
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2ull * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        
        // 模拟请求结束 .
        [header endRefreshing] ;
    });
}



#pragma mark - UITableViewDataSource
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return 2 ;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    if (section == 0) {
        return [self.insertView rowsInfirstSection] ;
    }
    else if (section == 1) {
        return 20 ;
    }
    return 0 ;
}



- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    int section = (int)indexPath.section ;
    
    if (section == 0) {
        Zam1Cell *cell = [tableView dequeueReusableCellWithIdentifier:kIDZam1Cell forIndexPath:indexPath] ;
        return cell ;
    }
    else if (section == 1) {
        UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:kIDCell] ;
        if (!cell) {
            cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:kIDCell] ;
        }
        cell.textLabel.text = [NSString stringWithFormat:@"row %d",(int)indexPath.row] ;
        return cell ;
    }
    
    return nil ;
}

#pragma mark - UITableViewDelegate
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    int section = (int)indexPath.section ;
    
    if (section == 0) {
        return [Zam1Cell cellHeight] ;
    }
    else if (section == 1) {
        return 44. ;
    }
    return 0 ;
}




#pragma mark - UIScrollViewDelegate
- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset
{
    [self.insertView manageScrollViewWillEndDragging:scrollView withVelocity:velocity targetContentOffset:targetContentOffset] ;
}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    [self.insertView manageScrollViewDidScroll:scrollView] ;
}

两个方案见demo
https://github.com/Akateason/XTDragableTable/

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

推荐阅读更多精彩内容

  • 优秀第三方
    发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,259评论 4赞 61
  • 好媳妇
    勤劳媳妇金桂玉， 养猪种菜侍奉地。 三病一孩不放弃， 忙里忙外没人替。 铁人金桂玉，你侍奉大伯哥，侍奉丈夫和...
    旖旎i阅读 256评论 0赞 7
  • 七律-苦情吟
    雕杨龙女惹长嗟， 月不团圆玉有瑕。 沧海曾经浑浊水， 前尘分布忘情茶。 凤栖桐木鸦栖柳， 霞恋斜阳蝶恋花。 未许平...
    舒笙雨阅读 492评论 0赞 7
  • 在醒着的时候还赖床，那就是对生命的不尊重
    时间对于每个人来说，都很公平，该如何管理时间，利用时间，抓紧时间，全在于你自己如何分配自己的财富。始终相信：时间看...
    Jenny4think阅读 300评论 0赞 0
  • 七年
    上大学以后，总是聚少离多，但兄弟们的感情一直都在，每次相聚，我很珍惜，也越来越珍惜。 七年里，看着彼此长大，做彼此...
    星魁的实验室阅读 316评论 0赞 0