View나 text의 색상을 지정할 때 UIColor를 사용합니다.
기존에 UIKit에서 준비되어있는
black, white, green과 같은 색을 사용할 때에는 특별한 귀찮음 없이
바로 손쉽게 사용 가능하죠.
그런데 디자이너가 요구하는 가이드에서는 기본 컬러들만 있는 것이 아닙니다.
특정 색의 구현을 요구하는 케이스를 많이 경험해 보셨을 것인데요.
16진수 또는 RGB 같은 형식으로 말이죠!
오늘은 어떤 포멧에도 얽메이지 않고
색상을 구현할 수 있는
UIColor Extension 로직에 대해서 포스팅 해볼까 합니다.
첫번 째 소개할 방법은 alpah 값의 default value를 설정하며,
불필요한 타이핑을 최소화 해줄 수 있는 extension 입니다.
아래와 같은 초기화 메서드에서 마지막 인자로 alpha 값을 받고 있는 것을 확인할 수 있는데요.
특별한 케이스가 아니면 불투명도에 대해서는 1을 대부분 유지시킵니다.
대부분 1을 유지하기 때문에, 변하지도 않는 이 alpha 값 하나 써주기 은근 귀찮을 때가 있습니다.
또한 {vlaue}/255와 같은 입력 값을 반복한다는 것도 두 말하면 잔소리죠.
이럴 때 하단 Extension 코드와 같이
alpha 값은 기본값을 1로 가지고 있는,
그리고 /255와 같은 값을 직접 입력하지 않아도 되는 extension을
만들어 조금이나마 간편하게 사용할 수 있습니다.
extension UIColor {
convenience init(red: Int, green: Int, blue: Int) {
self.init(red: CGFloat(red) / 255.0, green: CGFloat(green) / 255.0, blue: CGFloat(blue) / 255.0, alpha: 1.0)
}
}
// before
view.backgroundColor = UIColor(red: 111, green: 222, blue: 333, alpha: 1)
// after
view.backgroundColor = UIColor.init(red: 111, green: 222, blue: 333)
두번째로 소개할 방법은 0x 접두사를 가지고 있는 16진수 색상 코드 표기법을 통해 편리하게 지정하는 방법입니다.
extension UIColor {
convenience init(rgb: Int) {
self.init(
red: (rgb >> 16) & 0xFF,
green: (rgb >> 8) & 0xFF,
blue: rgb & 0xFF
)
}
}
view.backgroundColor = UIColor(rgb: 0x123456)
세번째로 소개할 방법은 Hex 형태의 색상 코드를
UIColor로 반환하는 메서드입니다.
Hex 형태의 색상 코드는 #을 접두사로 가지고 있는데요.
String 타입의 Hex 색상 코드 그대로
인자로 넣으면 UIColor를 return 하게 됩니다.🙌
func hexStringToUIColor (hex:String) -> UIColor {
var cString:String = hex.trimmingCharacters(in: .whitespacesAndNewlines).uppercased()
if (cString.hasPrefix("#")) {
cString.remove(at: cString.startIndex)
}
if ((cString.count) != 6) {
return UIColor.gray
}
var rgbValue:UInt64 = 0
Scanner(string: cString).scanHexInt64(&rgbValue)
return UIColor(
red: CGFloat((rgbValue & 0xFF0000) >> 16) / 255.0,
green: CGFloat((rgbValue & 0x00FF00) >> 8) / 255.0,
blue: CGFloat(rgbValue & 0x0000FF) / 255.0,
alpha: CGFloat(1.0)
)
}
view.backgroundColor = hexStringToUIColor(hex: "#3eb489")