iOS中的下拉刷新SVPullToRefresh

下拉刷新是一种利用手势刷新用户界面的功能,虽然已经被Twitter申请为专利,但依然不能阻止广大的App开发者在自己的应用中加入该功能。苹果公司甚至在iOS6的sdk中加入了UIRefreshControl,从而实现了系统级的下拉刷新。但是UIRefreshControl是绑定在UITableViewController上的,所以灵活性不高。

如果在网上搜下拉刷新的实现,讨论最多的恐怕是EGOTableViewPullRefresh了,这是一个比较有历史的开源库了,github上最近一次提交都是两年前的事情了。EGOTableViewPullRefresh虽然很好的实现了下拉刷新功能,但是一些OC的新特性比如arc、block没有得到支持,导致加个下拉刷新要写不少代码。

于是乎EGOTableViewPullRefresh的替代者出来了,就是SVPullToRefresh。支持arc,支持block,而且简洁到只需一行就能实现下拉刷新和上拉加载。

SVPullToRefresh的下拉刷新用法相当简单:

1、将下拉刷新控件放在顶部

[tableView addPullToRefreshWithActionHandler:^{
    // prepend data to dataSource, insert cells at top of table view
    // call [tableView.pullToRefreshView stopAnimating] when done
}];

2、将下拉刷新控件放在底部

[tableView addPullToRefreshWithActionHandler:^{
    // prepend data to dataSource, insert cells at top of table view
    // call [tableView.pullToRefreshView stopAnimating] when done
} position:SVPullToRefreshPositionBottom];

3、程序自动调用下拉刷新

[tableView triggerPullToRefresh];

4、临时性禁用下拉刷新

tableView.showsPullToRefresh = NO;
SVPullToRefresh的UI支持自定义

下拉刷新对应的view名叫pullToRefreshView,有如下属性和方法修改它的显示。

@property (nonatomic, strong) UIColor *arrowColor;
@property (nonatomic, strong) UIColor *textColor;
@property (nonatomic, readwrite) UIActivityIndicatorViewStyle activityIndicatorViewStyle;

- (void)setTitle:(NSString *)title forState:(SVPullToRefreshState)state;
- (void)setSubtitle:(NSString *)subtitle forState:(SVPullToRefreshState)state;
- (void)setCustomView:(UIView *)view forState:(SVPullToRefreshState)state;
简单用法,比如下面一行代码就修改了下拉箭头的颜色。

tableView.pullToRefreshView.arrowColor = [UIColor whiteColor];

上面介绍了下拉刷新的基本用法,下拉加载的用法也差不多,就不再介绍了,可以参考官方资料https://github.com/samvermette/SVPullToRefresh

-------------------------------------------------------------------------------------------------------------------------------------------------------

下面探讨一下SVPullToRefresh背后的原理,SVPullToRefresh能把接口设计的如此简单,肯定有一些过人之处,我们以后在设计控件的时候或许也能从中得到一些启发。

SVPullToRefresh的库其实也就两个类,分别对应下拉刷新和上拉加载,因为两者原理差不多,所以只需要看下拉刷新的实现即可。

@interface UIScrollView (SVPullToRefresh)

typedef NS_ENUM(NSUInteger, SVPullToRefreshPosition) {
    SVPullToRefreshPositionTop = 0,
    SVPullToRefreshPositionBottom,
};

- (void)addPullToRefreshWithActionHandler:(void (^)(void))actionHandler;
- (void)addPullToRefreshWithActionHandler:(void (^)(void))actionHandler position:(SVPullToRefreshPosition)position;
- (void)triggerPullToRefresh;

@property (nonatomic, strong, readonly) SVPullToRefreshView *pullToRefreshView;
@property (nonatomic, assign) BOOL showsPullToRefresh;

@end

@interface SVPullToRefreshView : UIView

@property (nonatomic, strong) UIColor *arrowColor;
@property (nonatomic, strong) UIColor *textColor;
@property (nonatomic, strong, readonly) UILabel *titleLabel;
@property (nonatomic, strong, readonly) UILabel *subtitleLabel;
@property (nonatomic, strong, readwrite) UIColor *activityIndicatorViewColor NS_AVAILABLE_IOS(5_0);
@property (nonatomic, readwrite) UIActivityIndicatorViewStyle activityIndicatorViewStyle;

@property (nonatomic, readonly) SVPullToRefreshState state;
@property (nonatomic, readonly) SVPullToRefreshPosition position;

- (void)setTitle:(NSString *)title forState:(SVPullToRefreshState)state;
- (void)setSubtitle:(NSString *)subtitle forState:(SVPullToRefreshState)state;
- (void)setCustomView:(UIView *)view forState:(SVPullToRefreshState)state;

- (void)startAnimating;
- (void)stopAnimating;

