玩轉 swift -- UIKit 之 UIColor

前言

UIColor類是UIKit中用來存儲顏色數據的一個類，想要清晰的瞭解這個類中的相關屬性、方法，則須要先了解一個名詞：顏色空間。

不一樣的設備處理顏色的方式是不一樣的, 每一個設備都有他所支持的顏色範圍, 在一個設備上產生的顏色可能在另外一臺設備上沒法提供.因此，不一樣的設備就可能會具備不一樣的顏色空間，去解析相應的顏色數據（好比UIColor）。

特別的，在iOS系統中，必須使用設備顏色空間(device color space)。

在iOS 10以前的iOS版本上，以及在iOS 10以前的iOS版本上連接的應用程序，能夠在兩個顏色空間之一中建立和返回顏色：

Device-Dependent Gray
Device-Dependent RGB複製代碼

iOS 10以後或以後鏈接，而且在iOS 10或更高版本上運行，則顏色將在擴展顏色空間中建立：

kCGColorSpaceExtendedGray
kCGColorSpaceExtendedSRGB複製代碼

在CoreGraphics中有個CGColorSpace類, 這個類能夠用來獲取不一樣的設備顏色空間，舉例(三個比較常見的顏色空間)以下：

// 一個device-dependent 灰度顏色空間
@available(iOS 2.0, *)
public func CGColorSpaceCreateDeviceGray() -> CGColorSpace
// 一個device-dependent RGB顏色空間
@available(iOS 2.0, *)
public func CGColorSpaceCreateDeviceRGB() -> CGColorSpace
// 一個device-dependent CMYK顏色空間
@available(iOS 2.0, *)
public func CGColorSpaceCreateDeviceCMYK() -> CGColorSpace複製代碼

而後還要了解的是 UIColor、CGColor、CIColor 之間的關係及轉化，本篇文章主要講 UIColor 的相關知識，這篇文章對於三者之間的關係講的很詳盡，本身就不重複造輪子了，假如你理解了顏色空間與顏色數據之間的關係，那麼這篇文章也就很好理解了。

進入正題(基於iOS 10)

1、建立系統顏色

extension UIColor {
    // 在淺色背景上顯示文本的系統顏色。
    open class var lightText: UIColor { get } 
    // 在深色背景上顯示文本的系統顏色。
    open class var darkText: UIColor { get } 
    // 分組表的背景的系統顏色。
    open class var groupTableViewBackground: UIColor { get }
}複製代碼

測試代碼以下：

// 測試建立系統顏色
func testCreateSystemColor() {

    // 顏色空間：UIExtendedGrayColorSpace 
    self.addImageView(color: UIColor.darkText);
    self.addImageView(color: UIColor.lightText);

    // 顏色空間：UIExtendedSRGBColorSpace
    self.addImageView(color: UIColor.groupTableViewBackground);
}

// 添加imageView
func addImageView(color: UIColor) {

    let imageView = UIImageView.init(frame: CGRect.init(x: 40, y: 80 + self.viewIndex * 40, width: 200, height: 20));
    imageView.backgroundColor = color;
    self.view.addSubview(imageView);
    print(color);
    self.viewIndex += 1;
}複製代碼

結果以下：

UIExtendedGrayColorSpace 0 1
UIExtendedGrayColorSpace 1 0.6
UIExtendedSRGBColorSpace 0.937255 0.937255 0.956863 1複製代碼

1

2、使用預約義顏色建立顏色對象

// 黑色
open class var black: UIColor { get } 
// 深灰
open class var darkGray: UIColor { get } 
// 淺灰
open class var lightGray: UIColor { get } 
// 白色
open class var white: UIColor { get }
// 灰色
open class var gray: UIColor { get } 
// 紅色
open class var red: UIColor { get } 
// 綠色
open class var green: UIColor { get } 
// 藍色
open class var blue: UIColor { get } 
// 藍綠色
open class var cyan: UIColor { get } 
// 黃色
open class var yellow: UIColor { get } 
// 紫紅色
open class var magenta: UIColor { get } 
// 橘黃色
open class var orange: UIColor { get } 
// 紫色
open class var purple: UIColor { get } 
// 褐色
open class var brown: UIColor { get } 
// 透明色
open class var clear: UIColor { get }複製代碼

