添加颜色select器到iOS应用程序

我尝试使用Xcode 5将颜色select器添加到我的iOS应用程序中。 看起来Xcode通过界面生成器的Palettes Panel提供了一种颜色 ,但是我找不到调色板面板(我也找不到任何文档它在线以外的链接)。

该链接还表明NSColorWell可以编程方式添加。 我宁愿去接口生成器的路线,但如果这不是一个选项示例代码将受到欢迎。

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

做你自己的颜色select器

有很多方法可以做到这一点,但这里是一个简单的例子来展示这个概念。 我build立了这样的故事板:

在这里输入图像说明

它有一个显示所选颜色的UIView (灰色),一个显示颜色select的UIImageView以及一个select颜色的UISlider 。 我在UIImageView使用了以下图像:

在这里输入图像说明

我使用屏幕截图和Gimp的拾色器工具从12辐色轮的颜色中做出的。 GIMP对于获取稍后将使用的颜色hex代码也很有用。

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

在这里输入图像说明

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

 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) } } 

现在,如果您运行它,您可以通过前后移动滑块来select颜色。

在这里输入图像说明

变化

  • 将滑块置于图像顶部,并将轨道色调设置为透明。 这给了它自定义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来避免必须执行hex转换。

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

进一步研究

  • devise师色彩理论,第2部分:理解概念和术语
  • 颜色理论devise师:创build自己的调色板
  • 简单的快速颜色select器popup(iOS)

我以为我会把我的选色器扔进戒指里。 我使用它在我的应用程序, 你涂鸦 ,我花了几个星期,并在应用程序中testing它。 它包含一个示例项目,向您展示如何开始使用它,并根据MIT许可证开源。 它支持任何设备(iOS 6+),任何分辨率和肖像和风景。 collections夹,最近,色调,色轮和导入纹理,以及删除和移动collections夹前面的支持。

我试图把所有其他颜色select器的优点组合起来,并确保MIT许可证允许无障碍地集成到任何项目中。

Github: https //github.com/jjxtra/DRColorPicker

截图:

DRColorPicker iPhoneDRColorPicker iPadDRColorPicker iPhoneDRColorPicker iPadDRColorPicker iPhoneDRColorPicker iPad

还有另一个由卡丁车制作的很酷的颜色select器。 它有真棒用户界面的颜色select。 此外,你可以标记颜色为最喜欢的。 链接在这里 。

截图:

在这里输入图像说明