玩转swiftUIKit之UIColor

前言

UIColor类是UIKit中用来存储颜色数据的一个类&＃xff0c;想要清晰的了解这个类中的相关属性、方法&＃xff0c;则需要先了解一个名词&＃xff1a;颜色空间。

不同的设备处理颜色的方式是不同的, 每个设备都有他所支持的颜色范围, 在一个设备上产生的颜色可能在另一台设备上无法提供.所以&＃xff0c;不同的设备就可能会具有不同的颜色空间&＃xff0c;去解析相应的颜色数据&＃xff08;比如UIColor&＃xff09;。

特别的&＃xff0c;在iOS系统中&＃xff0c;必须使用设备颜色空间(device color space)。

在iOS 10之前的iOS版本上&＃xff0c;以及在iOS 10之前的iOS版本上链接的应用程序&＃xff0c;可以在两个颜色空间之一中创建和返回颜色&＃xff1a;

Device-Dependent Gray Device-Dependent RGB

iOS 10之后或之后连接&＃xff0c;并且在iOS 10或更高版本上运行&＃xff0c;则颜色将在扩展颜色空间中创建&＃xff1a;

kCGColorSpaceExtendedGray kCGColorSpaceExtendedSRGB

在CoreGraphics中有个CGColorSpace类, 这个类可以用来获取不同的设备颜色空间&＃xff0c;举例(三个比较常见的颜色空间)如下&＃xff1a;

// 一个device-dependent 灰度颜色空间 &＃64;available(iOS 2.0, *) public func CGColorSpaceCreateDeviceGray() -> CGColorSpace // 一个device-dependent RGB颜色空间 &＃64;available(iOS 2.0, *) public func CGColorSpaceCreateDeviceRGB() -> CGColorSpace // 一个device-dependent CMYK颜色空间 &＃64;available(iOS 2.0, *) public func CGColorSpaceCreateDeviceCMYK() -> CGColorSpace

然后还要了解的是 UIColor、CGColor、CIColor 之间的关系及转化&＃xff0c;本篇文章主要讲 UIColor 的相关知识&＃xff0c;这篇文章对于三者之间的关系讲的很详尽&＃xff0c;自己就不重复造轮子了&＃xff0c;假如你理解了颜色空间与颜色数据之间的关系&＃xff0c;那么这篇文章也就很好理解了。

进入正题(基于iOS 10)

一、创建系统颜色

