前言：之前在实现下拉刷新，上拉加载功能时，我一直都是使用MJRefresh进行集成。一直想自己写一个类似于MJRefresh的刷新控件，方便与自己对MJRefresh原理的理解，昨天抽出了时间自己写了一个类似的刷新控件，在这做一下记录与分享。
Github： 看这里
思路整理与代码实现：
1. 通过上/下拉页面显示刷新提示文字我们可以判断出，刷新提示文字的显示与否是根据当前scrollView的偏移值来确定的。在这里我们的一切动态显示和用户交互跟当前scrollView的偏移值存在着联系。所以我们给MyRefreshView提供一个类方法的接口，将scrollView传进去：
+ (MyRefreshView *)refreshViewWithScrollView:(UIScrollView *)scrollView{
MyRefreshView *refreshView = [[MyRefreshView alloc]init];
refreshView.frame = CGRectMake(20, -25, KScreenWidth-20, 18);
refreshView.scrollView = scrollView;
[refreshView setupView];
return refreshView;
}
2. 添加控件，这里我们需要一个提示文本，一个显示偏移进度的圆形进度条，一个刷新时的loading等待圈：
@interface MyRefreshView ()
/**
刷新状态值
*/
@property (nonatomic, assign) NSInteger refreshFlag;
/**
刷新菊花圈
*/
@property (nonatomic, strong) UIActivityIndicatorView *activityIndicatorView;
/**
偏移动画
*/
@property (nonatomic, strong) CAShapeLayer *scheduleLayer;
/**
监听视图
*/
@property (nonatomic, strong) UIScrollView *scrollView;
/**
刷新文字
*/
@property (nonatomic, strong) UILabel *titleLabel;
@end
3. 在setupView方法中构建视图，将refreshView添加到当前的scrollView上。并用KVO将refreshView添加为scrollView的观察者，实时监听scrollView的偏移值
刷新提示文字：在refreshView上加上一个Label；
圆形进度条：这里我们用CAShapeLayer实现。CAShapeLayer有strokeStart和strokeEnd属性，在绘图时，这两个属性可以改变path的起始位置和结束位置。设置strokeStart和strokeEnd初始值都为0，然后根据scrollView的偏移值来改变strokeEnd的值，从而达到改变进度的目的；
loading视图：这里用系统自由的菊花圈UIActivityIndicatorView，实际操作中也可以设置gif动画或者CAAnimation来实现；
refreshFlag：刷新状态值（根据偏移值判断当前是否处于可刷新状态）；
- (void)setupView{
self.titleLabel = [[UILabel alloc]initWithFrame:CGRectMake(25, 0, KScreenWidth-20-25, 18)];
[self.titleLabel setAdjustsFontSizeToFitWidth:YES];
[self addSubview:self.titleLabel];
self.scheduleLayer = [[CAShapeLayer alloc]init];
self.scheduleLayer.frame = CGRectMake(0, 0, 18, 18);
self.scheduleLayer.strokeStart = 0;
self.scheduleLayer.fillColor = [UIColor clearColor].CGColor;
self.scheduleLayer.strokeColor = [UIColor whiteColor].CGColor;
self.scheduleLayer.backgroundColor = [UIColor clearColor].CGColor;
self.scheduleLayer.lineWidth = 2.0;
self.scheduleLayer.strokeEnd = 0.0;
[self.scheduleLayer setTransform:CATransform3DMakeRotation(-M_PI_2, 0, 0, 1)];
self.scheduleLayer.path = [UIBezierPath bezierPathWithOvalInRect:CGRectInset(CGRectMake(0, 0, 18, 18), 2, 2)].CGPath;
[self.layer addSublayer:self.scheduleLayer];
self.activityIndicatorView = [[UIActivityIndicatorView alloc]initWithFrame:CGRectMake(0, 0, 18, 18)];
[self addSubview:self.activityIndicatorView];
[self.scrollView addSubview:self];
[self.scrollView addObserver:self forKeyPath:@"contentOffset" options:NSKeyValueObservingOptionOld|NSKeyValueObservingOptionNew context:nil];
}
4. 动态监听
在observeValueForKeyPath方法中获取到当前的偏移值，并进行相关的逻辑判断
这里我们设置的刷新临界点为-80；而strokeStar和strokeEnd的取值范围为0-1之间。当scrollView被拖拽时，显示refreshView，根据偏移值动态改变相关属性的值。
结束拖拽时，根据当前的偏移值判断refreshView是否进入刷新状态。
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary*)change context:(void *)context{
if (self.refreshing) {
return;
}
if ([keyPath isEqualToString:@"contentOffset"]) {
CGFloat height = [change[@"new"] CGPointValue].y;
if (height > 0) {
height = 0;
}else if (height > -80){
height = height/-80.0;
}else{
height = 1.0;
}
if (self.scrollView.isDragging) {
self.hidden = NO;
if (height == 1.0) {
self.title = @"释放刷新";
}else{
self.title = @"下拉刷新";
}
[self.activityIndicatorView stopAnimating];
self.scheduleLayer.strokeEnd = height;
self.scheduleLayer.hidden = NO;
self.refreshFlag = height;
}else{
if (self.refreshFlag == 1.0){
self.refreshing = YES;
[self.scrollView setContentOffset:CGPointMake(0, -80) animated:YES];
[self.activityIndicatorView startAnimating];
self.title = @"正在刷新";
self.scheduleLayer.hidden = YES;
self.scheduleLayer.strokeEnd = 0;
}else{
[self.activityIndicatorView stopAnimating];
self.scheduleLayer.hidden = NO;
self.scheduleLayer.strokeEnd = height;
}
}
}
}
在title的set方法中改变当前的刷新文字
- (void)setTitle:(NSString *)title{
_title = title;
self.titleLabel.text = title;
}
5. 数据请求成功后，设置结束刷新接口，结束刷新动画,并改变刷新状态，将scrollView的偏移值设置为最初状态
- (void)endRefresh{
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)1.0*NSEC_PER_SEC), dispatch_get_main_queue(), ^{
self.refreshing = NO;
self.refreshFlag = 0;
self.scheduleLayer.strokeEnd = 0;
[self.activityIndicatorView stopAnimating];
[self.scrollView setContentOffset:CGPointMake(0, 0) animated:YES];
self.hidden = YES;
});
}
