iOS开发 - 写一个刷新的控件（未封装，适合新手学习，查看原理）

最近项目中有一个自定义的刷新控件，以前用过很多第三方，所以这次决定自己写一个来用，先看下效果吧：

这个效果分解一下可以分为三步：
1.拉伸放大图片；
2.松手开始刷新，背景开始旋转；
3.刷新完毕，回到起始位置；

一步步带你来看这里怎么写：
1.拉伸放大图片：
图片大小一开始为0，随着拉伸图片大小开始放大，达到指定大小后不再改变；

/*
在scrollView的代理方法中这么写，往下拖拽偏移量小于0，按照偏移量控制图片放大，博主这里选择直接改变frame，你也可以选择用transform方法来写，提供这么一种思路。
*/
 if (tmpTableView.contentOffset.y > -100) {
                float width = fabs(tmpTableView.contentOffset.y);
                if (width > 46) {
                    width = 46;
                }
                _refreshImageView1.frame = CGRectMake(WIDTH / 2 - width / 2, 10, width / 46 * 46, width / 46 * 46);
                _refreshImageView2.frame = CGRectMake(WIDTH / 2 - width / 2, 10, width / 46 * 46, width / 46 * 46);
                _refereshLabel.text = @"下拉刷新";

            }
            else
            {
                _refreshImageView1.frame = CGRectMake(WIDTH / 2 - 46 / 2, 10, 46, 46);
                _refreshImageView2.frame = CGRectMake(WIDTH / 2 - 46 / 2, 10, 46, 46);
                if ([_refereshLabel.text isEqualToString:@"下拉刷新"]) {
                    _refereshLabel.text = @"松开刷新...";
                }
            }

按照上面来写还不够，要考虑到往上托送造成的影响，所以要加上一个限制，必须偏移量小于0才能触发：

    if (tmpTableView.contentOffset.y < 0) {

    }

2.松手开始刷新，背景开始旋转
松手后的动作也是通过scrollView的代理方法来捕捉的，

/*
当偏移量超过80的时候才开始刷新，这时候改变状态为刷新状态，底部背景图开始旋转，这个旋转动画是个问题，看下面
*/
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{

    if (tmpTableView.contentOffset.y < 0) {
        if (tmpTableView.contentOffset.y > -80) {
            return;
        }
        [self startAnimation];

        [UIView animateWithDuration:0.5 animations:^{
            tmpTableView.contentInset = UIEdgeInsetsMake(100, 0, 0, 0);
            //        tmpTableView.scrollEnabled = NO;
            tmpTableView.decelerationRate = 0.0;

        }];
        _refereshLabel.text = @"正在刷新...";
    }

}

旋转动画：

/*
这是一种比较好的写法，还有一种通过UIView来选择，在完成的block中自调用的方法，这里提供一种思路，供大家参考，有兴趣可以写下。下面的那个代理来解释下，这里是在动画执行结束后拿到回调的代理，看下面
*/
- (void)startAnimation{
    _rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
    //让其在z轴旋转
    _rotationAnimation.toValue = [NSNumber numberWithFloat: M_PI * 2.0 ];
    //旋转角度
    _rotationAnimation.duration = 1;
    //旋转周期
    _rotationAnimation.cumulative = YES;
    //旋转累加角度
    _rotationAnimation.repeatCount = 3;
    //旋转次数
    _rotationAnimation.delegate = self;
    [_refreshImageView1.layer addAnimation:_rotationAnimation forKey:@"rotationAnimation"];
}

3.刷新完毕，回到起始位置
在动画执行结束的代理中删除动画和相关视图，并回到起始位置：

- (void)animationDidStop:(CABasicAnimation *)anim finished:(BOOL)flag {
    //set the backgroundColor property to match animation toValue
    [_refreshImageView1.layer removeAllAnimations];
    [UIView animateWithDuration:0.5 animations:^{
        tmpTableView.contentInset = UIEdgeInsetsMake(0, 0, 0, 0);

    }completion:^(BOOL finished) {
        [_refreshImageView2 removeFromSuperview];
        [_refreshImageView1 removeFromSuperview];
        [_refereshLabel removeFromSuperview];
        _refreshImageView2 = nil;
        _refreshImageView1 = nil;
        _refereshLabel = nil;
    }];
}

以上还需要在scrollView的滚动代理中做一些限制，完整代码放这里：

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{

    if (tmpTableView.contentOffset.y < 0) {

        if (_refreshImageView1) {
            if (tmpTableView.contentOffset.y > -100) {
                float width = fabs(tmpTableView.contentOffset.y);
                if (width > 46) {
                    width = 46;
                }
                _refreshImageView1.frame = CGRectMake(WIDTH / 2 - width / 2, 10, width / 46 * 46, width / 46 * 46);
                _refreshImageView2.frame = CGRectMake(WIDTH / 2 - width / 2, 10, width / 46 * 46, width / 46 * 46);
                _refereshLabel.text = @"下拉刷新";

            }
            else
            {
                _refreshImageView1.frame = CGRectMake(WIDTH / 2 - 46 / 2, 10, 46, 46);
                _refreshImageView2.frame = CGRectMake(WIDTH / 2 - 46 / 2, 10, 46, 46);
                if ([_refereshLabel.text isEqualToString:@"下拉刷新"]) {
                    _refereshLabel.text = @"松开刷新...";
                }
            }
        }

        if (!_refreshImageView1) {
            _refreshImageView1 = [[UIImageView alloc]initWithFrame:CGRectMake(WIDTH / 2, 10, 0, 0)];
            _refreshImageView1.image = [UIImage imageNamed:@"icon_base"];
            [tmpTableView.backgroundView addSubview:_refreshImageView1];

            _refreshImageView2 = [[UIImageView alloc]initWithFrame:CGRectMake(WIDTH / 2, 10, 0, 0)];
            _refreshImageView2.image = [UIImage imageNamed:@"icon_top"];
            [tmpTableView.backgroundView addSubview:_refreshImageView2];

            _refereshLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, 56, WIDTH, 30)];
            _refereshLabel.text = @"下拉刷新";
            _refereshLabel.textColor = [UIColor grayColor];
            _refereshLabel.font = [UIFont systemFontOfSize:12];
            _refereshLabel.textAlignment = NSTextAlignmentCenter;
            [tmpTableView.backgroundView addSubview:_refereshLabel];
        }
    }
}

最后再补充一个知识点，因为向下拖动时偏移量为负，直接设置偏移量为负，是无法停留的，所以这里采用：

 tmpTableView.contentInset = UIEdgeInsetsMake(0, 0, 0, 0);

设置contentInset，分别是距离上左下右的距离，这样可以实现停留效果。

最后，放上Demo的下载地址，需要的自行下载。
点击下载