适用于 macOS 应用程序的易于使用的选择渐变颜色组件
TNGradientPickerSlider 是一个即用型 AppKit 组件，可让您的用户选择多种颜色来为您的 macOS 应用程序构建渐变。
✨ 特点
- 通过单击轨道添加多种颜色来构建渐变
- 添加颜色时直观地看到轨道上的渐变效果如何
- 实时颜色选择器
- 通过将颜色拖出轨道来删除颜色
- 轨道 UI + 手柄可配置
要求
- macOS 11.0+
- Xcode 13+
- 斯威夫特 5.4+
沟通
- 如果您发现错误，请提出问题。
- 如果您有功能请求，请提出问题。
- 如果您想做出贡献，请提交拉取请求。
安装
斯威夫特包管理器
Swift Package Manager是一个用于管理 Swift 代码分发的工具。它与 Swift 构建系统集成，可自动执行下载、编译和链接依赖项的过程。
使用 Swift Package Manager 构建 SnapKit 需要 Xcode 11+。
要使用 Swift Package Manager 将 TNGradientPickerSlider 集成到您的 Xcode 项目中，请将其添加到您的 的依赖项值中Package.swift：
dependencies: [
.package(url: "https://github.com/frederik-jacques/TNGradientPickerSlider.git", .upToNextMajor(from: "1.0.0"))
]
手动
如果您不想使用 SPM，可以手动将 TNGradientPickerSlider 集成到您的项目中。
用法
快速开始
使用 TNGradientPickerSlider 非常简单，只需按照以下 4 个步骤操作即可！
- 添加
import TNGradientPickerSlider到文件顶部 - 创建一个 数组
TNGradientColor，其中包含要在轨道上显示的初始颜色 - 创建一个实例
TNGradientPickerSliderViewController并将其添加为子视图控制器。 - 将其添加到视图层次结构并设置自动布局约束。
- 注册一些对象作为
delegateTNGradientPickerSliderViewController 的。每当渐变颜色数组发生变化时，此类都会收到所需的信息，以便您可以更新自己的 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
}
实现委托方法，以便您可以使用所选颜色更新您自己的 UI。
extension ViewController: GradientSliderViewControllerDelegate {
func gradientSliderViewController(_ viewController: TNGradientPickerSliderViewController, didUpdate gradientColors: [TNGradientColor]) {
demoView.update(gradientColors: gradientColors)
}
}
就是这样！
配置
当您创建 的实例时，TNGradientPickerSliderViewController您可以传入TNGradientPickerSliderConfiguration.
该TNGradientPickerSliderConfiguration结构有一个静态方法standard()，它将为您提供演示视频中所示的样式。track您可以更改和 的外观color handles。
追踪
轨道是您添加颜色手柄的视觉部分。
要创建不同的配置，请创建一个实例TNGradientPickerSliderConfiguration.Track并填写必要的属性。
可用属性：
- 高度
- 边框颜色
- 边框宽度
彩色手柄
颜色句柄是保存您添加到轨道的颜色信息的视图。
要创建不同的配置，请创建一个实例TNGradientPickerSliderConfiguration.ColorHandle并填写必要的属性。
可用属性：
- 半径
- 内半径
- 外圆颜色
- 外圆边框颜色
- 外圆边框宽度
- 内圆边框颜色
- 内圆边框宽度
执照
TNGradientPickerSlider 在 MIT 许可下发布。有关详细信息，请参阅许可证。