測試代碼以下：

// 測試使用預約義顏色建立顏色對象
func testUsePreColorCreateColor() {

    // 顏色空間：UIExtendedGrayColorSpace
    self.addImageView(color: UIColor.black);
    self.addImageView(color: UIColor.darkGray);
    self.addImageView(color: UIColor.lightGray);
    self.addImageView(color: UIColor.white);
    self.addImageView(color: UIColor.gray);
    self.addImageView(color: UIColor.clear);

    // 顏色空間：UIExtendedSRGBColorSpace
    self.addImageView(color: UIColor.red);
    self.addImageView(color: UIColor.green);
    self.addImageView(color: UIColor.blue);
    self.addImageView(color: UIColor.cyan);
    self.addImageView(color: UIColor.yellow);
    self.addImageView(color: UIColor.magenta);
    self.addImageView(color: UIColor.orange);
    self.addImageView(color: UIColor.purple);
    self.addImageView(color: UIColor.brown);
}複製代碼

測試結果以下

UIExtendedGrayColorSpace 0 1
UIExtendedGrayColorSpace 0.333333 1
UIExtendedGrayColorSpace 0.666667 1
UIExtendedGrayColorSpace 1 1
UIExtendedGrayColorSpace 0.5 1
UIExtendedGrayColorSpace 0 0
UIExtendedSRGBColorSpace 1 0 0 1
UIExtendedSRGBColorSpace 0 1 0 1
UIExtendedSRGBColorSpace 0 0 1 1
UIExtendedSRGBColorSpace 0 1 1 1
UIExtendedSRGBColorSpace 1 1 0 1
UIExtendedSRGBColorSpace 1 0 1 1
UIExtendedSRGBColorSpace 1 0.5 0 1
UIExtendedSRGBColorSpace 0.5 0 0.5 1
UIExtendedSRGBColorSpace 0.6 0.4 0.2 1複製代碼

2

3、在特定顏色空間中建立自定義UIColor對象

// UIExtendedGrayColorSpace 灰度份量
public init(white: CGFloat, alpha: CGFloat)
// UIExtendedSRGBColorSpace HSB顏色空間份量
public init(hue: CGFloat, saturation: CGFloat, brightness: CGFloat, alpha: CGFloat)
// UIExtendedSRGBColorSpace RGB顏色空間份量
public init(red: CGFloat, green: CGFloat, blue: CGFloat, alpha: CGFloat)
// UIDisplayP3ColorSpace RGB份量
@available(iOS 10.0, *)
public init(displayP3Red: CGFloat, green: CGFloat, blue: CGFloat, alpha: CGFloat)複製代碼

測試代碼以下：

// 測試在特定顏色空間建立UIColor
func testCreateColorWithSpecialColorSpace() {

    self.addImageView(color: UIColor.init(white: 0.3, alpha: 1.0));
    self.addImageView(color: UIColor.init(hue: 0.3, saturation: 0.5, brightness: 0.7, alpha: 1.0));
    self.addImageView(color: UIColor.init(red: 0.3, green: 0.5, blue: 0.7, alpha: 1.0));
    self.addImageView(color: UIColor.init(displayP3Red: 0.3, green: 0.5, blue: 0.7, alpha: 1.0));
}複製代碼

結果以下：

UIExtendedGrayColorSpace 0.3 1
UIExtendedSRGBColorSpace 0.42 0.7 0.35 1
UIExtendedSRGBColorSpace 0.3 0.5 0.7 1
UIDisplayP3ColorSpace 0.3 0.5 0.7 1複製代碼

