纯Swift写的下拉刷新,上拉加载,支持完全自定义刷新界面和动画(An easy way to pull-to-refresh in Swift)

纯Swift实现的PullToRefreshKit,支持完全自定义刷新界面和动画 1

纯Swift实现的PullToRefreshKit,支持完全自定义刷新界面和动画 - 敏捷大拇指 - 纯Swift实现的PullToRefreshKit,支持完全自定义刷新界面和动画 1


支持一行代码实现下拉刷新:

[Swift] 纯文本查看 复制代码
self.tableView.setUpHeaderRefresh { [weak self] in
   delay(1.5, closure: { 
        self?.tableView.endHeaderRefreshing(.Success)
   })
}


这个库的设计初衷,是为了能够方便地实现自定义的下拉刷新,上拉加载等。比如,Demo中,我列举了用这个框架如何实现淘宝大众点评的下拉刷新。

纯Swift实现的PullToRefreshKit,支持完全自定义刷新界面和动画 2

纯Swift实现的PullToRefreshKit,支持完全自定义刷新界面和动画 - 敏捷大拇指 - 纯Swift实现的PullToRefreshKit,支持完全自定义刷新界面和动画 2


纯Swift实现的PullToRefreshKit,支持完全自定义刷新界面和动画 3

纯Swift实现的PullToRefreshKit,支持完全自定义刷新界面和动画 - 敏捷大拇指 - 纯Swift实现的PullToRefreshKit,支持完全自定义刷新界面和动画 3





1、要求

  • iOS 8
  • Swift 2


支持

  • UITableView
  • UICollectionView
  • UIScrollView
  • UIWebView(TODO)





2、安装

推荐使用CocoaPod安装

[Bash shell] 纯文本查看 复制代码
pod "PullToRefreshKit"





3、使用

对于默认效果的,你只需要一行代码即可。



3.1、下拉刷新

[Swift] 纯文本查看 复制代码
 self.tableView.setUpHeaderRefresh { [weak self] in
    delay(1.5, closure: { 
         self?.tableView.endHeaderRefreshing(.Success)
    })
 }


纯Swift实现的PullToRefreshKit,支持完全自定义刷新界面和动画 4

纯Swift实现的PullToRefreshKit,支持完全自定义刷新界面和动画 - 敏捷大拇指 - 纯Swift实现的PullToRefreshKit,支持完全自定义刷新界面和动画 4




3.2、上拉加载

[Swift] 纯文本查看 复制代码
 self.tableView.setUpFooterRefresh {  [weak self] in
     delay(1.5, closure: {
         self?.tableView.endFooterRefreshing()
     })
 }


纯Swift实现的PullToRefreshKit,支持完全自定义刷新界面和动画 5

纯Swift实现的PullToRefreshKit,支持完全自定义刷新界面和动画 - 敏捷大拇指 - 纯Swift实现的PullToRefreshKit,支持完全自定义刷新界面和动画 5




3.3、左拉退出当前界面

[Swift] 纯文本查看 复制代码
 scrollView.setUpLeftRefresh { [weak self] in
     self?.navigationController?.popViewControllerAnimated(true)
 }


纯Swift实现的PullToRefreshKit,支持完全自定义刷新界面和动画 6

纯Swift实现的PullToRefreshKit,支持完全自定义刷新界面和动画 - 敏捷大拇指 - 纯Swift实现的PullToRefreshKit,支持完全自定义刷新界面和动画 6




3.4、右拉进入下一个界面

[Swift] 纯文本查看 复制代码
 scrollView.setUpRightRefresh { [weak self] in
     let nvc = DefaultBannerController()
     self?.navigationController?.pushViewController(nvc, animated: true)
 }


纯Swift实现的PullToRefreshKit,支持完全自定义刷新界面和动画 7

纯Swift实现的PullToRefreshKit,支持完全自定义刷新界面和动画 - 敏捷大拇指 - 纯Swift实现的PullToRefreshKit,支持完全自定义刷新界面和动画 7




3.5、配置默认的属性

PullToRefershKit提供操作符SetUp来实现配置,例如,配置默认header:

[Swift] 纯文本查看 复制代码
self.tableView.setUpHeaderRefresh { [weak self] in
    delay(1.5, closure: {
        self?.tableView.endHeaderRefreshing(.Success)
    })
}.SetUp { (header) in
    header.setText("Pull to refresh", mode: .pullToRefresh)
    header.setText("Release to refresh", mode: .releaseToRefresh)
    header.setText("Success", mode: .refreshSuccess)
    header.setText("Refreshing...", mode: .refreshing)
    header.setText("Failed", mode: .refreshFailure)
    header.setText("Error", mode: .refreshError)
    header.textLabel.textColor = UIColor.orangeColor()
    header.imageView.image = nil
}




3.6、自定义刷新界面

对于自定义界面,你唯一要做的就是写一个UIView的子类,然后实现以下协议中的一个

  • RefreshableHeader 自定义下拉刷新要实现的协议
  • RefreshableFooter 自定义上拉加载要实现的协议
  • RefreshableLeftRight 自定义左右滑动要实现的协议


例如,Demo工程TaoBaoRefreshHeader.swift中实现了淘宝App的下拉刷新例子。

你只需要根据协议提供的回调来更新Header的状态。

这个协议提供的方法如下:

[Swift] 纯文本查看 复制代码
//触发刷新的距离,对于header/footer来讲,就是视图的高度;对于left/right来讲,就是视图的宽度
func distanceToRefresh()->CGFloat

//百分比回调,在这里你根据百分比来动态的调整你的刷新视图
func percentUpdateWhenNotRefreshing(percent:CGFloat)

//松手就会刷新的回调,在这个回调里,将视图切换到动画的状态
func releaseWithRefreshingState()

//刷新结束,将要进行隐藏的动画,一般在这里告诉用户刷新的结果
func didBeginEndRefershingAnimation(result:RefreshResult)

//刷新结束,隐藏的动画结束,一般在这里把视图隐藏,各个参数恢复到最初状态
func didCompleteEndRefershingAnimation(result:RefreshResult)





4、已知问题

如果下拉刷新不显示图片,选择PullToRefreshKit的三张图,然后,勾选target:

纯Swift实现的PullToRefreshKit,支持完全自定义刷新界面和动画 8

纯Swift实现的PullToRefreshKit,支持完全自定义刷新界面和动画 - 敏捷大拇指 - 纯Swift实现的PullToRefreshKit,支持完全自定义刷新界面和动画 8





5、作者 Author

Leo, leomobiledeveloper@gmail.com

Github: http://github.com/LeoMobileDeveloper/PullToRefreshKit




6、License

PullToRefreshKit is available under the MIT license. See the LICENSE file for more info.




7、Thanks

感谢SVPullToRefreshMJRefresh,让我少走了很多弯路。