顏色作為UI最基本的要素之一,是構(gòu)建界面必不可少的部分。iOS上有三個(gè)framework都提供了顏色類型,分別是“Core Image”的 "CIColor"、“ Quartz Core”中的“CoreGraphic”提供的"CGColor"以及這里要介紹的"UIColor"。
所以UIKit提供的元素,比如各種View,各種字體等的顏色設(shè)置,我們都可以通過(guò)UIColor來(lái)進(jìn)行。 UIColor主要分成兩類色系:
- 灰度色,也就是通常說(shuō)的黑白色
- RGB彩色,用RGB或者HSB加上特別度a組成的彩色
所以UIColor的使用和在CSS或者其他界面組件一樣,既有常見(jiàn)顏色的定義,也可以自己根據(jù)aRGB也可以根據(jù)aHSB調(diào)制特定的顏色。
0. 使用既定的常用色
UIColor定義了一些最常見(jiàn)的顏色,使用時(shí)非常簡(jiǎn)單,比如設(shè)置一個(gè)UILabel的背景色為藍(lán)色:
let lbl = UILabel(frame: CGRect(x: 10, y: 48, width: 100, height: 100))
lbl.backgroundColor = UIColor.blue
這里UIColor.blue就表色藍(lán)色。
| 類變量 | 顏色 |
|---|---|
| black | 黑色 |
| blue | 藍(lán)色 |
| brown | 棕色 |
| clear | 無(wú)色 |
| cyan | 藍(lán)綠色 |
| darkGray | 深灰 |
| gray | 灰色 |
| green | 綠色 |
| lightGray | 淺灰 |
| magenta | 品紅 |
| orange | 橘色 |
| purple | 紫色 |
| red | 紅色 |
| white | 白色 |
| yellow | 黃色 |
1. 創(chuàng)建自定義顏色
如果上面的常用色滿足不了需求,還可以使用灰度或者RGB/HSB給數(shù)值進(jìn)行調(diào)色。
先來(lái)看黑白色:
init(white: CGFloat, alpha: CGFloat)
white范圍是0.0-1.0表示灰度的值,約小顏色越黑。1.0表示白色。
然后來(lái)看RGB:
init(red: CGFloat, green: CGFloat, blue: CGFloat, alpha: CGFloat)
很顯然,這里的RGB非常明顯,最后一個(gè)alpha表示透明度。
最后來(lái)看HSB:
init(hue: CGFloat, saturation: CGFloat, brightness: CGFloat, alpha: CGFloat)
同樣的,參數(shù)非常明顯,最后的alpha也是表示透明度。
既然可以創(chuàng)建顏色,自然也可以獲得顏色的RGB/HSB值。UIColor提供了值結(jié)果函數(shù):
func getHue(_ hue: UnsafeMutablePointer<CGFloat>?,
saturation: UnsafeMutablePointer<CGFloat>?,
brightness: UnsafeMutablePointer<CGFloat>?,
alpha: UnsafeMutablePointer<CGFloat>?) -> Bool
來(lái)獲得顏色的HSK以及alpha值,需要傳遞一個(gè)指針給對(duì)應(yīng)的參數(shù),然后其被填充預(yù)定的值。
同樣的:
func getRed(_ red: UnsafeMutablePointer<CGFloat>?,
green: UnsafeMutablePointer<CGFloat>?,
blue: UnsafeMutablePointer<CGFloat>?,
alpha: UnsafeMutablePointer<CGFloat>?) -> Bool
獲取其RGB和alpha值。而
func getWhite(_ white: UnsafeMutablePointer<CGFloat>?,
alpha: UnsafeMutablePointer<CGFloat>?) -> Bool
則獲得灰度和alpha值。
2. 顏色的轉(zhuǎn)換
上面介紹說(shuō)iOS有三種表示顏色的數(shù)據(jù)結(jié)構(gòu),除了UIColor還有CGColor以及CIColor。那么他們是如何轉(zhuǎn)換的呢?
首先來(lái)看從其他顏色轉(zhuǎn)換成UIColor:
init(ciColor: CIColor)
init(cgColor: CGColor)
UIKit是直接提供構(gòu)造函數(shù)來(lái)進(jìn)行轉(zhuǎn)換的。那要怎么吧UIColor轉(zhuǎn)換成其他顏色呢?其提供了方法
var ciColor: CIColor { get }
var cgColor: CGColor { get }
可以直接獲取CIColor和CGColor對(duì)象。
可見(jiàn)這里的數(shù)據(jù)類型轉(zhuǎn)換其實(shí)和類型強(qiáng)制轉(zhuǎn)換沒(méi)什么區(qū)別,無(wú)非就是通過(guò)構(gòu)造函數(shù)和getter來(lái)實(shí)現(xiàn)的。
除了不同顏色類型的轉(zhuǎn)換,UIColor對(duì)于灰色系,還可以通過(guò)
func withAlphaComponent(_ alpha: CGFloat) -> UIColor
從原有顏色上獲得不同灰度的顏色。
3. 最特殊的顏色表示--圖片
UIColor還有個(gè)讓人很費(fèi)解的顏色--圖片。如果之前有Google過(guò)如何設(shè)置一個(gè)View的背景顏色為圖片,你一定看到過(guò)類似:
let v = UIView(frame: CGRect(x: 10, y: 180, width: 100, height: 100))
v.backgroundColor = UIColor(patternImage: UIImage(named: "my_view")!)
這樣的答案。設(shè)置背景圖片變成了設(shè)置背景顏色。其實(shí)可以吧背景圖片理解成一種特殊的顏色系,所以也就有了用一個(gè)UIImage來(lái)初始化顏色的操作了。