2014-02-24 47 views
12

我試圖使用Xcode 5將顏色選擇器添加到我的iOS應用程序。It appears that Xcode offers a color well via the Palettes Panel of Interface Builder但我找不到調色板面板(我也無法找到它的任何文檔超越該鏈接)。將顏色選擇器添加到iOS應用程序

該鏈接還暗示可以編程方式添加NSColorWell。我寧願去Interface Builder路由,但如果這不是一個選項示例代碼將受到歡迎。

+0

的可能重複[iOS版:我怎樣才能實現顏色選擇器到我的應用程序?(HTTP: //stackoverflow.com/questions/6987080/ios-how-can-i-implement-a-color-picker-into-my-app) – santhu

+1

@s anthu在SO/iOS中有幾個關於顏色選擇器的問題,但最近都沒有。您鏈接到的可能的欺騙是2-1/2歲,並沒有考慮到NSColorWell或與Palettes Panel I鏈接的可能性。 – ericsoco

+2

NSColorWell適用於osx,不適用於ios。 – santhu

回答

2

還有另一個很酷的顏色選擇器kartech。它有很棒的用於選擇顏色的UI。此外,您可以將顏色標記爲喜歡的。鏈接是here

截圖:

enter image description here

5

我想我應該把我的顏色選擇器成環。我在我的應用程序You Doodle中使用它,我花了幾個星期的時間在應用程序中進行測試。它包含一個示例項目,向您展示如何開始使用它,並根據MIT許可證開源。它支持任何設備(iOS 6+),任何分辨率和縱向和橫向。通過色調,顏色輪和導入紋理,以及刪除和移動收藏夾到前端,可以支持收藏夾,最近點,最近點。

我試着將所有其他顏色選擇器的優點組合起來,並確保MIT許可證允許無障礙地集成到任何項目中。

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

截圖:

DRColorPicker iPhone DRColorPicker iPad DRColorPicker iPhone DRColorPicker iPad DRColorPicker iPhone DRColorPicker iPad

20

我有同樣的q作爲你的問題。不幸的是,iOS中沒有內置顏色選擇器。這裏的其他答案和類似的問題主要使用第三方庫或項目。我寧願避免所有的第三方的東西只要有可能,讓我們留下...

使自己的顏色選擇器

有很多方法,你可以做到這一點,但這裏是一個簡單的例子來說明這個概念。我建立了我的故事板是這樣的:

enter image description here

它有一個UIView(這裏灰色)來顯示所選擇的顏色,UIImageView以顯示顏色選擇,以及UISlider來選擇顏色。我用下面的圖像中的UIImageView

enter image description here

我從12-spoke color wheel的使用截屏和芯線的顏色選擇器工具的顏色做到了。 GIMP對於獲取稍後將使用的顏色十六進制代碼也很有用。

將Slider的最小值和最大值設置爲0.5和13.5。稍後將滑塊值轉換爲整數將爲我們圖像中的每種顏色提供一個數字。從0.5開始而不是0使滑塊顏色更改位置與圖像更好地匹配。

enter image description here

胡克UI元素的視圖控制器和使用下面的代碼到滑塊位置轉換爲顏色。

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

現在,如果您運行它,您可以通過前後移動滑塊來選擇顏色。

enter image description here

變化
  • 位置上的圖像的頂部滑塊,並設置軌道色調爲透明。這給了它自定義UI的感覺,而無需子類化任何東西。

enter image description here

enter image description here

  • 下面是示例項目圖像的較亮和較暗的變化的另一圖像。

enter image description here

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而不是圖像,然後直接從數組中設置顏色。

進一步研究