首先貼上MJ在GitHub上的源碼和說明 MJRefresh源碼和說明地址 其實看過作者自己寫的說明之后差不多都能拿來自己用了坪它。這里我主要是說一下基于MJRefresh自定義的刷新視圖。
-
可以先下載作者的demo看一下熊榛,打開之后如下圖的目錄結構:MJDIYHeader.png
這個DIY文件夾里面就是作者給的自定義刷新視圖的實例坡倔。
-
現在我DIY一個自己的下拉和上拉刷新視圖。話不多說直接上代碼:我的示例自定義刷新視圖下載地址
自定義一個類繼承自MJRefreshHeader,這里我定義的類名位XSHeaderRefresh剿涮。
我的運行效果圖:
XSRefresh.gif XSHeaderRefresh.h
#import "MJRefreshHeader.h"
@interface XSHeaderRefresh : MJRefreshHeader
@end
- XSHeaderRefresh.m(下面代碼全部為.m文件內容)
1)自定義視圖用到哪些UI元素在這里聲明
#import "XSHeaderRefresh.h"
@interface XSHeaderRefresh()
@property(weak, nonatomic) UIView * headerFreshView;
@property(weak, nonatomic)UILabel * label;
@property(nonatomic, strong)UIImageView * imageView;
@end```
2)這里做控件的初始化配置
@implementation XSHeaderRefresh
- (void)prepare {
[super prepare];
// 設置控件的高度
self.mj_h = 75;
UIView * view = [[UIView alloc] init];
[self addSubview:view];
self.headerFreshView = view;
UILabel *label = [[UILabel alloc] init];
label.textColor = [UIColor colorWithRed:1.0 green:0.5 blue:0.0 alpha:1.0];
label.font = [UIFont boldSystemFontOfSize:12];
label.textAlignment = NSTextAlignmentCenter;
label.backgroundColor = [UIColor clearColor];
[self.headerFreshView addSubview:label];
self.label = label;
UIImageView * imageView = [[UIImageView alloc] init];
imageView.image = [UIImage imageNamed:@"arrow"];
[self.headerFreshView addSubview:imageView];
self.imageView = imageView;
}
3)設置子控件的位置和尺寸
- (void)placeSubviews
{
[super placeSubviews];
self.headerFreshView.bounds = CGRectMake(0, 0, 110, 20);
self.headerFreshView.center = CGPointMake(self.mj_w*0.5, self.mj_h-20);
self.label.frame = CGRectMake(30, 0, 80, 20);
self.imageView.frame = CGRectMake(10, 5, 10, 10);
}
4)重寫父類方法
#pragma mark 監(jiān)聽scrollView的contentOffset改變
- (void)scrollViewContentOffsetDidChange:(NSDictionary *)change
{
[super scrollViewContentOffsetDidChange:change];
}
#pragma mark 監(jiān)聽scrollView的contentSize改變
- (void)scrollViewContentSizeDidChange:(NSDictionary *)change
{
[super scrollViewContentSizeDidChange:change];
}
#pragma mark 監(jiān)聽scrollView的拖拽狀態(tài)改變
- (void)scrollViewPanStateDidChange:(NSDictionary *)change
{
[super scrollViewPanStateDidChange:change];
}
#pragma mark 監(jiān)聽控件的刷新狀態(tài)
- (void)setState:(MJRefreshState)state
{
MJRefreshCheckState;
switch (state) {
case MJRefreshStateIdle:
self.label.text = @"下拉刷新";
[self endAnimation];
break;
case MJRefreshStatePulling:
self.label.text = @"松開加載更多";
[self endAnimation];
break;
case MJRefreshStateRefreshing:
self.label.text = @"加載中...";
[self startAnimation];
break;
default:
break;
}
}
#pragma mark 監(jiān)聽拖拽比例(控件被拖出來的比例)
- (void)setPullingPercent:(CGFloat)pullingPercent
{
[super setPullingPercent:pullingPercent];
self.label.textColor = [UIColor blackColor];
}
5)圖片旋轉(自定義)
-(void)startAnimation
{
CABasicAnimation *basicAni= [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
basicAni.duration = 1;
basicAni.repeatCount = MAXFLOAT;
// basicAni.repeatDuration = 3;
basicAni.toValue = @(M_PI * 2);
[self.imageView.layer addAnimation:basicAni forKey:nil];
}
- (void)endAnimation
{
[self.imageView.layer removeAllAnimations];
}
- 調用類的示例
1)
__unsafe_unretained UITableView *tableView = self.tableView;
// 下拉刷新
tableView.mj_header= [XSHeaderRefresh headerWithRefreshingBlock:^{
// 模擬延遲加載數據照弥,因此2秒后才調用(真實開發(fā)中腻异,可以移除這段gcd代碼)
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
// 結束刷新
[tableView.mj_header endRefreshing];
});
}];
2)也可以這樣
self.productListTabView.mj_header = [XSHeaderRefresh headerWithRefreshingTarget:self refreshingAction:@selector(refresh)];
self.productListTabView.mj_footer = [XSFooterRefresh footerWithRefreshingTarget:self refreshingAction:@selector(loadMore)];
其中refresh
和loadMore
是你刷新和加載的方法
上拉加載代碼中也有示例就不多做描述了。