如何在 Swift 中实现颜色选择器弹出窗口？

IOS

2024-07-31 18:14:46

如何在 Swift 中轻松实现颜色选择器弹出窗口？

你是否正在为如何在 iOS 应用中实现一个简洁高效的颜色选择器而烦恼？你是否厌倦了那些过时的 Objective-C 代码，渴望找到一个更现代、更 Swift 化的解决方案？

在本文中，我们将探讨如何在 Swift 中轻松实现一个颜色选择器弹出窗口。我们将探索 UIKit 提供的内置工具 UIColorWell，并提供清晰易懂的代码示例，帮助你快速将颜色选择功能集成到你的应用中。

为什么选择 UIColorWell？

你可能会问，为什么我们不使用自定义视图或者第三方库来实现颜色选择器呢？

UIColorWell 是 iOS SDK 中专门用于颜色选择的视图组件，它提供了以下几个显著的优势:

原生支持，简单易用 : UIColorWell 是 UIKit 的一部分，无需引入任何第三方库，你就能直接在项目中使用它。
与系统风格保持一致 : UIColorWell 会自动适配系统的外观和主题，保证你的应用在不同 iOS 版本和设备上都拥有统一的外观。
功能强大且可定制 : UIColorWell 支持颜色面板、滑块、色值输入等多种交互方式，同时也允许你自定义其外观和行为。

使用 UIColorWell 创建颜色选择器

现在，让我们通过一个简单的示例，来演示如何使用 UIColorWell 创建一个颜色选择器弹出窗口：

假设我们有一个简单的视图控制器，其中包含一个用于显示颜色的视图 colorView 和一个用于触发颜色选择器的按钮 chooseColorButton。

创建 UIColorWell 实例 :

首先，我们需要创建一个 UIColorWell 实例，并设置其大小和位置。为了方便演示，我们将其宽度和高度都设置为 250 points。

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var colorView: UIView!
    @IBOutlet weak var chooseColorButton: UIButton!
    var selectedColor: UIColor = .white

    override func viewDidLoad() {
        super.viewDidLoad()
        colorView.backgroundColor = selectedColor
    }

    @IBAction func chooseColorButtonTapped(_ sender: UIButton) {
        let colorPicker = UIColorWell(frame: CGRect(x: 0, y: 0, width: 250, height: 250))
        // ... 后续步骤
    }
    // ...
}

配置 UIColorWell 属性 :

接下来，我们可以根据需要配置 UIColorWell 的一些属性，例如：

title: 设置颜色选择器的标题。
selectedColor: 设置默认选中的颜色。
supportsAlpha: 设置是否支持选择透明度。

@IBAction func chooseColorButtonTapped(_ sender: UIButton) {
    // ... (创建 UIColorWell 实例)

    colorPicker.title = "选择颜色"
    colorPicker.selectedColor = selectedColor
    colorPicker.supportsAlpha = true
    // ... 后续步骤
}

处理颜色变化事件 :

我们需要监听 UIColorWell 的 valueChanged 事件，以便在用户选择新颜色时更新我们的视图。

@IBAction func chooseColorButtonTapped(_ sender: UIButton) {
    // ... (创建 UIColorWell 实例，配置属性)

    colorPicker.addTarget(self, action: #selector(colorPickerValueChanged(_:)), for: .valueChanged)
    // ... 后续步骤
}

@objc func colorPickerValueChanged(_ sender: UIColorWell) {
    selectedColor = sender.selectedColor
    colorView.backgroundColor = selectedColor
}

将 UIColorWell 嵌入到弹出窗口 :

为了让颜色选择器以弹出窗口的形式呈现，我们需要将 UIColorWell 嵌入到一个 UIViewController 中，并将该控制器以 popover 的形式展现。

@IBAction func chooseColorButtonTapped(_ sender: UIButton) {
    // ... (创建 UIColorWell 实例，配置属性，处理颜色变化事件)

    let popoverVC = UIViewController()
    popoverVC.preferredContentSize = colorPicker.frame.size
    popoverVC.view.addSubview(colorPicker)

    popoverVC.modalPresentationStyle = .popover
    guard let popover = popoverVC.popoverPresentationController else { return }
    popover.sourceView = sender
    popover.sourceRect = sender.bounds

    present(popoverVC, animated: true)
}

适配 iPhone 设备 :

默认情况下，popover 在 iPhone 上会以全屏的形式呈现。为了保持体验的一致性，我们需要在 UIPopoverPresentationControllerDelegate 的 adaptivePresentationStyle 方法中将 popover 的样式设置为 .none。
```
extension ViewController: UIPopoverPresentationControllerDelegate {
    func adaptivePresentationStyle(for controller: UIPresentationController, traitCollection: UITraitCollection) -> UIModalPresentationStyle {
        return .none
    }
}
```
别忘了在 chooseColorButtonTapped 方法中设置 popover.delegate = self。