macOS颜色面板插件接口NSColorPicker
macOS颜色面板插件接口NSColorPicker

macOS颜色面板插件接口NSColorPicker

NSColorPicker 是 macOS AppKit 框架中系统颜色面板(NSColorPanel)的插件接口,允许创建自定义的颜色选择器模块,扩展用户可选颜色的来源和方式。

它并不是一个普通的颜色控件,而是一个开发者用来自定义颜色选择器行为的抽象类,属于插件机制的一部分。

架构背景

macOS 系统中,点击 NSColorWell 会弹出颜色面板(NSColorPanel),该面板的左上角有多个选项卡:滑块、调色板等。

这些选项卡就是由多个 NSColorPicker 插件子类提供的,也可以添加自己的。

类定义(简化)

class NSColorPicker: NSObject {
    init?(pickerMask: NSColorPanel.Options, colorPanel: NSColorPanel)

    var view: NSView { get }

    func insertNewButtonImage() -> NSImage!
    func provideNewButtonImage() -> NSImage!

    func supportsMode(_ mode: NSColorPanel.Mode) -> Bool
    func setMode(_ mode: NSColorPanel.Mode)

    func colorChanged(_ sender: Any?)
}

必须创建其子类,实现一个自定义颜色选择 UI(通常是一个 NSView),并将它注册到 NSColorPanel。

实现NSColorPicker

利用NSColorPicker会实现一个颜色面板的新“页签”,和系统默认的“滑块”、“光谱”等一样,在 NSColorPanel 中自动出现,支持自定义颜色逻辑(比如品牌色、随机色、HSV 面板等)。

重要提示:下面只是一个流程介绍,实际上并不能实现真正的NSColorPicker插件效果,目前也没有比较好的教程可以实现NSColorPicker插件。

1、创建Cocoa Bundle

1、打开Xcode – File -New – Project。

2、选择 macOS – Framework & Library – Bundle。

3、命名并创建 .bundle 插件项目。

2、创建 NSColorPicker 的子类

import AppKit

class MyColorPicker: NSColorPicker {
    
    private let colorPanel: NSColorPanel
    private var customView: NSView!

    override init?(pickerMask: NSColorPanel.Options, colorPanel: NSColorPanel) {
        self.colorPanel = colorPanel
        super.init(pickerMask: pickerMask, colorPanel: colorPanel)
        setupUI()
    }

    private func setupUI() {
        let view = NSView(frame: NSRect(x: 0, y: 0, width: 200, height: 200))

        let button = NSButton(title: "随机颜色", target: self, action: #selector(setRandomColor))
        button.frame = NSRect(x: 20, y: 80, width: 160, height: 40)
        view.addSubview(button)

        customView = view
    }

    override var view: NSView {
        return customView
    }

    @objc func setRandomColor() {
        let randomColor = NSColor(
            red: CGFloat.random(in: 0...1),
            green: CGFloat.random(in: 0...1),
            blue: CGFloat.random(in: 0...1),
            alpha: 1.0
        )
        colorPanel.color = randomColor
    }

    override func insertNewButtonImage() -> NSImage! {
        return NSImage(systemSymbolName: "paintpalette", accessibilityDescription: nil)
    }

    override func provideNewButtonImage() -> NSImage! {
        return insertNewButtonImage()
    }
}

3、修改Info.plist注册插件

添加key:

<key>NSColorPicker</key>
<array>
    <string>MyColorPicker</string>
</array>

确保类名和 plist 注册名称一致。

如果没有Info.plist文件,则参考《Xcode项目Info.plist文件位置》新增Info.plist文件。

4、构建设置

在 Xcode 中 Target 的 Build Settings 中确保:

1、Mach-O Type 是 Bundle。

2、Defines Module 设置为 YES。

3、Skip Install 设置为 NO(是插件,不是 App)。

5、构建.bundle

点击Xcode上方的Product – Build,或者按Command + B进行构建。

构建完成后,会出现 .bundle 文件,位置在:

~/Library/Developer/Xcode/DerivedData/YourProjectName-xxxx/Build/Products/Debug/MyColorPicker.bundle

可以在访达中,按Command + Shift + G前往路径:

~/Library/Developer/Xcode/DerivedData/

在DerivedData文件夹中,找到项目名称文件夹。

在Build – Products – Debug 文件夹中,找到MyColorPicker.bundle。

6、安装插件

可以将 .bundle 手动拷贝到系统插件目录:

~/Library/ColorPickers/

如果没有这个目录,需要手动创建:

mkdir -p ~/Library/ColorPickers

然后把编译好的 .bundle 拖进去。

7、打开系统颜色面板

可以运行任意一个 macOS 支持颜色面板的 App(如 TextEdit、Keynote、Xcode),打开颜色选择器(⌘Shift+C) → 检查左上角是否出现 picker 插件图标。

如果看到自定义的“随机颜色”按钮,那就成功了!

8、常见问题

1、插件不显示:确保 Info.plist 注册了类名、拷贝路径正确。

2、不执行回调:确保 button 使用了 @objc 方法,target = self。

3、无法识别 NSColorPanel:只适用于 AppKit(macOS),不适用于 SwiftUI。

4、Swift 项目无法被系统识别:确保使用 Objective-C 兼容构建方式或写桥接头文件。

注意事项

NSColorPicker 是面向插件开发者的高级 API,普通应用开发者几乎不会直接用它。

使用它需要注册为一个插件(通常是 .bundle 文件)。

SwiftUI、普通 App 开发中推荐用 NSColorWell + NSColorPanel 或 ColorPicker(SwiftUI)。

总结

NSColorPicker是一个抽象类,需要子类化。为 NSColorPanel 添加自定义颜色选择器。

属于插件式开发,比较高级,内置调色板、滑块、光谱等都是 NSColorPicker 的子类。

相关文章

1、mac颜色选择控件NSColorWell:https://fangjunyu.com/2025/07/01/mac%e9%a2%9c%e8%89%b2%e9%80%89%e6%8b%a9%e6%8e%a7%e4%bb%b6nscolorwell/

2、Xcode项目Info.plist文件位置:https://fangjunyu.com/2024/12/08/xcode%e9%a1%b9%e7%9b%aeinfo-plist%e6%96%87%e4%bb%b6%e4%bd%8d%e7%bd%ae/

3、GitHub 项目MaterialDesignColorPicker:https://github.com/johnyanarella/MaterialDesignColorPicker

4、GitHub 项目color-picker-plus:https://github.com/viktorstrate/color-picker-plus

   

如果您认为这篇文章给您带来了帮助,您可以在此通过支付宝或者微信打赏网站开发者。

欢迎加入我们的 微信交流群QQ交流群,交流更多精彩内容!
微信交流群二维码 QQ交流群二维码

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注