仿淘宝之前版本的一个交互,现在看不到了,
描述下.页面主体是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] ;
}
