iOS 控件封装(又名拧螺丝)之排序按钮的开发

针对iOS控件封装之排序按钮的开发，我们可以分为以下四个步骤：

1.需求分析

首先，我们需要明确排序按钮的具体需求：

• 排序按钮需要展示一个排序标识，并且支持升序和降序两种排序方式。
• 当用户点击排序按钮时，需要切换排序方式，并且重新加载数据。
• 排序按钮的样式需要和当前主题相符合。

2.设计方案

根据需求，我们需要设计一套组件使用方便且易于扩展的控件方案：

• 我们可以创建一个名为SortingButton的自定义按钮控件，用于展示排序标识和处理排序事件。
• 在SortingButton内部，我们可以使用一个UIImageView来显示排序标识图标，根据升序或降序状态来设置不同的图标。
• 在SortingButton中，我们可以通过添加点击事件来处理排序切换以及重新加载数据的逻辑。

3.实现代码

基于以上设计，我们可以实现如下的代码示例：

import UIKit

enum SortingType {
    case ascending
    case descending
}

class SortingButton: UIButton {

    var sortingType: SortingType = .ascending {
        didSet {
            updateSortingIcon()
        }
    }

    var onSortingChange: ((SortingType) -> Void)?

    private let sortingIconView: UIImageView = {
        let imageView = UIImageView()
        imageView.contentMode = .scaleAspectFit
        return imageView
    }()

    override init(frame: CGRect) {
        super.init(frame: frame)
        setupView()
        setupGesture()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setupView()
        setupGesture()
    }

    private func setupView() {
        addSubview(sortingIconView)
        sortingIconView.translatesAutoresizingMaskIntoConstraints = false
        sortingIconView.centerYAnchor.constraint(equalTo: centerYAnchor).isActive = true
        sortingIconView.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -8).isActive = true
        sortingIconView.widthAnchor.constraint(equalToConstant: 12).isActive = true
        sortingIconView.heightAnchor.constraint(equalToConstant: 8).isActive = true

        updateSortingIcon()
    }

    private func setupGesture() {
        addTarget(self, action: #selector(onTapButton), for: .touchUpInside)
    }

    @objc func onTapButton() {
        switch sortingType {
        case .ascending:
            sortingType = .descending
        case .descending:
            sortingType = .ascending
        }
        onSortingChange?(sortingType)
    }

    private func updateSortingIcon() {
        let imageName = sortingType == .ascending ? "sorting_asc" : "sorting_desc"
        sortingIconView.image = UIImage(named: imageName)
    }
}

以上代码实现了一个SortingButton自定义按钮控件，UI上包含排序标识的图标，用户点击按钮时可以切换排序方式，并且通过回调函数通知外部对象。

示例1：更新列表数据的排序

import UIKit

class SortingDemoViewController: UIViewController {

    private let sortingButton: SortingButton = {
        let button = SortingButton()
        button.setTitle("按名称排序", for: .normal)
        button.setTitleColor(.black, for: .normal)
        return button
    }()

    private let tableView: UITableView = {
        let tableView = UITableView()
        // 设置tableView的代理和数据源等其他属性
       return tableView
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.addSubview(sortingButton)
        view.addSubview(tableView)
        // 添加约束
        // ...

        // 注册排序按钮的回调函数
        sortingButton.onSortingChange = { [unowned self] sortingType in
            switch sortingType {
            case .ascending:
                // 按名称升序排序，并更新tableView数据
                self.updateTableDataByNameAsc()
            case .descending:
                // 按名称降序排序，并更新tableView数据
                self.updateTableDataByNameDesc()
            }
        }
    }
}

以上代码示例为SortingDemoViewController控制器添加了一个名为sortingButton的排序按钮和一个名为tableView的列表视图，当用户点击排序按钮时，可以切换排序方式，然后更新列表视图的数据。

示例2：切换主题样式的排序按钮

import UIKit

class ThemingViewController: UIViewController {

    private let sortingButton: SortingButton = {
        let button = SortingButton()
        return button
    }()

    private let themeSwitch: UISwitch = {
        let switchControl = UISwitch()
        switchControl.tintColor = .darkGray
        switchControl.onTintColor = .systemGreen
        return switchControl
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.addSubview(sortingButton)
        view.addSubview(themeSwitch)
        // 添加约束...

        // 注册主题切换事件
        themeSwitch.addTarget(self, action: #selector(onSwitchTheme(_:)), for: .valueChanged)
        // 根据主题切换状态设置排序按钮的样式
        setTheme(isDark: themeSwitch.isOn)
    }

    @objc func onSwitchTheme(_ sender: UISwitch) {
        let isDark = sender.isOn
        setTheme(isDark: isDark)
    }

    private func setTheme(isDark: Bool) {
        let fontColor = isDark ? UIColor.white : UIColor.black
        let backgroundColor = isDark ? UIColor.black : UIColor.white

        // 设置排序按钮的样式
        sortingButton.setTitleColor(fontColor, for: .normal)
        sortingButton.backgroundColor = backgroundColor

        // 设置图标色调
        sortingButton.tintColor = fontColor

        // 设置开关控件样式
        themeSwitch.thumbTintColor = fontColor
        themeSwitch.backgroundColor = backgroundColor
    }
}

以上代码示例为ThemingViewController控制器添加了一个排序按钮和一个主题开关控件，当用户切换主题时，可以改变排序按钮和开关控件的外观色调。这里需要注意的是：在setTheme方法调用时，代码常量fontColor和backgroundColor会根据主题色调进行更换，而后在排序按钮属性会设置字体色调、背景色调，对图标调用tintColor属性，从而改变按钮的主题或样式。