Swift开发小技巧系列 - 改造UIColor

正文

在iOS实际开发中,我们需要根据设计师的UI文档来开发页面。UI文档中,关于颜色的标注格式有很多种:255 32 171FF20AB#FF20AB

下面我们就来看看具体代码怎么实现这些颜色。

1
let color = UIColor(red: 255/255, green: 32/255, blue: 171/255, alpha: 1)

UIColor有一个初始化函数init(red: CGFloat, green: CGFloat, blue: CGFloat, alpha: CGFloat),需要传入四个参数RGBA,它们的值的范围0.0 ~ 1.0。由于我们拿到的颜色值的范围是0 ~ 255的,所以使用的时候我们还需要除以255。显然每次都这样写很麻烦。既然麻烦,我们就来想办法优化下。

1
2
3
4
5
extension UIColor {
public convenience init(redIn255: Int, greenIn255: Int, blueIn255: Int, alphaIn100: Int = 100) {
self.init(red: CGFloat(redIn255)/255, green: CGFloat(greenIn255)/255, blue: CGFloat(blueIn255)/255, alpha: CGFloat(alphaIn100)/100)
}
}
1
let color = UIColor(redIn255: 255, greenIn255: 32, blueIn255: 171)

这样是不是简单了些,我们不用再每次写/255了,同时还支持省略输入alpha值。

颜色值的第一种格式的代码书写问题我们解决了,但是像FF20AB#FF20AB这两种格式怎么办?我们应该首先想到查阅了UIColor的documentation,查了之后发现没有支持直接根据十六进制的字符串生成颜色的方法。既然官方库没有,那我们能不能自己写一个扩展呢?答案是肯定的,看代码

1
2
3
4
5
6
7
8
extension String {
public var hexInt: Int? {
let scanner = Scanner(string: self)
var value: UInt64 = 0
guard scanner.scanHexInt64(&value) else { return nil }
return Int(value)
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
extension UIColor {
public convenience init?(hex: String) {
var str = hex.trimmingCharacters(in: .whitespacesAndNewlines).uppercased()

if str.hasPrefix("#") {
let indexOffsetBy1 = str.index(str.startIndex, offsetBy: 1)
str = String(str[indexOffsetBy1...])
}

guard str.count == 6 else { return nil }

let startIndex = str.startIndex
let endIndex = str.endIndex

let indexOffsetBy2 = str.index(startIndex, offsetBy: 2)
let indexOffsetBy4 = str.index(startIndex, offsetBy: 4)

let red = str[startIndex..<indexOffsetBy2]
let green = str[indexOffsetBy2..<indexOffsetBy4]
let blue = str[indexOffsetBy4..<endIndex]

guard let redIn255 = red.hexInt else { return nil }
guard let greenIn255: Int = green.hexInt else { return nil }
guard let blueIn255: Int = blue.hexInt else { return nil }

self.init(redIn255: redIn255, greenIn255: greenIn255, blueIn255: blueIn255)
}
}
1
2
3
4
let color = UIColor(hex: "FF20AB") 
// let color = UIColor(hex: "ff20ab")
// let color = UIColor(hex: "#FF20AB")
// let color = UIColor(hex: "#ff20ab")

实现思路如下:

  • 首先我们需要把字符串分割成RGB,分别得到代表redgreenblue的十六进制的字符串
  • 我们需要一个方法把字符串转化成对应整数。这里为了复用,我给String写了加一个Extension的方法来实现这个功能
  • 调用我们上面已经写过的方法,初始化出UIColor

上面我们就是实现了怎么根据RGB值,初始化UIColor。其实我们有时候还会遇到需要根据UIColor对象来得到对应的RGB值的需求。我们下面来看看这个需求怎么实现?

1
2
3
4
5
extension Int {
public var hexString: String {
return String(self, radix: 16, uppercase: true)
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
extension UIColor {
public var rgba: (red: CGFloat, green: CGFloat, blue: CGFloat, alpha: CGFloat) {
var red: CGFloat = 0
var green: CGFloat = 0
var blue: CGFloat = 0
var alpha: CGFloat = 0

getRed(&red, green: &green, blue: &blue, alpha: &alpha)
return (red, green, blue, alpha)
}
public var intRGBA: (red: Int, green: Int, blue: Int, alpha: Int) {
let comps = rgba
return (Int(comps.red*255.0), Int(comps.green*255.0), Int(comps.blue*255.0), Int(comps.alpha*100.0))
}
public func rgbHexString(prefix: String = "") -> String {
let intRGBA = self.intRGBA
return "\(prefix)\(intRGBA.red.hexString)\(intRGBA.green.hexString)\(intRGBA.blue.hexString)"
}
}
1
2
3
4
5
let color = UIColor(hex: "#FF20AB")!
let rgba = color.rgba // (red 1.0, green 0.125490196078431, blue 0.670588235294118, alpha 1.0)
let intRGBA = color.intRGBA // (red 255, green 32, blue 171, alpha 100)
let rgbHexString = color.rgbHexString(prefix: "#") // "#FF20AB"
// let rgbHexString = color.rgbHexString() // "FF20AB"

通过上面的扩展,我们可以很方便的实现根据各种RGB值初始化出UIColor对象,同时我们也能很轻松根据UIColor对象得到各种格式的RGB值。

联系方式

备注

我们在软件开发的过程中,为了提高效率,其中很重要的一环就是把反复使用到的功能或模块封装起来。因此我在GitHub上开源了一个小工具集 - SwiftDevHints,来总结自己在实际项目开发过程中封装的一些小功能。

刚刚介绍的只是其中一个小功能,想看看其它更多功能,请直接点击SwiftDevHints。如果您觉得对您有所帮助,请给一个star吧。