GTMRefresh

GTMRefresh 用Swift重寫的MJRefresh

Introduction

• 自定義方便, Demo裡面有國內主流App的下拉效果的模仿
• 程式碼簡潔，總程式碼量不超過1000行
• 支援國際化
• 支援: UITableView, UICollectionView, UIScrollView, UIWebView

Demo

直接下載程式碼，裡面Demo裡面有各種效果的自定義效果（因為時間比較緊，demo程式碼可能不夠漂亮）

Demo模仿的下拉效果

• YahooWeather
• Curve Mask
• Youku
• TaoBao
• QQ Video
• DianPing
• QQ

Installation

Cocoapods

Install Cocoapods if need be.

$ gem install cocoapods

Add GTMRefresh in your Podfile.

use_frameworks!

pod 'GTMRefresh'

Then, run the following command.

$ pod install

Manual

Copy GTMRefresh folder to your project. That’s it.

Note: Make sure that all files in GTMRefresh

版本

Vesrion 0.0.1

This version requires Xcode 8.0 and Swift 3.

使用幫助

Firstly, import GTMRefresh.

import GTMRefresh

使用預設的下拉和上拉效果

    self.tableView.gtm_addRefreshHeaderView {
        [weak self] in
        print("excute refreshBlock")
        self
 
.refresh()
    }

    self.tableView.gtm_addLoadMoreFooterView {
        [weak self] in
        print("excute loadMoreBlock")
        self.loadMore()
    }

程式碼觸發重新整理

    self.tableView.triggerRefreshing()

自定義下拉重新整理效果

約定
- 必須繼承 GTMRefreshHeader
- 必須實現 SubGTMRefreshHeaderProtocol

SubGTMRefreshHeaderProtocol

public protocol SubGTMRefreshHeaderProtocol {
    /// 狀態變成.idle
    func toNormalState()
    /// 狀態變成.refreshing
    func toRefreshingState()
    /// 狀態變成.pulling
    func toPullingState()
    /// 狀態變成.willRefresh
    func toWillRefreshState()
    /// 下拉高度／觸發高度 值改變
    func changePullingPercent(percent: CGFloat)
    /// 開始結束動畫前執行
    func willBeginEndRefershing(isSuccess: Bool)
    /// 結束動畫完成後執行
    func willCompleteEndRefershing()

    /// 控制元件的高度
    ///
    /// - Returns: 控制元件的高度
    func contentHeight() -> CGFloat
}

特殊效果的實現

• 當觸發重新整理的高度和控制元件高度不一樣時重寫willRefresHeight()，如Demo裡的：Curve Mask

    /// 即將觸發重新整理的高度(特殊的控制元件需要重寫該方法，返回不同的數值)
    ///
    /// - Returns: 觸發重新整理的高度
    open func willRefresHeight() -> CGFloat {
        return self.mj_h // 預設使用控制元件高度
    }

• 當Loadding動畫顯示區域的高度和控制元件高度不一樣時重寫refreshingHoldHeight()，如Demo裡的：QQ

    /// Loadding動畫顯示區域的高度(特殊的控制元件需要重寫該方法，返回不同的數值)
    ///
    /// - Returns: Loadding動畫顯示區域的高度
    open func refreshingHoldHeight() -> CGFloat {
        return self.mj_h // 預設使用控制元件高度
    }

Example

//
//  TaoBaoRefreshHeader.swift
//  PullToRefreshKit
//
//  Created by luoyang on 10/12/16.
//  Copyright © 2016年 luoyang. All rights reserved.
//

import UIKit
import GTMRefresh


class TaoBaoRefreshHeader: GTMRefreshHeader, SubGTMRefreshHeaderProtocol {

