向iOS应用程序添加颜色选择器 [英] Add a color picker to an iOS app

问题描述

我想使用Xcode 5为我的iOS应用程序添加颜色选择器。

它有一个 UIView （此处为灰色）以显示所选颜色， UIImageView 显示颜色选择， a UISlider 选择颜色。我在 UIImageView 中使用了以下图片：

我是从

将UI元素挂接到View控制器，并使用以下代码将滑块位置转换为颜色。

  class ViewController：UIViewController {
 
 // RRGGBB十六进制颜色与图像的顺序相同
让colorArray = [0x000000处，0xfe0000，0xff7900，0xffb900，0xffde00，0xfcff00，0xd2ff00，0x05c000，0x00c0a7，0x0600ff，0x6700bf，0x9500c0，0xbf0199，0XFFFFFF] 
 
 @IBOutlet弱VAR selectedColorView：的UIView ！ 
 @IBOutlet weak var slider：UISlider！ 
 @IBAction FUNC sliderChanged（发件人：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）> / 0xFF 
 let blue = CGFloat（rgbValue& 0x0000FF）/ 0xFF 
让alpha = CGFloat（1.0）
 
 return UIColor（红色： blue，alpha：alpha）
} 
} 
  

，您可以通过来回滑动滑块来选择颜色。

变化

• 将滑块置于图像顶部，并将轨道色调设置为透明。这给了它一个自定义UI的感觉，而不必子类化任何东西。

• 这里是示例项目图片的变化更浅，更深的另一个图片。

 让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数组避免进行十六进制转换。




• 可以使用多个UIViews而不是图像，颜色直接从数组。

进一步研究

• 颜色理论对于设计师，第2部分：了解概念和术语


• 设计师色彩理论：创建您自己的调色板


a href =http://stackoverflow.com/questions/27208386/simple-swift-color-picker-popover-ios>简单的快速颜色选择器弹出框（iOS）

I'm trying to add a color picker to my iOS application, using Xcode 5. It appears that Xcode offers a color well via the Palettes Panel of Interface Builder, but I can't find the Palettes Panel (nor can I find any documentation of it online beyond that link).

That link also suggests an NSColorWell can be added programatically. I'd prefer to go the Interface Builder route, but if that's not an option sample code would be welcome.

解决方案

I had the same question as you. It's unfortunate that there is no built in color picker for iOS. The other answers here and for similar questions mainly use third party libraries or projects. I prefer to avoid all the third party stuff whenever possible, so that leaves us with...

Make your own color picker

There are many ways you could do it, but here is a simple example to show the concept. I set up my story board like this:

It has a UIView (grey here) to show the chosen color, a UIImageView to show the color choices, and a UISlider to choose the color. I used the following image in the UIImageView:

I made it from the colors of a 12-spoke color wheel using a screen shot and Gimp's color picker tool. Gimp is also useful for getting the color hex codes we will use later.

Set the min and max values for the Slider to 0.5 and 13.5. Converting the slider values to integers later will give one number for each of the colors in our image. Starting at 0.5 rather than 0 makes the slider color change location match the image better.

Hook up the UI elements to the View Controller and use the following code to convert the slider position to colors.

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

Now if you run it, you can choose the color by moving the slider back and forth.

Variations

• Position the slider on top of the image and set the track tints to transparent. This gives it the feel of a custom UI without having to subclass anything.

• Here is another image with lighter and darker variations of the example project image.

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]

• Use an array of UIColors to avoid having to do the hex conversion.

• Could use multiple UIViews rather than an image, and then set the colors directly from the array.

Further study

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

这篇关于向iOS应用程序添加颜色选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！