iOS自定义下拉刷新控件

自定义下拉刷新控件

概述

用了很多的别人的下拉刷新控件，想写一个玩玩，自定义一个在使用的时候也会比较有意思。使应用更加的灵动一些，毕竟谁不喜欢各种动画恰到好处的应用呢。

使用方式如下：

tableview.refreshControl = XRefreshControl.init(refreshingBlock: {DispatchQueue.main.asyncAfter(deadline: .now() + 5) { [weak self] inself?.table.endRefreshing()}
})

下边展示一下效果。

然后又搞了一个比较炫酷的版本～，效果图如下：

继承 UIRefreshControl，然后再其上直接添加view就能实现需要的加载效果，尝试发现自定义的类需要把背景色设置一下，要不然会有一下拉整体都显示出来的问题，而且最好在view上再加一个view整体给铺上，在设置一个背景色，把小菊花给盖上。

简单版本代码

import Foundation
import UIKit
import SnapKitclass XRefreshControl: UIRefreshControl {var observation: NSKeyValueObservation?var isLocalRefreshing: Bool = falselet indicator = UIProgressView(progressViewStyle: .bar)var refreshingBlock: (()->Void)?override init(frame: CGRect) {super.init(frame: frame)observation = observe(\.frame,options: .new) { [weak self] object, change inif self?.isRefreshing == true {if self?.isLocalRefreshing == false {if self?.refreshingBlock != nil {self?.refreshingBlock!()}}self?.isLocalRefreshing = true} else {let height = change.newValue!.heightself?.indicator.progress = min(Float(abs(height / 60)), 1)}}}convenience init(refreshingBlock: @escaping ()->Void) {self.init(frame: .zero)self.refreshingBlock = refreshingBlockself.layer.masksToBounds = trueself.backgroundColor = .redlet v = UIView()v.backgroundColor = .redlet center = UIView()v.addSubview(center)let title = UILabel()title.text = "加载中"title.textColor = .blackcenter.addSubview(title)indicator.layer.masksToBounds = truecenter.addSubview(indicator)self.addSubview(v)v.snp.makeConstraints { make inmake.edges.equalToSuperview()}center.snp.makeConstraints { make inmake.center.equalToSuperview()make.width.equalToSuperview()}indicator.snp.makeConstraints { make inmake.top.equalToSuperview()make.width.height.equalTo(32)make.centerX.equalToSuperview()}title.snp.makeConstraints { make inmake.top.equalTo(indicator.snp.bottom)make.bottom.equalToSuperview()make.centerX.equalToSuperview()}}required init?(coder: NSCoder) {fatalError("init(coder:) has not been implemented")}deinit {observation = nil}override func endRefreshing() {super.endRefreshing()self.isLocalRefreshing = falseindicator.progress = 0}
}extension UITableView {func endRefreshing() {if ((self.refreshControl?.isKind(of: XRefreshControl.self)) != nil) {self.refreshControl?.endRefreshing()}}
}

加强版本代码

