庖丁UIKit之UIColor

颜色作为UI最基本的要素之一,是构建界面必不可少的部分。iOS上有三个framework都提供了颜色类型,分别是“Core Image”的 "CIColor"、“ Quartz Core”中的“CoreGraphic”提供的"CGColor"以及这里要介绍的"UIColor"。

所以UIKit提供的元素,比如各种View,各种字体等的颜色设置,我们都可以通过UIColor来进行。 UIColor主要分成两类色系:

  • 灰度色,也就是通常说的黑白色
  • RGB彩色,用RGB或者HSB加上特别度a组成的彩色

所以UIColor的使用和在CSS或者其他界面组件一样,既有常见颜色的定义,也可以自己根据aRGB也可以根据aHSB调制特定的颜色。

0. 使用既定的常用色

UIColor定义了一些最常见的颜色,使用时非常简单,比如设置一个UILabel的背景色为蓝色:

let lbl = UILabel(frame: CGRect(x: 10, y: 48, width: 100, height: 100))
lbl.backgroundColor = UIColor.blue

这里UIColor.blue就表色蓝色。

类变量 颜色
black 黑色
blue 蓝色
brown 棕色
clear 无色
cyan 蓝绿色
darkGray 深灰
gray 灰色
green 绿色
lightGray 浅灰
magenta 品红
orange 橘色
purple 紫色
red 红色
white 白色
yellow 黄色

1. 创建自定义颜色

如果上面的常用色满足不了需求,还可以使用灰度或者RGB/HSB给数值进行调色。

先来看黑白色:

init(white: CGFloat, alpha: CGFloat)

white范围是0.0-1.0表示灰度的值,约小颜色越黑。1.0表示白色。

然后来看RGB:

init(red: CGFloat, green: CGFloat, blue: CGFloat, alpha: CGFloat)

很显然,这里的RGB非常明显,最后一个alpha表示透明度。

最后来看HSB:

init(hue: CGFloat, saturation: CGFloat, brightness: CGFloat, alpha: CGFloat)

同样的,参数非常明显,最后的alpha也是表示透明度。

既然可以创建颜色,自然也可以获得颜色的RGB/HSB值。UIColor提供了值结果函数:

func getHue(_ hue: UnsafeMutablePointer<CGFloat>?, 
             saturation: UnsafeMutablePointer<CGFloat>?, 
             brightness: UnsafeMutablePointer<CGFloat>?, 
                  alpha: UnsafeMutablePointer<CGFloat>?) -> Bool    

来获得颜色的HSK以及alpha值,需要传递一个指针给对应的参数,然后其被填充预定的值。

同样的:

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. 颜色的转换

上面介绍说iOS有三种表示颜色的数据结构,除了UIColor还有CGColor以及CIColor。那么他们是如何转换的呢?

首先来看从其他颜色转换成UIColor:

init(ciColor: CIColor)
init(cgColor: CGColor)

UIKit是直接提供构造函数来进行转换的。那要怎么吧UIColor转换成其他颜色呢?其提供了方法
var ciColor: CIColor { get }
var cgColor: CGColor { get }

可以直接获取CIColor和CGColor对象。

可见这里的数据类型转换其实和类型强制转换没什么区别,无非就是通过构造函数和getter来实现的。

除了不同颜色类型的转换,UIColor对于灰色系,还可以通过

    func withAlphaComponent(_ alpha: CGFloat) -> UIColor

从原有颜色上获得不同灰度的颜色。

3. 最特殊的颜色表示--图片

UIColor还有个让人很费解的颜色--图片。如果之前有Google过如何设置一个View的背景颜色为图片,你一定看到过类似:

    let v = UIView(frame: CGRect(x: 10, y: 180, width: 100, height: 100))
    v.backgroundColor = UIColor(patternImage: UIImage(named: "my_view")!)

这样的答案。设置背景图片变成了设置背景颜色。其实可以吧背景图片理解成一种特殊的颜色系,所以也就有了用一个UIImage来初始化颜色的操作了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 220,976评论 6 513
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 94,249评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 167,449评论 0 360
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,433评论 1 296
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,460评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 52,132评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,721评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,641评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,180评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,267评论 3 339
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,408评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 36,076评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,767评论 3 332
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,255评论 0 23
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,386评论 1 271
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,764评论 3 375
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,413评论 2 358

推荐阅读更多精彩内容