版本歷史
| 版本號 | 修改時間 |
|---|---|
| V1.0 | 2017.05.01 |
前言
在我們的app中加載數據，很多時候都需要進行上拉加載和下拉刷新，特別是像今日頭條這樣的門戶網站，每個頁面給用戶提供20條左右的數據，根據用戶的喜歡選擇是否刷新，才請求服務器給出分頁的數據。這里我們可以自定義上拉加載和下拉刷新，但是也可以采用第三方框架，我們這篇主要就是說的是應用較為廣泛的第三方框架MJRefresh，此篇為基礎入門篇，專門為那些剛入門同學的進行引導，下面主要的內容就是對MJRefresh進行概覽并給出一個最簡單的例子。下面就開始吧。開始之前先給出MJRefreh的github地址。
MJRefrsh-github地址
MJRefresh概覽
適用范圍
MJRefresh適用哪些控件的刷新呢？github官網上給出了四個，其實不難猜到就是主要的那幾個可以滾動的控件(UITextView除外)，主要就是四個：UIScrollView、 UITableView、UICollectionView、UIWebView。
API集成
主要的集成方式有兩種：
- 自動集成：通過cocoapods集成。
- 手動集成：通過github下載，手動拖動到項目中。
API結構
我們先看一下有哪些源文件。
API結構-1
API結構-2
這個家族的文件就目前的更新情況而言，已經全部在這里了。我們在看一下下面這個圖表。
API圖表
下面對這個圖標進行說明：
- 紅色的部分，可直接使用
- 下拉刷新 1）Normal: MJRefreshNormalHeader 2) Gif：MJRefreshGifHeader
- 上拉刷新：1）自動刷新 Normal：MJRefreshAutoNormalFooter 和 Gif：MJRefreshAutoGifFooter 2）自動回彈 Normal：MJRefreshBackNormalFooter 和 Gif：MJRefreshBackGifFooter。
- 其他顏色的部分不可以直接使用。
除了我們直接用，我們還可以DIY刷新，使用下面的。
DIY刷新
API中幾個重要的類
1. MJRefreshComponent.h
/** The Base Class of refresh control */
@interface MJRefreshComponent : UIView
#pragma mark - Control the state of Refresh
/** BeginRefreshing */
- (void)beginRefreshing;
/** EndRefreshing */
- (void)endRefreshing;
/** IsRefreshing */
- (BOOL)isRefreshing;
#pragma mark - Other
* According to the drag ratio to change alpha automatically
@property (assign, nonatomic, getter=isAutomaticallyChangeAlpha) BOOL automaticallyChangeAlpha;
@end
2. MJRefreshHeader.h
@interface MJRefreshHeader : MJRefreshComponent
/** Creat header */
+ (instancetype)headerWithRefreshingBlock:(MJRefreshComponentRefreshingBlock)refreshingBlock;
/** Creat header */
+ (instancetype)headerWithRefreshingTarget:(id)target refreshingAction:(SEL)action;
/** This key is used to storage the time that the last time of drown-down successfully */
@property (copy, nonatomic) NSString *lastUpdatedTimeKey;
/** The last time of drown-down successfully */
@property (strong, nonatomic, readonly) NSDate *lastUpdatedTime;
/** Ignored scrollView contentInset top */
@property (assign, nonatomic) CGFloat ignoredScrollViewContentInsetTop;
@end
3. MJRefreshFooter.h
@interface MJRefreshFooter : MJRefreshComponent
/** Creat footer */
+ (instancetype)footerWithRefreshingBlock:(MJRefreshComponentRefreshingBlock)refreshingBlock;
/** Creat footer */
+ (instancetype)footerWithRefreshingTarget:(id)target refreshingAction:(SEL)action;
/** NoticeNoMoreData */
- (void)noticeNoMoreData;
/** ResetNoMoreData（Clear the status of NoMoreData ） */
- (void)resetNoMoreData;
/** Ignored scrollView contentInset bottom */
@property (assign, nonatomic) CGFloat ignoredScrollViewContentInsetBottom;
/** Automaticlly show or hidden by the count of data（Show-have data，Hidden- no data） */
@property (assign, nonatomic) BOOL automaticallyHidden;@end
4. MJRefreshAutoFooter.h
@interface MJRefreshAutoFooter : MJRefreshFooter
/** Is Automatically Refresh(Default is Yes) */
@property (assign, nonatomic, getter=isAutomaticallyRefresh) BOOL automaticallyRefresh;
/** When there is much at the bottom of the control is automatically refresh(Default is 1.0，Is at the bottom of the control appears in full, will refresh automatically) */
@property (assign, nonatomic) CGFloat triggerAutomaticallyRefreshPercent;
@end
幾種使用方式
下面簡單的介紹幾種使用方式，內容來源于github。謝謝每一個作者的分享，謝謝大家。
下拉刷新
1. Default模式刷新
self.tableView.header = [MJRefreshNormalHeader headerWithRefreshingBlock:^{
//Call this Block When enter the refresh status automatically
}];
或
// Set the callback（Once you enter the refresh status，then call the action of target，that is call [self loadNewData]）
self.tableView.header = [MJRefreshNormalHeader headerWithRefreshingTarget:self refreshingAction:@selector(loadNewData)];
// Enter the refresh status immediately
[self.tableView.header beginRefreshing];
看下面的gif圖。
default模式
2. 帶有動畫圖片的刷新
// Set the callback（一Once you enter the refresh status，then call the action of target，that is call [self loadNewData]）
MJRefreshGifHeader *header = [MJRefreshGifHeader headerWithRefreshingTarget:self refreshingAction:@selector(loadNewData)];
// Set the ordinary state of animated images
[header setImages:idleImages forState:MJRefreshStateIdle];
// Set the pulling state of animated images（Enter the status of refreshing as soon as loosen）
[header setImages:pullingImages forState:MJRefreshStatePulling];
// Set the refreshing state of animated images
[header setImages:refreshingImages forState:MJRefreshStateRefreshing];
// Set header
self.tableView.mj_header = header;
我們看一下下面的gif圖。
animate-image
3. 隱藏時間的刷新
// Hide the time
header.lastUpdatedTimeLabel.hidden = YES;
我們看下面的gif圖。
hide-time-fresh
4. 隱藏狀態和時間的刷新
// Hide the time
header.lastUpdatedTimeLabel.hidden = YES;
// Hide the status
header.stateLabel.hidden = YES;
看下下面的gif圖。
hide_time_status_fresh
5. DIY文案刷新
// Set title
[header setTitle:@"Pull down to refresh" forState:MJRefreshStateIdle];
[header setTitle:@"Release to refresh" forState:MJRefreshStatePulling];
[header setTitle:@"Loading ..." forState:MJRefreshStateRefreshing];
// Set font
header.stateLabel.font = [UIFont systemFontOfSize:15];
header.lastUpdatedTimeLabel.font = [UIFont systemFontOfSize:14];
// Set textColor
header.stateLabel.textColor = [UIColor redColor];
header.lastUpdatedTimeLabel.textColor = [UIColor blueColor];
看一下gif圖。
DIY_fresh
6. 自定義控件的刷新
self.tableView.mj_header = [MJDIYHeader headerWithRefreshingTarget:self refreshingAction:@selector(loadNewData)];
// Implementation reference to MJDIYHeader.h和MJDIYHeader.m
看下面的gif圖。
control_fresh
上拉刷新
1. Default模式刷新
self.tableView.mj_footer = [MJRefreshAutoNormalFooter footerWithRefreshingBlock:^{
//Call this Block When enter the refresh status automatically
}];
或
// Set the callback（Once you enter the refresh status，then call the action of target，that is call [self loadMoreData]）
self.tableView.mj_footer = [MJRefreshAutoNormalFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadMoreData)];
看下面的gif圖。
default_fresh
2. 動畫刷新
// Set the callback（Once you enter the refresh status，then call the action of target，that is call [self loadMoreData]）
MJRefreshAutoGifFooter *footer = [MJRefreshAutoGifFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadMoreData)];
// Set the refresh image
[footer setImages:refreshingImages forState:MJRefreshStateRefreshing];
// Set footer
self.tableView.mj_footer = footer;
看下面的gif圖。
animate_image_fresh
3. 隱藏狀態的刷新
// Hide the title of refresh status
footer.refreshingTitleHidden = YES;
// If does have not above method，then use
footer.stateLabel.hidden = YES;
看下面的gif圖。
hide_status_fresh
4. 全部加載完畢的刷新
//Become the status of NoMoreData
[footer noticeNoMoreData];
我們看下面的gif圖。
all_load_fresh
5. DIY文字的刷新
// Set title
[footer setTitle:@"Click or drag up to refresh" forState:MJRefreshStateIdle];
[footer setTitle:@"Loading more ..." forState:MJRefreshStateRefreshing];
[footer setTitle:@"No more data" forState:MJRefreshStateNoMoreData];
// Set font
footer.stateLabel.font = [UIFont systemFontOfSize:17];
// Set textColor
footer.stateLabel.textColor = [UIColor blueColor];
我們看下面的gif圖。
DIY_title_fresh
6. 隱藏footer的刷新
//Hidden current control of the pull to refresh
self.tableView.mj_footer.hidden = YES;
我們看gif圖。
hide_after_loadall
7. 自動回彈的刷新
self.tableView.mj_footer = [MJRefreshBackNormalFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadMoreData)];
我們看一下gif圖。
autoback_fresh
8. 圖片自動回彈的刷新
MJRefreshBackGifFooter *footer = [MJRefreshBackGifFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadMoreData)];
// Set the normal state of the animated image
[footer setImages:idleImages forState:MJRefreshStateIdle];
// Set the pulling state of animated images（Enter the status of refreshing as soon as loosen）
[footer setImages:pullingImages forState:MJRefreshStatePulling];
// Set the refreshing state of animated images
[footer setImages:refreshingImages forState:MJRefreshStateRefreshing];
// Set footer
self.tableView.mj_footer = footer;
我們看下下面gif圖。
autoback_image_fresh
9.自定義控件的自動刷新
self.tableView.mj_footer = [MJDIYAutoFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadMoreData)];
// Implementation reference to MJDIYAutoFooter.h和MJDIYAutoFooter.m
下面我們看gif圖。
autofresh_control_fresh
10.自定義控件的自動回彈刷新
self.tableView.mj_footer = [MJDIYBackFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadMoreData)];
// Implementation reference to MJDIYBackFooter.h和MJDIYBackFooter.m
我們看下gif圖。
autoback_control_fresh
11.上下拉刷新
// The drop-down refresh
self.collectionView.mj_header = [MJRefreshNormalHeader headerWithRefreshingBlock:^{
//Call this Block When enter the refresh status automatically
}];
// The pull to refresh
self.collectionView.mj_footer = [MJRefreshAutoNormalFooter footerWithRefreshingBlock:^{
//Call this Block When enter the refresh status automatically
}];
我們看一下下邊的gif圖。
up_down_fresh
12.webview下拉刷新
//Add the control of The drop-down refresh
self.webView.scrollView.mj_header = [MJRefreshNormalHeader headerWithRefreshingBlock:^{
//Call this Block When enter the refresh status automatically
}];
我們看一下下面的gif圖。
webview_fresh
我的一個非常簡單的應用舉例
我利用MJRefresh非常簡單的實現了上拉和下拉刷新，這只是給大家看看的例子，在例子中我利用延時模擬網絡加載。希望對入門級的同學會有幫助。
先看代碼結構。
代碼結構
然后我們看代碼。
1. AppDelegate.m
#import "AppDelegate.h"
#import "JJMainVC.h"
@interface AppDelegate ()
@end
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
JJMainVC *mainVC = [[JJMainVC alloc] init];
UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:mainVC];
self.window.rootViewController = nav;
[self.window makeKeyAndVisible];
return YES;
}
@end
2. JJMainVC.h
#import <UIKit/UIKit.h>
@interface JJMainVC : UIViewController
@end
3. JJMainVC.m
#import "JJMainVC.h"
#import "Masonry.h"
#import "JJTableViewCell.h"
#import "MJRefresh.h"
@interface JJMainVC () <UITableViewDelegate, UITableViewDataSource>
@property (nonatomic, strong) UITableView *tableView;
@property (nonatomic, assign) NSInteger currentPage;
@end
@implementation JJMainVC
static NSString * const kJJMainVCReuseIdentify = @"kJJMainVCReuseIdentify";
#pragma mark - Override Base Function
- (void)viewDidLoad
{
[super viewDidLoad];
self.title = @"MJRefresh Demo";
[self setupUI];
}
- (void)viewWillLayoutSubviews
{
[super viewWillLayoutSubviews];
//tableview
[self.tableView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.right.top.bottom.equalTo(self.view);
}];
}
#pragma mark - Object Private Function
- (void)setupUI
{
//tableview加載
UITableView *tableView = [[UITableView alloc] init];
tableView.rowHeight = 80.0;
tableView.delegate = self;
tableView.dataSource = self;
[tableView registerClass:[JJTableViewCell class] forCellReuseIdentifier:kJJMainVCReuseIdentify];
tableView.backgroundColor = [UIColor lightGrayColor];
[self.view addSubview:tableView];
self.tableView = tableView;
//頭部刷新控件
tableView.mj_header = [MJRefreshNormalHeader headerWithRefreshingTarget:self refreshingAction:@selector(downFreshloadData)];
[tableView.mj_header beginRefreshing];
//尾部刷新控件
tableView.mj_footer = [MJRefreshAutoNormalFooter footerWithRefreshingTarget:self refreshingAction:@selector(upFreshLoadMoreData)];
[tableView.mj_footer beginRefreshing];
}
//下拉刷新
- (void)downFreshloadData
{
//這里加入的是網絡請求，帶上相關參數，利用網絡工具進行請求。我這里沒有網絡就模擬一下數據吧。
//網絡不管請求成功還是失敗都要結束更新。
NSLog(@"我在下拉刷新");
//利用延時函數模擬網絡加載
dispatch_time_t time = dispatch_time(DISPATCH_TIME_NOW, (int64_t)(3 * NSEC_PER_SEC));
dispatch_after(time, dispatch_get_main_queue(), ^{
[self.tableView.mj_header endRefreshing];
});
}
//上拉加載更多
- (void)upFreshLoadMoreData
{
//在這里上拉加載更多，將加載的數據拼接在數據源后面就可以了。
//利用延時函數模擬網絡加載
dispatch_time_t time = dispatch_time(DISPATCH_TIME_NOW, (int64_t)(3 * NSEC_PER_SEC));
dispatch_after(time, dispatch_get_main_queue(), ^{
[self.tableView.mj_footer endRefreshing];
});
}
#pragma mark - UITableViewDelegate, UITableViewDataSource
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return 10;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
JJTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:kJJMainVCReuseIdentify forIndexPath:indexPath];
return cell;
}
@end
4. JJTableViewCell.h
#import <UIKit/UIKit.h>
@interface JJTableViewCell : UITableViewCell
@end
5. JJTableViewCell.m
#import "JJTableViewCell.h"
#import "Masonry.h"
@interface JJTableViewCell ()
@property (nonatomic, strong) UIImageView *avatarImageView;
@property (nonatomic, strong) UILabel *nameLabel;
@property (nonatomic, strong) UILabel *descLabel;
@end
@implementation JJTableViewCell
#pragma mark - Override Base Function
- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {
[self setupUI];
}
return self;
}
- (void)layoutSubviews
{
[super layoutSubviews];
//頭像
[self.avatarImageView mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerY.equalTo(self);
make.left.equalTo(self).offset(20.0);
make.width.height.equalTo(@50);
}];
//姓名
[self.nameLabel sizeToFit];
[self.nameLabel mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(self.avatarImageView.mas_right).offset(20.0);
make.top.equalTo(self.avatarImageView);
}];
//介紹
[self.descLabel sizeToFit];
[self.descLabel mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(self.nameLabel);
make.bottom.equalTo(self.avatarImageView);
}];
}
#pragma mark - Object Private Function
- (void)setupUI
{
//頭像
UIImageView *avatarImageView = [[UIImageView alloc] init];
avatarImageView.image = [UIImage imageNamed:@"Snip20170430_5.png"];
[self.contentView addSubview:avatarImageView];
self.avatarImageView = avatarImageView;
//姓名
UILabel *nameLabel = [[UILabel alloc] init];
nameLabel.text = @"香格里拉";
nameLabel.textColor = [UIColor blueColor];
nameLabel.font = [UIFont systemFontOfSize:14.0];
[self.contentView addSubview:nameLabel];
self.nameLabel = nameLabel;
//介紹
UILabel *descLabel = [[UILabel alloc] init];
descLabel.text = @"這是一個迷人的地方，可以去看看~~~";
descLabel.textColor = [UIColor redColor];
descLabel.font = [UIFont systemFontOfSize:14.0];
[self.contentView addSubview:descLabel];
self.descLabel = descLabel;
}
@end
然后我們看下邊的gif圖。
simple_refresh_demo
??這個實現很簡單，給初學者一個入門的看看效果，后續我有時間會加大難度，希望對大家有幫助，謝謝大家，下面給出github地址。
后記
今天就寫這么多了，午飯都沒吃，該去吃飯了，謝謝大家，未完，待續~~~。
大海