    fileprivate let circleLayer = CAShapeLayer()
    fileprivate let arrowLayer = CAShapeLayer()
    let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 230, height: 35))
    fileprivate let textLabel = UILabel()
    fileprivate let strokeColor = UIColor(red: 135.0/255.0, green: 136.0/255.0, blue: 137.0/255.0, alpha: 1.0)

    override init(frame: CGRect) {
        super.init(frame: frame)
        setUpCircleLayer()
        setUpArrowLayer()

        textLabel.textAlignment = .center
        textLabel.textColor = UIColor.lightGray
        textLabel.font = UIFont.systemFont(ofSize: 14)
        textLabel.text = "下拉即可重新整理..."
        imageView.image = UIImage(named: "taobaoLogo")
        self.contentView.addSubview(imageView)
        self.contentView.addSubview(textLabel)
    }
    func setUpArrowLayer(){
        let bezierPath = UIBezierPath()
        bezierPath.move(to: CGPoint(x: 20, y: 15))
        bezierPath.addLine(to: CGPoint(x: 20, y: 25))
        bezierPath.addLine(to: CGPoint(x: 25,y: 20))
        bezierPath.move(to: CGPoint(x: 20, y: 25))
        bezierPath.addLine(to: CGPoint(x: 15, y: 20))
        self.arrowLayer.path = bezierPath.cgPath
        self.arrowLayer.strokeColor = UIColor.lightGray.cgColor
        self.arrowLayer.fillColor = UIColor.clear.cgColor
        self.arrowLayer.lineWidth = 1.0
        self.arrowLayer.lineCap = kCALineCapRound
        self.arrowLayer.bounds = CGRect(x: 0, y: 0,width: 40, height: 40)
        self.arrowLayer.anchorPoint = CGPoint(x: 0.5, y: 0.5)
        self.layer.addSublayer(self.arrowLayer)
    }
    func setUpCircleLayer(){
        let bezierPath = UIBezierPath(arcCenter: CGPoint(x: 20, y: 20),
                                        radius: 12.0,
                                        startAngle:CGFloat(-M_PI/2),
                                        endAngle: CGFloat(M_PI_2 * 3),
                                        clockwise: true)
        self.circleLayer.path = bezierPath.cgPath
        self.circleLayer.strokeColor = UIColor.lightGray.cgColor
        self.circleLayer.fillColor = UIColor.clear.cgColor
        self.circleLayer.strokeStart = 0.05
        self.circleLayer.strokeEnd = 0.05
        self.circleLayer.lineWidth = 1.0
        self.circleLayer.lineCap = kCALineCapRound
        self.circleLayer.bounds = CGRect(x: 0, y: 0,width: 40, height: 40)
        self.circleLayer.anchorPoint = CGPoint(x: 0.5, y: 0.5)
        self.layer.addSublayer(self.circleLayer)
    }
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        textLabel.frame = CGRect(x: 0,y: 0,width: 120, height: 40)
        //放置Views和Layer
        imageView.center = CGPoint(x: frame.width/2, y: frame.height - 60 - 18)
        textLabel.center = CGPoint(x: frame.width/2 + 20, y: frame.height - 30)

        self.arrowLayer.position = CGPoint(x: frame.width/2 - 60, y: frame.height - 30)
        self.circleLayer.position = CGPoint(x: frame.width/2 - 60, y: frame.height - 30)
    }




    func toNormalState() {}
    func toRefreshingState() {
        self.circleLayer.strokeEnd = 0.95
        let rotateAnimation = CABasicAnimation(keyPath: "transform.rotation.z")
        rotateAnimation.toValue = NSNumber(value: M_PI * 2.0 as Double)
        rotateAnimation.duration = 0.6
        rotateAnimation.isCumulative = true
        rotateAnimation.repeatCount = 10000000
        self.circleLayer.add(rotateAnimation, forKey: "rotate")
        self.arrowLayer.isHidden = true
        textLabel.text = "重新整理中..."
    }
    func toPullingState() {}
    func toWillRefreshState() {}
    func changePullingPercent(percent: CGFloat) {
        let adjustPercent = max(min(1.0, percent),0.0)
        if adjustPercent  == 1.0{
            textLabel.text = "釋放即可重新整理..."
        }else{
            textLabel.text = "下拉即可重新整理..."
        }
        self.circleLayer.strokeEnd = 0.05 + 0.9 * adjustPercent
    }
    func willBeginEndRefershing(isSuccess: Bool) {}
    func willCompleteEndRefershing() {
        transitionWithOutAnimation {
            self.circleLayer.strokeEnd = 0.05
        };
        self.circleLayer.removeAllAnimations()
        self.arrowLayer.isHidden = false
        textLabel.text = "下拉即可重新整理"
    }
    func contentHeight()->CGFloat{
        return 60
    }

    /// MARK: Private
    func transitionWithOutAnimation(_ clousre:()->()){
        CATransaction.begin()
        CATransaction.setDisableActions(true)
        clousre()
        CATransaction.commit()
    }
}

自定義控制元件的使用

    self.tableView.gtm_addRefreshHeaderView(refreshHeader: CustomRefreshHeader()) {
        [unowned self] in
        print("excute refreshBlock")
        self.refresh()
    }

自定義上拉載入效果

約定
- 必須繼承 GTMLoadMoreFooter
- 必須實現 SubGTMLoadMoreFooterProtocol

SubGTMLoadMoreFooterProtocol

public protocol SubGTMLoadMoreFooterProtocol {
    func toNormalState()
    func toNoMoreDataState()
    func toWillRefreshState()
    func toRefreshingState()

    /// 控制元件的高度(自定義控制元件通過該方法設定自定義高度)
    ///
    /// - Returns: 控制元件的高度
    func contentHeith() -> CGFloat
}