class XRefreshControl: UIRefreshControl {var observation: NSKeyValueObservation?var isLocalRefreshing: Bool = falselet indicator = UIProgressView(progressViewStyle: .bar)var refreshingBlock: (()->Void)?var displayLink: CADisplayLink?var targetDuration: CGFloat = 3var fireDate: Date = .nowvar endRefreshingDate: Date = .nowvar title = UILabel()var colors: [UIColor] = [UIColor(hex: "ffbe0b"),UIColor(hex: "fb5607"),UIColor(hex: "ff006e"),UIColor(hex: "8338ec"),UIColor(hex: "3a86ff"),]var speedViews: [UIView] = []var blockViews: [UIView] = []// 背景var contentView = UIView()override init(frame: CGRect) {super.init(frame: frame)observation = observe(\.frame,options: .new) { [weak self] object, change inif self?.isRefreshing == true {if self?.isLocalRefreshing == false {if self?.refreshingBlock != nil {self?.refreshingBlock!()}self?.startAnimation()}self?.isLocalRefreshing = true} else {let height = change.newValue!.heightself?.dragEffect(distance: height)}}}convenience init(refreshingBlock: @escaping ()->Void) {self.init(frame: .zero)self.refreshingBlock = refreshingBlockself.layer.masksToBounds = trueself.backgroundColor = .whitecontentView.backgroundColor = .redself.addSubview(contentView)let center = UIView()contentView.addSubview(center)title.text = "下拉加载"title.textColor = .blackcenter.addSubview(title)center.addSubview(indicator)for _ in 0...6 {let v = UIView()v.backgroundColor = .whitespeedViews.append(v)contentView.addSubview(v)}for _ in 0..<10 {let v = UIView()v.backgroundColor = .whiteblockViews.append(v)contentView.addSubview(v)}contentView.snp.makeConstraints { make inmake.edges.equalToSuperview()}center.snp.makeConstraints { make inmake.center.equalToSuperview()}indicator.snp.makeConstraints { make inmake.left.top.right.equalToSuperview()make.width.equalTo(120)make.height.equalTo(6)}title.snp.makeConstraints { make inmake.top.equalTo(indicator.snp.bottom).offset(10)make.bottom.equalToSuperview()make.centerX.equalToSuperview()}}required init?(coder: NSCoder) {fatalError("init(coder:) has not been implemented")}deinit {observation = nilself.displayLink?.remove(from: RunLoop.current, forMode: .common)}func dragEffect(distance: CGFloat) {let diff = abs(endRefreshingDate.timeIntervalSinceNow)if diff < 0.5 {return}let precent = min(abs(distance/140),1)let value = precent * 8 * CGFloat.piself.indicator.progress = 1let opacity = Float(sin(value))
//        print("opacity \(opacity)")self.indicator.layer.opacity = opacityself.title.text = "下拉加载"for i in 0..<3 {let xx = (self.frame.size.width / 12.0) * CGFloat(i+1)var yy = abs(distance/2)-2yy += sin(distance/10 + CGFloat(i+1)*10)*6speedViews[i].frame = .init(x: xx, y: yy, width: 2, height: 4)}for i in 3..<6 {var x = (self.frame.size.width / 12.0) * CGFloat(i+1-3)x += self.frame.width * 2.0 / 3.0var yy = abs(distance/2)-2yy += sin(distance/10 + CGFloat(i+1-3)*10)*6speedViews[i].frame = .init(x: x, y: yy, width: 2, height: 4)}for i in 0..<blockViews.count {blockViews[i].frame = .init(x: 0, y: 0, width: 0, height: 0)}}func startAnimation() {displayLink = CADisplayLink(target: self, selector: #selector(update))displayLink?.add(to: RunLoop.current, forMode: .common)fireDate = .nowself.indicator.layer.opacity = 1self.indicator.progress = 1self.title.text = "加载中"let width = self.frame.widthfor i in 0..<blockViews.count {let size = CGFloat.random(in: 4...8)let x = CGFloat.random(in: 0...width)blockViews[i].frame = .init(x: x, y: 0, width: size, height: size)}}@objc func update(_ displayLink: CADisplayLink) {let diff = abs(fireDate.timeIntervalSinceNow)var precent = diff / targetDurationprecent = min(precent, 1)self.indicator.progress = Float(precent)contentView.backgroundColor = colors[Int(diff*3)%colors.count]for i in 0..<3 {var xx = (self.frame.size.width / 12.0) * CGFloat(i+1)var yy = self.frame.height/2-12if i == 1 {yy += sin(CGFloat(diff)*6) * 2xx += sin(CGFloat(diff)*6)} else {yy += sin(CGFloat(diff)*6) * 4xx += sin(CGFloat(diff)*6 + CGFloat(i+1))}speedViews[i].frame = .init(x: xx, y: yy, width: 2, height: 24)}for i in 3..<6 {var xx = (self.frame.size.width / 12.0) * CGFloat(i+1-3)xx += self.frame.width * 2.0 / 3.0var yy = self.frame.height/2-12if i == 4 {yy += sin(CGFloat(diff)*6) * 2xx += sin(CGFloat(diff)*6)} else {yy += sin(CGFloat(diff)*6) * 4xx += sin(CGFloat(diff)*6 + CGFloat(i+1-3))}speedViews[i].frame = .init(x: xx, y: yy, width: 2, height: 24)}for i in 0..<self.blockViews.count {var x = self.blockViews[i].frame.origin.xvar y = self.blockViews[i].frame.origin.y + self.blockViews[i].frame.width / 4if y > self.contentView.frame.height {y = 0x = CGFloat.random(in: 0...self.contentView.frame.width)}self.blockViews[i].frame = .init(origin: .init(x: x, y: y), size: self.blockViews[i].frame.size)}}override func endRefreshing() {super.endRefreshing()self.isLocalRefreshing = falseself.displayLink?.remove(from: RunLoop.current, forMode: .common)endRefreshingDate = .nowself.title.text = "加载完毕"}
}
extension UITableView {func endRefreshing() {if ((self.refreshControl?.isKind(of: XRefreshControl.self)) != nil) {self.refreshControl?.endRefreshing()}}
}
extension UIColor {/// 使用 #FFFFFF 来初始化颜色convenience init(hex: String, alpha: CGFloat = 1.0) {var hexFormatted: String = hex.trimmingCharacters(in: CharacterSet.whitespacesAndNewlines).uppercased()if hexFormatted.hasPrefix("#") {hexFormatted = String(hexFormatted.dropFirst())}if hexFormatted.hasPrefix("0x") {hexFormatted = String(hexFormatted.dropFirst())hexFormatted = String(hexFormatted.dropFirst())}assert(hexFormatted.count == 6, "Invalid hex code used.")var rgbValue: UInt64 = 0Scanner(string: hexFormatted).scanHexInt64(&rgbValue)self.init(red: CGFloat((rgbValue & 0xFF0000) >> 16) / 255.0,green: CGFloat((rgbValue & 0x00FF00) >> 8) / 255.0,blue: CGFloat(rgbValue & 0x0000FF) / 255.0,alpha: alpha)}
}

参考地址