iOS自定义下拉刷新

原创

mob64ca12ea10ec 2024-11-08 15:33:18 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12ea10ec的原创作品，请联系作者获取转载授权，否则将追究法律责任

iOS自定义下拉刷新

在iOS应用开发中，下拉刷新是一种常见的用户交互模式。它可以让用户通过向下拖动列表（如UITableView或UICollectionView）来触发重新加载数据的操作。虽然UIKit提供了UIRefreshControl，我们可以轻松实现下拉刷新，但在一些复杂的场景下，自定义下拉刷新效果会提升用户体验。本文将介绍如何自定义下拉刷新控件，并提供代码示例。

自定义下拉刷新控件

首先，我们需要创建一个自定义视图，表示下拉刷新的状态。我们的自定义刷新控件通常包括以下几个状态：

Idle - 空闲状态
Pulling - 拖动状态
Refreshing - 刷新状态

接下来，我们定义一个状态图来展示这几个状态之间的关系：

stateDiagram
    [*] --> Idle
    Idle --> Pulling: 用户下拉
    Pulling --> Idle: 用户放开
    Pulling --> Refreshing: 超过阈值
    Refreshing --> Idle: 数据加载完成

创建自定义下拉刷新控件

我们可以使用UIView创建一个自定义下拉视图。以下是一个简单的实现代码：

import UIKit

class CustomRefreshControl: UIView {
    private var state: RefreshState = .idle {
        didSet {
            updateUIForState(state)
        }
    }
    
    private let loadingIndicator = UIActivityIndicatorView(style: .medium)
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupView()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupView()
    }
    
    private func setupView() {
        loadingIndicator.translatesAutoresizingMaskIntoConstraints = false
        addSubview(loadingIndicator)
        NSLayoutConstraint.activate([
            loadingIndicator.centerXAnchor.constraint(equalTo: centerXAnchor),
            loadingIndicator.centerYAnchor.constraint(equalTo: centerYAnchor)
        ])
    }
    
    private func updateUIForState(_ state: RefreshState) {
        switch state {
        case .idle:
            loadingIndicator.stopAnimating()
        case .pulling:
            // 这里可以添加其他的UI更新，例如改变label的文案
            break
        case .refreshing:
            loadingIndicator.startAnimating()
        }
    }
    
    func startRefreshing() {
        state = .refreshing
    }
    
    func stopRefreshing() {
        state = .idle
    }
}

enum RefreshState {
    case idle
    case pulling
    case refreshing
}

上面的代码中，我们定义了一个 CustomRefreshControl 类，包含一个状态属性 state，它决定了当前的刷新状态。在状态更新时，会调用 updateUIForState 方法来刷新UI。

集成自定义下拉刷新控件

现在，我们来看看如何将这个自定义下拉刷新控件集成到UITableView中。首先，我们需要在UITableView的 UIScrollView 部分添加逻辑：

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
    private let tableView = UITableView()
    private let refreshControl = CustomRefreshControl()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupTableView()
    }
    
    private func setupTableView() {
        tableView.delegate = self
        tableView.dataSource = self
        tableView.frame = view.bounds
        view.addSubview(tableView)
        
        let refreshFrame = CGRect(x: 0, y: -100, width: tableView.bounds.width, height: 100)
        refreshControl.frame = refreshFrame
        tableView.addSubview(refreshControl)
        
        // Add a pan gesture recognizer
        tableView.panGestureRecognizer.addTarget(self, action: #selector(handlePanGesture(_:)))
    }
    
    @objc private func handlePanGesture(_ gesture: UIPanGestureRecognizer) {
        if gesture.state == .ended {
            if refreshControl.state == .pulling {
                refreshControl.startRefreshing()
                loadData()
            }
        } else if gesture.state == .changed {
            // Do your logic to transition to pulling state
            refreshControl.state = .pulling
        }
    }
    
    private func loadData() {
        // Mock data loading
        DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
            self.refreshControl.stopRefreshing()
        }
    }

    // UITableViewDataSource methods
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 20
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = UITableViewCell()
        cell.textLabel?.text = "Row \(indexPath.row)"
        return cell
    }
}