TNGradientPickerSlider 是一个即用型的 AppKit 组件，允许用户选择多个颜色，从而为您的 macOS 应用程序构建渐变色。

• 通过点击轨道来添加多个颜色以构建渐变色
• 在添加颜色时，可以直观地看到轨道上的渐变效果
• 实时颜色选择器
• 通过将颜色拖出轨道来移除它们
• 轨道 UI + 控点可以配置

• 要求
• 交流
• 安装
• 用法
• 鸣谢
• 许可证

• macOS 11.0+
• Xcode 13+
• Swift 5.4+

• 如果您发现错误，请打开一个 issue。
• 如果您有功能请求，请打开一个 issue。
• 如果您想贡献代码，请提交一个 pull request。

Swift Package Manager 是一个用于管理 Swift 代码分发的工具。它与 Swift 构建系统集成，可以自动执行下载、编译和链接依赖项的过程。

需要 Xcode 11+ 才能使用 Swift Package Manager 构建 SnapKit。

要使用 Swift Package Manager 将 TNGradientPickerSlider 集成到您的 Xcode 项目中，请将其添加到您的 Package.swift 文件的 dependencies 值中

dependencies: [
    .package(url: "https://github.com/frederik-jacques/TNGradientPickerSlider.git", .upToNextMajor(from: "1.0.0"))
]

如果您不喜欢使用 SPM，您可以手动将 TNGradientPickerSlider 集成到您的项目中。

使用 TNGradientPickerSlider 非常简单，只需按照以下 4 个步骤操作即可！

1. 在文件的顶部添加 import TNGradientPickerSlider
2. 创建一个 TNGradientColor 数组，其中包含您想要在轨道上显示的初始颜色
3. 创建一个 TNGradientPickerSliderViewController 的实例，并将其添加为子视图控制器。
4. 将其添加到视图层次结构并设置您的 AutoLayout 约束。
5. 将某个对象注册为 TNGradientPickerSliderViewController 的 delegate。每当渐变颜色数组发生更改时，此类将接收所需的信息，以便您可以更新自己的 UI。

import TNGradientPickerSlider

override func viewDidLoad() {
    super.viewDidLoad()
    
    // 1. Create an array which hold the initial colors you want to show on the track
    let initialGradientColors = [
        TNGradientColor(location: 0.0, color: NSColor.red),
        TNGradientColor(location: 1.0, color: NSColor.blue)
    ]
    
    // 2. Create the view controller
    let gradientSliderViewController = TNGradientPickerSliderViewController(configuration: TNGradientPickerSliderConfiguration.standard(), gradientColors: initialGradientColors)
    
    // 3. Add it as a child view controller of the current view controller
    addChild(gradientSliderViewController)
    
    // 4. Add it to the view hierarchy + setup the constraints
    view.addSubview(gradientSliderViewController.view)
    
    gradientSliderViewController.view.translatesAutoresizingMaskIntoConstraints = false
    
    NSLayoutConstraint.activate([
        gradientSliderViewController.view.widthAnchor.constraint(equalToConstant: 200),
        gradientSliderViewController.view.heightAnchor.constraint(equalToConstant: 28),
        gradientSliderViewController.view.centerXAnchor.constraint(equalTo: view.centerXAnchor),
        gradientSliderViewController.view.centerYAnchor.constraint(equalTo: view.centerYAnchor),
    ])
    
    // 5. Register some object to be the delegate which will receive information when the colors array has changed.
    gradientSliderViewController.delegate = self
}

实现 delegate 方法，以便您可以使用选择的颜色更新自己的 UI。

extension ViewController: GradientSliderViewControllerDelegate {

   func gradientSliderViewController(_ viewController: TNGradientPickerSliderViewController, didUpdate gradientColors: [TNGradientColor]) {
    
       demoView.update(gradientColors: gradientColors)    
   }
   
}

就是这样！

创建 TNGradientPickerSliderViewController 的实例时，可以传入 TNGradientPickerSliderConfiguration。

TNGradientPickerSliderConfiguration 结构体有一个静态方法 standard()，它会为您提供演示视频中看到的样式。您可以更改 track 和 color handles 的外观。

轨道是您添加颜色控点的可视部分。

要创建不同的配置，请创建 TNGradientPickerSliderConfiguration.Track 的实例并填写必要的属性。

可用属性

• 高度 (height)
• 边框颜色 (borderColor)
• 边框宽度 (borderWidth)

颜色控点是保存您添加到轨道上的颜色信息的视图。

要创建不同的配置，请创建 TNGradientPickerSliderConfiguration.ColorHandle 的实例并填写必要的属性。

可用属性

• 半径 (radius)
• 内半径 (innerRadius)
• 外圆颜色 (outerCircleColor)
• 外圆边框颜色 (outerCircleBorderColor)
• 外圆边框宽度 (outerCircleBorderWidth)
• 内圆边框颜色 (innerCircleBorderColor)
• 内圆边框宽度 (innerCircleBorderWidth)

• Frederik Jacques (@thenerd_be)
• Louis D'hauwe (@LouisDhauwe) 提供的 RGB/HSV 代码

TNGradientPickerSlider 在 MIT 许可下发布。有关详细信息，请参阅 LICENSE。