ios - 将颜色选择器添加到 iOS 应用程序

Question

我正在尝试使用 Xcode 5 向我的 iOS 应用程序添加颜色选择器。It appears that Xcode offers a color well via the Palettes Panel of Interface Builder ，但我找不到 Palettes Panel(除了该链接之外，我也找不到它的任何在线文档)。

该链接还建议可以通过编程方式添加 NSColorWell。我更喜欢使用 Interface Builder 路线，但如果那不是一个选项，欢迎提供示例代码。

Answer 1

我和你有同样的问题。不幸的是，iOS 没有内置的颜色选择器。这里和类似问题的其他答案主要使用第三方库或项目。我宁愿尽可能避免所有第三方的东西，这样我们就...

制作你自己的颜色选择器

有很多方法可以做到这一点，但这里有一个简单的例子来展示这个概念。我这样设置 Storyboard:

它有一个 UIView(这里是灰色)来显示选择的颜色，一个 UIImageView 来显示颜色选择，还有一个 UISlider选择颜色。我在 UIImageView 中使用了下图:

我用 12-spoke color wheel 的颜色制作了它使用屏幕截图和 Gimp 的颜色选择器工具。 Gimp 对于获取我们稍后将使用的颜色十六进制代码也很有用。

将 slider 的最小值和最大值设置为 0.5 和 13.5。稍后将 slider 值转换为整数将为图像中的每种颜色提供一个数字。从 0.5 开始而不是 0 使 slider 颜色更改位置与图像更好地匹配。

将 UI 元素连接到 View Controller 并使用以下代码将 slider 位置转换为颜色。

class ViewController: UIViewController {
 
    // RRGGBB hex colors in the same order as the image
    let colorArray = [ 0x000000, 0xfe0000, 0xff7900, 0xffb900, 0xffde00, 0xfcff00, 0xd2ff00, 0x05c000, 0x00c0a7, 0x0600ff, 0x6700bf, 0x9500c0, 0xbf0199, 0xffffff ]
    
    @IBOutlet weak var selectedColorView: UIView!
    @IBOutlet weak var slider: UISlider!
    @IBAction func sliderChanged(sender: AnyObject) {
        selectedColorView.backgroundColor = uiColorFromHex(colorArray[Int(slider.value)])
    }
   
    func uiColorFromHex(rgbValue: Int) -> UIColor {
        
        let red =   CGFloat((rgbValue & 0xFF0000) >> 16) / 0xFF
        let green = CGFloat((rgbValue & 0x00FF00) >> 8) / 0xFF
        let blue =  CGFloat(rgbValue & 0x0000FF) / 0xFF
        let alpha = CGFloat(1.0)
        
        return UIColor(red: red, green: green, blue: blue, alpha: alpha)
    }
}

现在如果你运行它，你可以通过前后移动 slider 来选择颜色。

变化

• 将 slider 置于图像上方并将轨道色调设置为透明。这给人一种自定义 UI 的感觉，而无需继承任何东西。

• 这是另一张图片，其中包含示例项目图片的浅色和深色变化。

let colorArray = [ 0x000000, 0x262626, 0x4d4d4d, 0x666666, 0x808080, 0x990000, 0xcc0000, 0xfe0000, 0xff5757, 0xffabab, 0xffabab, 0xffa757, 0xff7900, 0xcc6100, 0x994900, 0x996f00, 0xcc9400, 0xffb900, 0xffd157, 0xffe8ab, 0xfff4ab, 0xffe957, 0xffde00, 0xccb200, 0x998500, 0x979900, 0xcacc00, 0xfcff00, 0xfdff57, 0xfeffab, 0xf0ffab, 0xe1ff57, 0xd2ff00, 0xa8cc00, 0x7e9900, 0x038001, 0x04a101, 0x05c001, 0x44bf41, 0x81bf80, 0x81c0b8, 0x41c0af, 0x00c0a7, 0x00a18c, 0x00806f, 0x040099, 0x0500cc, 0x0600ff, 0x5b57ff, 0xadabff, 0xd8abff, 0xb157ff, 0x6700bf, 0x5700a1, 0x450080, 0x630080, 0x7d00a1, 0x9500c0, 0xa341bf, 0xb180bf, 0xbf80b2, 0xbf41a6, 0xbf0199, 0xa10181, 0x800166, 0x999999, 0xb3b3b3, 0xcccccc, 0xe6e6e6, 0xffffff]

• 使用一组 UIColors 以避免必须进行十六进制转换。

• 可以使用多个 UIView 而不是一个图像，然后直接从数组中设置颜色。

进一步研究

• Color Theory For Designers, Part 2: Understanding Concepts And Terminology
• Color Theory For Designers: Creating Your Own Color Palettes
• Simple swift color picker popover (iOS)