custom pulling refresh header View
- 此篇目的是讓大家都可以學會下拉刷新控件的實現，然后輕松自定義自己的下拉刷新控件。
以后菊花啊，文字啊，都可以玩轉了.
- 坐穩咯，開車了！
- 首先，要初始化一個頭部視圖和一個tableview
-(void)setupUI {
self.tableView = [[UITableView alloc] initWithFrame:self.view.bounds style:UITableViewStyleGrouped];
self.tableView.delegate = self;
self.tableView.dataSource = self;
[self.view addSubview:self.tableView];
if (self.refreshHeaderView == nil) {
//稍后介紹這個自定義頭部視圖，繼承的是一個view
Fg_RefreshHeaderView *view = [[Fg_RefreshHeaderView alloc] initWithFrame:CGRectMake(0.0f, 0.0f - self.tableView.bounds.size.height, self.view.frame.size.width, self.tableView.bounds.size.height)];
// 不太理解，添加tableviewHeaderView會頂上去，使用clipsToBounds也切不掉，打印tableview的frame 也沒有變大。大神解釋一下呀 -。-
[self.tableView addSubview:view];
self.refreshHeaderView = view;
}
}
- 然后實現tableview 的數據源方法，有個視圖效果就好，就不粘代碼了。
- 然后是代理方法，直接由refreshHeaderView 頭部view接管。
#pragma mark - UIScrollViewDelegate Methods
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
[self.refreshHeaderView fgRefreshScrollViewDidScroll:scrollView];
}
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{
[self.refreshHeaderView fgRefreshScrollViewDidEndDragging:scrollView];
}
- 以上是控制器里的所有代碼了，下面是Fg_RefreshHeaderView 自定義頭部視圖的代碼了。
//下拉常見的3種狀態
typedef enum{
FGPullRefreshPulling = 0,
FGPullRefreshNormal,
FGPullRefreshLoading,
} FGPullRefreshState;
//兩個接管tableview 的代理方法的接口
@interface Fg_RefreshHeaderView : UIView
- (void)fgRefreshScrollViewDidScroll:(UIScrollView *)scrollView;
- (void)fgRefreshScrollViewDidEndDragging:(UIScrollView *)scrollView ;
@end
- 需要達到視覺效果的屬性，并初始化。
#define TEXT_COLOR [UIColor colorWithRed:87.0/255.0 green:108.0/255.0 blue:137.0/255.0 alpha:1.0]
@interface Fg_RefreshHeaderView ()
//動態顯示當前下拉狀態label
@property(strong,nonatomic)UILabel *statusLabel;
//顯示加載狀態指示器
@property(strong,nonatomic)UIActivityIndicatorView * activityView;
//記錄當前狀態
@property(assign,nonatomic)FGPullRefreshState state;
@end
@implementation Fg_RefreshHeaderView
-(instancetype)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
//這一塊就是你的下拉刷新視圖初始化。
if (self) {
self.autoresizingMask = UIViewAutoresizingFlexibleWidth;
self.backgroundColor = [UIColor colorWithRed:226.0/255.0 green:231.0/255.0 blue:237.0/255.0 alpha:1.0];
UILabel * label = [[UILabel alloc] init];
label = [[UILabel alloc] initWithFrame:CGRectMake(0.0f, frame.size.height - 48.0f, self.frame.size.width, 20.0f)];
label.autoresizingMask = UIViewAutoresizingFlexibleWidth;
label.font = [UIFont boldSystemFontOfSize:13.0f];
label.textColor = TEXT_COLOR;
label.shadowColor = [UIColor colorWithWhite:0.9f alpha:1.0f];
label.shadowOffset = CGSizeMake(0.0f, 1.0f);
label.backgroundColor = [UIColor clearColor];
label.textAlignment = NSTextAlignmentCenter;
[self addSubview:label];
_statusLabel=label;
UIActivityIndicatorView *view = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];
view.frame = CGRectMake(25.0f, frame.size.height - 48.0f, 20.0f, 20.0f);
[self addSubview:view];
_activityView = view;
}
[self setState:FGPullRefreshNormal];
return self;
}
- 切換狀態的方法，直接重寫state 的setter方法，來使狀態顯示與狀態綁定，實時顯示。
- (void)setState:(FGPullRefreshState)aState{
switch (aState) {
case FGPullRefreshPulling:
_statusLabel.text = @"Release to refresh...";
break;
case FGPullRefreshNormal:
_statusLabel.text = @"Pull down to refresh...";
if ([_activityView isAnimating]) {
[_activityView stopAnimating];
}
break;
case FGPullRefreshLoading:
_statusLabel.text = @"Loading...";
[_activityView startAnimating];
break;
default:
break;
}
_state = aState;
}
- 接下來就是核心部分了，即如何接管tableview 的代理方法了
#pragma mark - ScrollView Methods
- (void)fgRefreshScrollViewDidScroll:(UIScrollView *)scrollView {
if (_state == FGPullRefreshLoading) {
//用戶滑動時，不要去修改contentInset ，會抖動。之前按自己的理解就是在偏移達到 -65.0f 時（用戶此時還在拖動tableview）就改動contentInset，一直卡在這部分，實現不了下拉刷新控件，悲劇。
return;
}
//這里可以隨著y 的變化給動畫
if (_state == FGPullRefreshPulling && scrollView.contentOffset.y > -65.0f && scrollView.contentOffset.y < 0.0f) {
[self setState:FGPullRefreshNormal];
} else if (_state == FGPullRefreshNormal && scrollView.contentOffset.y < -65.0f ) {
[self setState:FGPullRefreshPulling];
}
}
- (void)fgRefreshScrollViewDidEndDragging:(UIScrollView *)scrollView {
if (scrollView.contentOffset.y <= - 65.0f) {
//這里是模擬加載數據，然后回調。應用時，應該發消息（怎么發自己決定，block，代理，通知...），通知外面更新數據，更新數據然后回調通知 gcd 里面這個方法，停止刷新即可。
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(3 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
[self fgRefreshScrollViewDataSourceDidFinishedLoading:scrollView];
});
[self setState:FGPullRefreshLoading];
//這個動畫去掉也沒關系
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.2];
//這句就是懸停在tableview 上面的關鍵，記得在用戶停止拖動代理方法中修改
scrollView.contentInset = UIEdgeInsetsMake(60.0f, 0.0f, 0.0f, 0.0f);
[UIView commitAnimations];
}
}
- (void)fgRefreshScrollViewDataSourceDidFinishedLoading:(UIScrollView *)scrollView {
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:.3];
[scrollView setContentInset:UIEdgeInsetsMake(0.0f, 0.0f, 0.0f, 0.0f)];
[UIView commitAnimations];
[self setState:FGPullRefreshNormal];
}
- 關鍵點以注釋的形式，在代碼中。自己之前實現過，有點不順，就放棄啦（主要是有現成的框架，且只是易用，不易學），后來發現其實，就差一點點，思路其實蠻簡單的。
- 相信大家看完后都可以實現自己的下拉刷新控件，在state的setter方法下，定義每個狀態的顯示，可以簡單清爽，也可以是動畫，看自己喜歡了。還可以監聽拖動過程中偏移量的變化，來個聯動動畫。
- 我是學習了大神的demo，發現soeasy，這是他的鏈接:demo
[不過這個demo，不能執行了，版本太久遠，需要自己修改一下就行了] - 本篇的代碼demo：俺的demo
- Emil:zhanggaoyi92@163.com 歡迎交流！
