原文链接
正文
在iOS实际开发中,我们需要根据设计师的UI文档来开发页面。UI文档中,关于颜色的标注格式有很多种:255 32 171
,FF20AB
,#FF20AB
。
下面我们就来看看具体代码怎么实现这些颜色。
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
。显然每次都这样写很麻烦。既然麻烦,我们就来想办法优化下。
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)
}
}
let color = UIColor(redIn255: 255, greenIn255: 32, blueIn255: 171)
这样是不是简单了些,我们不用再每次写/255
了,同时还支持省略输入alpha
值。
颜色值的第一种格式的代码书写问题我们解决了,但是像FF20AB
,#FF20AB
这两种格式怎么办?我们应该首先想到查阅了UIColor
的documentation,查了之后发现没有支持直接根据十六进制的字符串生成颜色的方法。既然官方库没有,那我们能不能自己写一个扩展呢?答案是肯定的,看代码
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)
}
}
extension UIColor {
public convenience init?(hex: String) {
var str = hex.trimmingCharacters(in: .whitespacesAndNewlines).uppercased()
let startIndex = str.startIndex
if str.hasPrefix("#") {
let indexOffsetBy1 = str.index(startIndex, offsetBy: 1)
str = String(str[indexOffsetBy1...])
}
guard str.count == 6 else { return nil }
let indexOffsetBy2 = str.index(startIndex, offsetBy: 2)
let indexOffsetBy4 = str.index(startIndex, offsetBy: 4)
var red = String(str[..
let color = UIColor(hex: "FF20AB")
// let color = UIColor(hex: "ff20ab")
// let color = UIColor(hex: "#FF20AB")
// let color = UIColor(hex: "#ff20ab")
实现思路如下:
- 首先我们需要把字符串分割成RGB,分别得到代表
red
,green
,blue
的十六进制的字符串 - 我们需要一个方法把字符串转化成对应整数。这里为了复用,我给String写了加一个Extension的方法来实现这个功能
- 调用我们上面已经写过的方法,初始化出UIColor
上面我们就是实现了怎么根据RGB值,初始化UIColor。其实我们有时候还会遇到需要根据UIColor对象来得到对应的RGB值的需求。我们下面来看看这个需求怎么实现?
extension Int {
public var hexString: String {
return String(self, radix: 16, uppercase: true)
}
}
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)"
}
}
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
- 博客
备注
我们在软件开发的过程中,为了提高效率,其中很重要的一环就是把反复使用到的功能或模块封装起来。因此我在GitHub上开源了一个小工具集 - SwiftDevHints,来总结自己在实际项目开发过程中封装的一些小功能。
刚刚介绍的只是其中一个小功能,想看看其它更多功能,请直接点击SwiftDevHints。如果您觉得对您有所帮助,请给一个star吧。