本文主要讲述 ESPullToRefresh 基本使用，自定义文字，已定义样式。好了，话不多说直接上效果。
效果一.
效果一..gif
cocopods 集成
pod 'ESPullToRefresh'
实现代码：
添加下拉刷新
collectionView.es.addPullToRefresh {
[unowned self] in
// 在这里做刷新相关事件
// ...
// 如果你的刷新事件成功，设置completion自动重置footer的状态
self.collectionView.es.stopPullToRefresh()
// 设置ignoreFooter来处理不需要显示footer的情况
self.collectionView.es.stopPullToRefresh(ignoreDate: true, ignoreFooter: true)
}
添加下拉加载
collectionView.es.addInfiniteScrolling {
[unowned self] in
/// 在这里做加载更多相关事件
/// ...
/// 如果你的加载更多事件成功，调用es_stopLoadingMore()重置footer状态
self.collectionView.es.stopLoadingMore()
/// 通过es_noticeNoMoreData()设置footer暂无数据状态
self.collectionView.es.noticeNoMoreData()
self.footerRereshing()
}
好，到此这样效果就可以实现。
项目中一般都要修改 Pull to refresh. Loading... 为中文，甚至有些产品还会更改为一些比较好玩的文字，那么怎么实现呢？
效果二.
Untitled02.gif
可以在父Controller中全局修改，也可以在需要修改的Controller中单独修改
//修改 下拉 上拉刷新 文字提示
var header: ESRefreshHeaderAnimator {
get {
let h = ESRefreshHeaderAnimator.init(frame: CGRect.zero)
h.pullToRefreshDescription = "下拉刷新"
h.releaseToRefreshDescription = "松开获取最新数据"
h.loadingDescription = "下拉刷新..."
return h
}
}
var footer: ESRefreshFooterAnimator {
get {
let f = ESRefreshFooterAnimator.init(frame: CGRect.zero)
f.loadingMoreDescription = "上拉加载更多"
f.noMoreDataDescription = "数据已加载完"
f.loadingDescription = "加载更多..."
return f
}
}
添加方法也有所改变增加了一个参数header footer,代码如下
// 下拉刷新
collectionView.es.addPullToRefresh(animator: header, handler: {
[unowned self] in
self.headerRereshing()
// self.page = 1
// self.isClear = false
// self.loadSlidesListData()
// self.loadBelowListData()
// / 在这里做刷新相关事件
// / ...
// / 如果你的刷新事件成功，设置completion自动重置footer的状态
// self.collectionView.es.stopPullToRefresh()
// / 设置ignoreFooter来处理不需要显示footer的情况
// self.collectionView.es.stopPullToRefresh(ignoreDate: true, ignoreFooter: true)
});
// 上拉加载
collectionView.es.addInfiniteScrolling(animator: footer) {
[unowned self] in
self.footerRereshing()
// self.page += 1
// self.isClear = true
// self.loadBelowListData()
// /// 在这里做加载更多相关事件
// /// ...
// /// 如果你的加载更多事件成功，调用es_stopLoadingMore()重置footer状态
// self.collectionView.es.stopLoadingMore()
// /// 通过es_noticeNoMoreData()设置footer暂无数据状态
// self.collectionView.es.noticeNoMoreData()
}
return collectionView
}()
有的时候下拉刷新需要自定义效果
效果三.
Untitled03.gif
新建一个View MTRefreshHeaderAnimator 继承自UIVIew，遵循ESRefreshProtocol, ESRefreshAnimatorProtocol代理，代码如下
public class MTRefreshHeaderAnimator: UIView, ESRefreshProtocol, ESRefreshAnimatorProtocol {
public var insets: UIEdgeInsets = UIEdgeInsets.zero
public var view: UIView { return self }
public var duration: TimeInterval = 0.3
public var trigger: CGFloat = 56.0
public var executeIncremental: CGFloat = 56.0
public var state: ESRefreshViewState = .pullToRefresh
private let imageView: UIImageView = {
let imageView = UIImageView.init()
imageView.image = UIImage.init(named: "icon_pull_animation_1")
return imageView
}()
override init(frame: CGRect) {
super.init(frame: frame)
self.addSubview(imageView)
}
public required init(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
public func refreshAnimationBegin(view: ESRefreshComponent) {
imageView.center = self.center
UIView.animate(withDuration: 0.2, delay: 0, options: .curveLinear, animations: {
self.imageView.frame = CGRect.init(x: (self.bounds.size.width - 39.0) / 2.0,
y: self.bounds.size.height - 50.0,
width: 39.0,
height: 50.0)
}, completion: { (finished) in
var images = [UIImage]()
for idx in 1 ... 8 {
if let aImage = UIImage(named: "icon_shake_animation_\(idx)") {
images.append(aImage)
}
}
self.imageView.animationDuration = 0.5
self.imageView.animationRepeatCount = 0
self.imageView.animationImages = images
self.imageView.startAnimating()
})
}
public func refreshAnimationEnd(view: ESRefreshComponent) {
imageView.stopAnimating()
imageView.image = UIImage.init(named: "icon_pull_animation_1")
UIView.animate(withDuration: 0.2, delay: 0, options: .curveLinear, animations: {
self.refresh(view: view, progressDidChange: 0.0)
}, completion: { (finished) in
})
}
public func refresh(view: ESRefreshComponent, progressDidChange progress: CGFloat) {
let p = max(0.0, min(1.0, progress))
imageView.frame = CGRect.init(x: (self.bounds.size.width - 39.0) / 2.0,
y: self.bounds.size.height - 50.0 * p,
width: 39.0,
height: 50.0 * p)
}
public func refresh(view: ESRefreshComponent, stateDidChange state: ESRefreshViewState) {
guard self.state != state else {
return
}
self.state = state
switch state {
case .pullToRefresh:
var images = [UIImage]()
for idx in 1 ... 5 {
if let aImage = UIImage(named: "icon_pull_animation_\((5 - idx + 1))") {
images.append(aImage)
}
}
imageView.animationDuration = 0.2
imageView.animationRepeatCount = 1
imageView.animationImages = images
imageView.image = UIImage.init(named: "icon_pull_animation_1")
imageView.startAnimating()
break
case .releaseToRefresh:
var images = [UIImage]()
for idx in 1 ... 5 {
if let aImage = UIImage(named: "icon_pull_animation_\(idx)") {
images.append(aImage)
}
}
imageView.animationDuration = 0.2
imageView.animationRepeatCount = 1
imageView.animationImages = images
imageView.image = UIImage.init(named: "icon_pull_animation_5")
imageView.startAnimating()
break
default:
break
}
}
}
在Controller中实现代码如下；
var header: ESRefreshProtocol & ESRefreshAnimatorProtocol
header = MTRefreshHeaderAnimator.init(frame: CGRect.zero)
self.tableView.es.addPullToRefresh(animator: header) { [weak self] in
self?.headerRereshing()
}
