MJRefresh (Footer ) API

接着上一章，我们继续了解MJRefresh。上一篇文章中我们了解了MJRefresh的主要类，以及他们之间的关系，了解了Header的各种使用方法。这一篇文章中，我们继续一起学习Footer的各种类型以及用法。

先来看下有几种footer
base中有三种：

image.png

custom中有六种

image.png

他们之间的关系如下：

image.png

下面我们一起来看下，这么多Footer类，都是做什么的。

1、MJRefreshFooter
效果：没有效果,也不会刷新
用法：

//没有效果,也不会刷新
-(void)refreshNone{
    __weak UpRefreshController * weakSelf = self;
    self.tableView.mj_footer = [MJRefreshFooter footerWithRefreshingBlock:^{
        [weakSelf loadDataMore];
        [weakSelf.tableView reloadData];
        [weakSelf endRefresh];
    }];
}

2、MJRefreshBackFooter
效果：
没有任何刷新的UI，但是有刷新效果。
用法：

//没有任何刷新的UI，但是有刷新效果
-(void)refreshBack{
      __weak UpRefreshController * weakSelf = self;
    self.tableView.mj_footer = [MJRefreshBackFooter footerWithRefreshingBlock:^{
        [weakSelf loadDataMore];
        [weakSelf.tableView reloadData];
        [weakSelf endRefresh];
    }];
}

运行效果：

11.gif

3、MJRefreshBackGifFooter
效果：有文字刷新状态，有刷新效果
用法：

//有文字刷新状态，有刷新效果
-(void)refreshBackGif{
    __weak UpRefreshController * weakSelf = self;
    self.tableView.mj_footer = [MJRefreshBackGifFooter footerWithRefreshingBlock:^{
        [weakSelf loadDataMore];
        [weakSelf.tableView reloadData];
        [weakSelf endRefresh];
    }];
}

运行效果：

12.gif

4、MJRefreshBackStateFooter
效果：和MJRefreshBackGifFooter 一样 只有文字刷新状态，有刷新效果。
用法：

//和MJRefreshBackGifFooter 一样 只有文字刷新状态，有刷新效果
-(void)refreshBackState{
    __weak UpRefreshController * weakSelf = self;
    self.tableView.mj_footer = [MJRefreshBackStateFooter footerWithRefreshingBlock:^{
        [weakSelf loadDataMore];
        [weakSelf.tableView reloadData];
        [weakSelf endRefresh];
    }];
}

运行效果：

13.gif

5、MJRefreshBackNormalFooter
效果：有文字状态也有图片，有刷新效果
用法：

//有文字状态也有图片，有刷新效果
-(void)refreshBackNormal{
    __weak UpRefreshController * weakSelf = self;
    self.tableView.mj_footer = [MJRefreshBackNormalFooter footerWithRefreshingBlock:^{
        [weakSelf loadDataMore];
        [weakSelf.tableView reloadData];
        [weakSelf endRefresh];
    }];
}

运行效果：

QQ20171127-110154.gif

6、MJRefreshAutoFooter
效果：没有任何UI，但是有刷新效果，和MJRefreshBackFooter一样。
用法：

//没有任何UI，但是有刷新效果
-(void)refreshAuto{
    __weak UpRefreshController * weakSelf = self;
    self.tableView.mj_footer = [MJRefreshAutoFooter footerWithRefreshingBlock:^{
        [weakSelf loadDataMore];
        [weakSelf.tableView reloadData];
        [weakSelf endRefresh];
    }];
}

运行效果：
参见 2、MJRefreshBackFooter

7、MJRefreshAutoGifFooter
效果：有文字，有刷新效果。和MJRefreshBackGifFooter类似，但是和MJRefreshBackGifFooter的位置不一样。
用法：

//有文字，有效果，注意：这个文字是紧跟最后一个有数据的cell的位置，并不是隐藏起来的
-(void)refreshAutoGif{
    __weak UpRefreshController * weakSelf = self;
    self.tableView.mj_footer = [MJRefreshAutoGifFooter footerWithRefreshingBlock:^{
        [weakSelf loadDataMore];
        [weakSelf.tableView reloadData];
        [weakSelf endRefresh];
    }];
}

运行效果：

12.gif

8、MJRefreshAutoStateFooter
效果：有文字，有效果，和MJRefreshAutoGifFooter一个效果。
用法：

//有文字，有效果，和MJRefreshAutoGifFooter一个效果
-(void)refreshAutoState{
    __weak UpRefreshController * weakSelf = self;
    self.tableView.mj_footer = [MJRefreshAutoStateFooter footerWithRefreshingBlock:^{
        [weakSelf loadDataMore];
        [weakSelf.tableView reloadData];
        [weakSelf endRefresh];
    }];
}

运行效果：
参见MJRefreshAutoGifFooter。

9、MJRefreshAutoNormalFooter
效果：有文字，刷新时候有小菊花图片，有刷新效果。
用法：

//有文字，刷新有图片，有刷新效果。
-(void)refreshAutoNormal{
    __weak UpRefreshController * weakSelf = self;
    self.tableView.mj_footer = [MJRefreshAutoNormalFooter footerWithRefreshingBlock:^{
        [weakSelf loadDataMore];
        [weakSelf.tableView reloadData];
        [weakSelf endRefresh];
    }];
}

运行效果：

13.gif

看到了吗？多了个小菊花。

10、带动图的刷新

直接看图吧：

14.gif

用法：

-(void)refreshAnimationGif{
    __weak UpRefreshController * weakSelf = self;
    MJRefreshAutoGifFooter * footer = [MJRefreshAutoGifFooter footerWithRefreshingBlock:^{
        [weakSelf loadDataMore];
        [weakSelf.tableView reloadData];
        [weakSelf endRefresh];
    }];
    
    //设置正在刷新状态的动画图片
    NSMutableArray * refreshingImages = [NSMutableArray array];
    for (NSUInteger i = 1; i<=3; i++) {
        UIImage * image = [UIImage imageNamed:[NSString stringWithFormat:@"dropdown_loading_0%zd",i]];
        [refreshingImages addObject:image];
    }
    [footer setImages:refreshingImages forState:MJRefreshStateRefreshing];
    
    self.tableView.mj_footer = footer;
}

总结：

1.MJRefreshAutoFooter系列和MJRefreshBackFooter系列的区别就是刷新控件的位置不同，一个是在底部，一个是紧挨着cell。

我们了解了MJRefresh的header和Footer的基本类以及用法。之后，我们会逐步的了解它的实现原理以及源码，看看到底是如何实现的这些效果。我们自己是否也能实现呢？