注意：iOS 10後，經過圖形堆棧擴展這種方式比以往支持廣色域的顯示設備更加容易。如今對UIKit擴展能夠在sRGB的色彩空間下工做，性能更好，也能夠在更普遍的色域來搭配sRGB顏色。

4、以現有的顏色數據建立UIColor對象

// 由指定的Quartz顏色生成一個UIcolor對象
public init(cgColor: CGColor)
// 由指定的Core Image顏色生成一個UIcolor對象
@available(iOS 5.0, *)
public init(ciColor: CIColor)
// 建立並返回一個與原Color相同顏色空間和組件值得顏色對象，並新添了透明度。
open func withAlphaComponent(_ alpha: CGFloat) -> UIColor複製代碼

測試代碼以下

// 測試 color to color
func testColorToColor() {

    // CGColor -> UIColor
    self.addImageView(color: UIColor.init(cgColor: CGColor.init(colorSpace: CGColorSpaceCreateDeviceCMYK(), components: [1,1,0,0,1])!));

    // CIColor -> UIColor
    self.addImageView(color: UIColor.init(ciColor: CIColor.gray()));

    // UIColor ->UIColor(+alpha)
    self.addImageView(color: UIColor.red.withAlphaComponent(0.5));
}複製代碼

測試結果以下：

kCGColorSpaceModelCMYK 1 1 0 0 1 
CIColor 0.5 0.5 0.5 1
UIExtendedSRGBColorSpace 1 0 0 0.5複製代碼

4

5、由Image轉爲Color

// image -> color
public init(patternImage image: UIImage)複製代碼

測試代碼以下:

// 測試 image -> color
func imageToColor() {

    let color = UIColor.init(patternImage: UIImage.init(named: "imageToColor")!)
    let imageView = UIImageView.init(frame: CGRect.init(x: 40, y: 80, width: 158, height: 154));
    imageView.backgroundColor = color;
    self.view.addSubview(imageView);
    print(color);
}複製代碼

測試結果以下：

kCGColorSpaceModelPattern 1複製代碼

5

建議：在實際項目中儘可能避免使用這種方式加載加圖片，由於這種加載方式會比直接加載圖片佔用更大的內存。

6、設置圖形上下文的繪圖顏色

// 同時設置畫筆顏色和填充顏色
open func set()
// 設置填充顏色
open func setFill()
// 設置畫筆顏色
open func setStroke()複製代碼

測試代碼以下：

// 測試設置圖形上下文的繪圖顏色
func testDrawColor() {

    let pathView = PathView.init(frame: self.view.bounds);
    self.view.addSubview(pathView);
}複製代碼

PathView.swift內：

override func draw(_ rect: CGRect) {

    let path = UIBezierPath();

    path.addArc(withCenter: self.center, radius: 100.0, startAngle: 0, endAngle: 180.0, clockwise: true);
    path.lineWidth = 5.0;
    // 設置填充顏色 
    UIColor.red.setFill();
    // 設置畫筆顏色
    UIColor.blue.setStroke();

    path.fill();
    path.stroke();
}複製代碼

測試結果：

6

7、檢索顏色信息

// 獲取與此UIColor相對應的Quartz顏色
open var cgColor: CGColor { get }

// 獲取與此UIColor相對應的Core Image封裝的顏色
@available(iOS 5.0, *)
open var ciColor: CIColor { get }

// 獲取灰度顏色空間中組成顏色的灰度份量 
@available(iOS 5.0, *)
open func getWhite(_ white: UnsafeMutablePointer<CGFloat>?, alpha: UnsafeMutablePointer<CGFloat>?) -> Bool

// 獲取HSB顏色空間中組成顏色的組件
@available(iOS 5.0, *)
open func getHue(_ hue: UnsafeMutablePointer<CGFloat>?, saturation: UnsafeMutablePointer<CGFloat>?, brightness: UnsafeMutablePointer<CGFloat>?, alpha: UnsafeMutablePointer<CGFloat>?) -> Bool