// deprecated; use setSubtitle:forState: instead
@property (nonatomic, strong, readonly) UILabel *dateLabel DEPRECATED_ATTRIBUTE;
@property (nonatomic, strong) NSDate *lastUpdatedDate DEPRECATED_ATTRIBUTE;
@property (nonatomic, strong) NSDateFormatter *dateFormatter DEPRECATED_ATTRIBUTE;

// deprecated; use [self.scrollView triggerPullToRefresh] instead
- (void)triggerRefresh DEPRECATED_ATTRIBUTE;

@end

SVPullToRefresh的实现用到了很多OC Runtime的特性。以前在用EGOTableViewPullRefresh时,我们需要

为当前的ViewController增加EGORefreshTableHeaderView的成员,还要实现相应protocol,这样ViewController就会显得臃肿。而SVPullToRefresh通过增加UIScrollView的Category,给需要下拉的scrollview增加了pullToRefreshView的属性,使用者不需要显式的创建它,与pullToRefreshView状态相关的逻辑也不用关心,只需要提供一个actionHandler来完成刷新结束后的一些操作。

但是category声明的property并不会自动@synthesize,所以需要手动实现getter和setter方法。通过runtime.h中objc_getAssociatedObject / objc_setAssociatedObject来访问和生成关联对象,从而模拟生成属性。如果要在不修改现有类的情况下增加属性,这是一个很好的办法。

- (void)setPullToRefreshView:(SVPullToRefreshView *)pullToRefreshView {
    [self willChangeValueForKey:@"SVPullToRefreshView"];
    objc_setAssociatedObject(self, &UIScrollViewPullToRefreshView,
                             pullToRefreshView,
                             OBJC_ASSOCIATION_ASSIGN);
    [self didChangeValueForKey:@"SVPullToRefreshView"];
}

- (SVPullToRefreshView *)pullToRefreshView {
    return objc_getAssociatedObject(self, &UIScrollViewPullToRefreshView);
}

除了动态增加属性,SVPullToRefresh还用到了KVO来观察自身属性的变化从而进行相应的UI调整(用EGOTableViewPullRefresh的话这些代码都由调用方实现,如

UIScrollViewDelegate

)。UIScrollView在滑动时contentOffset,contentSize,frame都是需要监测的对象。

- (void)setShowsPullToRefresh:(BOOL)showsPullToRefresh {
    self.pullToRefreshView.hidden = !showsPullToRefresh;
    
    if(!showsPullToRefresh) {
        if (self.pullToRefreshView.isObserving) {
            [self removeObserver:self.pullToRefreshView forKeyPath:@"contentOffset"];
            [self removeObserver:self.pullToRefreshView forKeyPath:@"contentSize"];
            [self removeObserver:self.pullToRefreshView forKeyPath:@"frame"];
            [self.pullToRefreshView resetScrollViewContentInset];
            self.pullToRefreshView.isObserving = NO;
        }
    }
    else {
        if (!self.pullToRefreshView.isObserving) {
            [self addObserver:self.pullToRefreshView forKeyPath:@"contentOffset" options:NSKeyValueObservingOptionNew context:nil];
            [self addObserver:self.pullToRefreshView forKeyPath:@"contentSize" options:NSKeyValueObservingOptionNew context:nil];
            [self addObserver:self.pullToRefreshView forKeyPath:@"frame" options:NSKeyValueObservingOptionNew context:nil];
            self.pullToRefreshView.isObserving = YES;
            
            CGFloat yOrigin = 0;
            switch (self.pullToRefreshView.position) {
                case SVPullToRefreshPositionTop:
                    yOrigin = -SVPullToRefreshViewHeight;
                    break;
                case SVPullToRefreshPositionBottom:
                    yOrigin = self.contentSize.height;
                    break;
            }
            
            self.pullToRefreshView.frame = CGRectMake(0, yOrigin, self.bounds.size.width, SVPullToRefreshViewHeight);
        }
    }
}


- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context {
    if([keyPath isEqualToString:@"contentOffset"])
        [self scrollViewDidScroll:[[change valueForKey:NSKeyValueChangeNewKey] CGPointValue]];
    else if([keyPath isEqualToString:@"contentSize"]) {
        [self layoutSubviews];
        
        CGFloat yOrigin;
        switch (self.position) {
            case SVPullToRefreshPositionTop:
                yOrigin = -SVPullToRefreshViewHeight;
                break;
            case SVPullToRefreshPositionBottom:
                yOrigin = MAX(self.scrollView.contentSize.height, self.scrollView.bounds.size.height);
                break;
        }
        self.frame = CGRectMake(0, yOrigin, self.bounds.size.width, SVPullToRefreshViewHeight);
    }
    else if([keyPath isEqualToString:@"frame"])
        [self layoutSubviews];

}

总结:SVPullToRefresh把所有的逻辑都由自身实现,对外只提供一个Block接口,方便调用者。原理上和EGOTableViewPullRefresh差不多,但通过Runtime特性和KVO的运用,把原来客户端实现的逻辑放到了自身来实现,最终呈现一个简单的接口。





你可能感兴趣的:(开源库)