前言：之前在实现下拉刷新，上拉加载功能时，我一直都是使用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;});}
复制代码