// 獲取RGB顏色空間中組成顏色的組件
@available(iOS 5.0, *)
open func getRed(_ red: UnsafeMutablePointer<CGFloat>?, green: UnsafeMutablePointer<CGFloat>?, blue: UnsafeMutablePointer<CGFloat>?, alpha: UnsafeMutablePointer<CGFloat>?) -> Bool複製代碼

測試代碼以下：

// 測試獲取color的相關信息
func testGetInfomationWithColor() {

    var r: CGFloat = 0;
    var g: CGFloat = 0;
    var b: CGFloat = 0;
    var a: CGFloat = 0;

    UIColor.red.getRed(&r, green: &g, blue: &b, alpha: &a);
    print("RGB份量---" + "r:" + String(describing: r) + " g:" + String(describing: g) + " b:" + String(describing: b) + " a:" + String(describing: a));

    var hh: CGFloat = 0;
    var ss: CGFloat = 0;
    var bb: CGFloat = 0;
    var aa: CGFloat = 0;

    UIColor.red.getHue(&hh, saturation: &ss, brightness: &bb, alpha: &aa);

    print("HSB份量---" + "hh:" + String(describing: hh) + " ss:" + String(describing: ss) + " bb:" + String(describing: bb) + " aa:" + String(describing: aa));

    var www: CGFloat = 0;
    var aaa: CGFloat = 0;

    UIColor.red.getWhite(&www, alpha: &aaa);

    print("灰度份量---" + "www:" + String(describing: www) + " aaa:" + String(describing: aaa));

    print("cgcolor---" + String(describing: UIColor.red.cgColor));

    print("cicolor---" + String(describing: UIColor.init(ciColor: CIColor.red()).ciColor));
    }複製代碼

測試結果：

RGB份量---r:1.0 g:0.0 b:0.0 a:1.0
HSB份量---hh:0.0 ss:1.0 bb:1.0 aa:1.0
灰度份量---www:0.509023487567902 aaa:1.0
cgcolor---<CGColor 0x6100000aa680> [<CGColorSpace 0x61000002f940> (kCGColorSpaceICCBased; kCGColorSpaceModelRGB; sRGB IEC61966-2.1; extended range)] ( 1 0 0 1 )
cicolor---(1 0 0 1)複製代碼

注意：UIColor的CGColor老是有效的，無論它是經過CGColor，CIColor，仍是其餘方法建立的，CGColor屬性都老是有效的；可是CIColor屬性就不老是有效的，只有當UIColor是經過CIColor建立的時候，他纔是有效的，不然訪問該屬性將會拋出異常

8、Color Literal

// 字面量顏色 不要直接調用
@nonobjc required public convenience init(colorLiteralRed red: Float, green: Float, blue: Float, alpha: Float)複製代碼

這個API，是Xcode提供的一個可視化顏色選擇器，不須要直接調用，使用方法以下：

一、設置顏色的時候輸入 color literal 會有智能提示以下：

二、回車後，會出現顏色選擇界面

三、能夠選擇一個想要的顏色，還能夠點擊下方的 Other ，選顏色蠟筆或者直接輸入顏色值。選完後在代碼裏就會有個小方塊。裏面填充的就是剛剛選的顏色,以下：

四、運行後結果以下:

五、實質上，小方塊就是這個API的替代顯示，複製整個函數代碼粘貼以下：

// 測試字面量初始化方法
func testLiteralInit() {

    self.addImageView(color: #colorLiteral(red: 0.1215686277, green: 0.01176470611, blue: 0.4235294163, alpha: 1));
}複製代碼

9、完畢

UIColor 這個類測試講解到這裏就結束了，在以後的時間裏，我會將swift下的相關類依次整理一下，溫故而知新！感興趣的童鞋，能夠關注個人我的博客網站http://www.wanglongshuai.com。