extension UIColor {// 在浅色背景上显示文本的系统颜色。open class var lightText: UIColor { get } // 在深色背景上显示文本的系统颜色。open class var darkText: UIColor { get } // 分组表的背景的系统颜色。open class var groupTableViewBackground: UIColor { get } }

测试代码如下&＃xff1a;

// 测试创建系统颜色 func testCreateSystemColor() {// 颜色空间&＃xff1a;UIExtendedGrayColorSpace self.addImageView(color: UIColor.darkText);self.addImageView(color: UIColor.lightText);// 颜色空间&＃xff1a;UIExtendedSRGBColorSpaceself.addImageView(color: UIColor.groupTableViewBackground); }// 添加imageView func addImageView(color: UIColor) {let imageView &＃61; UIImageView.init(frame: CGRect.init(x: 40, y: 80 &＃43; self.viewIndex * 40, width: 200, height: 20));imageView.backgroundColor &＃61; color;self.view.addSubview(imageView);print(color);self.viewIndex &＃43;&＃61; 1; }

结果如下&＃xff1a;

UIExtendedGrayColorSpace 0 1 UIExtendedGrayColorSpace 1 0.6 UIExtendedSRGBColorSpace 0.937255 0.937255 0.956863 1

二、使用预定义颜色创建颜色对象

// 黑色 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 }

测试代码如下&＃xff1a;

// 测试使用预定义颜色创建颜色对象 func testUsePreColorCreateColor() {// 颜色空间&＃xff1a;UIExtendedGrayColorSpaceself.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);// 颜色空间&＃xff1a;UIExtendedSRGBColorSpaceself.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

三、在特定颜色空间中创建自定义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分量 &＃64;available(iOS 10.0, *) public init(displayP3Red: CGFloat, green: CGFloat, blue: CGFloat, alpha: CGFloat)

测试代码如下&＃xff1a;

// 测试在特定颜色空间创建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)); }

结果如下&＃xff1a;

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

注意&＃xff1a;iOS 10后&＃xff0c;通过图形堆栈扩展这种方式比以往支持广色域的显示设备更加容易。现在对UIKit扩展可以在sRGB的色彩空间下工作&＃xff0c;性能更好&＃xff0c;也可以在更广泛的色域来搭配sRGB颜色。

四、以现有的颜色数据创建UIColor对象

// 由指定的Quartz颜色生成一个UIcolor对象 public init(cgColor: CGColor) // 由指定的Core Image颜色生成一个UIcolor对象 &＃64;available(iOS 5.0, *) public init(ciColor: CIColor) // 创建并返回一个与原Color相同颜色空间和组件值得颜色对象&＃xff0c;并新添了透明度。 open func withAlphaComponent(_ alpha: CGFloat) -> UIColor

测试代码如下

// 测试 color to color func testColorToColor() {// CGColor -> UIColorself.addImageView(color: UIColor.init(cgColor: CGColor.init(colorSpace: CGColorSpaceCreateDeviceCMYK(), components: [1,1,0,0,1])!));// CIColor -> UIColorself.addImageView(color: UIColor.init(ciColor: CIColor.gray()));// UIColor ->UIColor(&＃43;alpha)self.addImageView(color: UIColor.red.withAlphaComponent(0.5)); }

测试结果如下&＃xff1a;

kCGColorSpaceModelCMYK 1 1 0 0 1 CIColor 0.5 0.5 0.5 1 UIExtendedSRGBColorSpace 1 0 0 0.5

五、由Image转为Color

// image -> color public init(patternImage image: UIImage)

测试代码如下:

// 测试 image -> color func imageToColor() {let color &＃61; UIColor.init(patternImage: UIImage.init(named: "imageToColor")!)let imageView &＃61; UIImageView.init(frame: CGRect.init(x: 40, y: 80, width: 158, height: 154));imageView.backgroundColor &＃61; color;self.view.addSubview(imageView);print(color); }

测试结果如下&＃xff1a;

kCGColorSpaceModelPattern 1

建议&＃xff1a;在实际项目中尽量避免使用这种方式加载加图片&＃xff0c;因为这种加载方式会比直接加载图片占用更大的内存。

六、设置图形上下文的绘图颜色

// 同时设置画笔颜色和填充颜色 open func set() // 设置填充颜色 open func setFill() // 设置画笔颜色 open func setStroke()

测试代码如下&＃xff1a;

// 测试设置图形上下文的绘图颜色 func testDrawColor() {let pathView &＃61; PathView.init(frame: self.view.bounds);self.view.addSubview(pathView); }

PathView.swift内&＃xff1a;

override func draw(_ rect: CGRect) {let path &＃61; UIBezierPath();path.addArc(withCenter: self.center, radius: 100.0, startAngle: 0, endAngle: 180.0, clockwise: true);path.lineWidth &＃61; 5.0;// 设置填充颜色 UIColor.red.setFill();// 设置画笔颜色UIColor.blue.setStroke();path.fill();path.stroke(); }

测试结果&＃xff1a;

七、检索颜色信息

// 获取与此UIColor相对应的Quartz颜色 open var cgColor: CGColor { get }// 获取与此UIColor相对应的Core Image封装的颜色 &＃64;available(iOS 5.0, *) open var ciColor: CIColor { get }// 获取灰度颜色空间中组成颜色的灰度分量 &＃64;available(iOS 5.0, *) open func getWhite(_ white: UnsafeMutablePointer?, alpha: UnsafeMutablePointer?) -> Bool// 获取HSB颜色空间中组成颜色的组件 &＃64;available(iOS 5.0, *) open func getHue(_ hue: UnsafeMutablePointer?, saturation: UnsafeMutablePointer?, brightness: UnsafeMutablePointer?, alpha: UnsafeMutablePointer?) -> Bool// 获取RGB颜色空间中组成颜色的组件 &＃64;available(iOS 5.0, *) open func getRed(_ red: UnsafeMutablePointer?, green: UnsafeMutablePointer?, blue: UnsafeMutablePointer?, alpha: UnsafeMutablePointer?) -> Bool

测试代码如下&＃xff1a;

// 测试获取color的相关信息 func testGetInfomationWithColor() {var r: CGFloat &＃61; 0;var g: CGFloat &＃61; 0;var b: CGFloat &＃61; 0;var a: CGFloat &＃61; 0;UIColor.red.getRed(&r, green: &g, blue: &b, alpha: &a);print("RGB分量---" &＃43; "r:" &＃43; String(describing: r) &＃43; " g:" &＃43; String(describing: g) &＃43; " b:" &＃43; String(describing: b) &＃43; " a:" &＃43; String(describing: a));var hh: CGFloat &＃61; 0;var ss: CGFloat &＃61; 0;var bb: CGFloat &＃61; 0;var aa: CGFloat &＃61; 0;UIColor.red.getHue(&hh, saturation: &ss, brightness: &bb, alpha: &aa);print("HSB分量---" &＃43; "hh:" &＃43; String(describing: hh) &＃43; " ss:" &＃43; String(describing: ss) &＃43; " bb:" &＃43; String(describing: bb) &＃43; " aa:" &＃43; String(describing: aa));var www: CGFloat &＃61; 0;var aaa: CGFloat &＃61; 0;UIColor.red.getWhite(&www, alpha: &aaa);print("灰度分量---" &＃43; "www:" &＃43; String(describing: www) &＃43; " aaa:" &＃43; String(describing: aaa));print("cgcolor---" &＃43; String(describing: UIColor.red.cgColor));print("cicolor---" &＃43; String(describing: UIColor.init(ciColor: CIColor.red()).ciColor));}

测试结果&＃xff1a;

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--- [ (kCGColorSpaceICCBased; kCGColorSpaceModelRGB; sRGB IEC61966-2.1; extended range)] ( 1 0 0 1 ) cicolor---(1 0 0 1)

注意&＃xff1a;UIColor的CGColor总是有效的&＃xff0c;不管它是通过CGColor&＃xff0c;CIColor&＃xff0c;还是其他方法创建的&＃xff0c;CGColor属性都总是有效的&＃xff1b;但是CIColor属性就不总是有效的&＃xff0c;只有当UIColor是通过CIColor创建的时候&＃xff0c;他才是有效的&＃xff0c;否则访问该属性将会抛出异常

八、Color Literal

// 字面量颜色不要直接调用 &＃64;nonobjc required public convenience init(colorLiteralRed red: Float, green: Float, blue: Float, alpha: Float)

这个API&＃xff0c;是Xcode提供的一个可视化颜色选择器&＃xff0c;不需要直接调用&＃xff0c;使用方法如下&＃xff1a;

1、设置颜色的时候输入 color literal 会有智能提示如下&＃xff1a;

2、回车后&＃xff0c;会出现颜色选择界面

3、可以选择一个想要的颜色&＃xff0c;还可以点击下方的 Other &＃xff0c;选颜色蜡笔或者直接输入颜色值。选完后在代码里就会有个小方块。里面填充的就是刚刚选的颜色,如下&＃xff1a;

4、运行后结果如下:

5、实质上&＃xff0c;小方块就是这个API的替代显示&＃xff0c;复制整个函数代码粘贴如下&＃xff1a;

// 测试字面量初始化方法 func testLiteralInit() {self.addImageView(color: #colorLiteral(red: 0.1215686277, green: 0.01176470611, blue: 0.4235294163, alpha: 1)); }