위와 같이 zeplin에서 색상 정보가 표시되고 ViewController의 배경색을 적용 해야 하는 경우
디자이너님에게 배경 PNG를 주세요! 라고 할 수도 있고
코드로 해결 할 수도 있다.
위 두점은 그라데이션의 시작점이다.
그리고 두개의 색상 정보가 있다.
extension CAGradientLayer {
convenience init(frame: CGRect, colors: [UIColor]) {
self.init()
self.frame = frame
self.colors = []
for color in colors {
self.colors?.append(color.cgColor)
}
startPoint = CGPoint(x: 0, y: 0)
endPoint = CGPoint(x: 1, y: 1)
}
convenience init(frame: CGRect, colors: [UIColor], startPoint: CGPoint, endPoint: CGPoint) {
self.init()
self.frame = frame
self.colors = []
for color in colors {
self.colors?.append(color.cgColor)
}
self.startPoint = startPoint
self.endPoint = endPoint
}
func createGradientImage() -> UIImage? {
var image: UIImage? = nil
UIGraphicsBeginImageContext(bounds.size)
if let context = UIGraphicsGetCurrentContext() {
render(in: context)
image = UIGraphicsGetImageFromCurrentImageContext()
}
UIGraphicsEndImageContext()
return image
}
}
위코드에서 첫번째 convenience 초기화는 대각선 즉 0,0 ~ 1,1 로 그라데이션 을 적용 하는 것이고
추가로 두번째 convenience초기화는 startPoint와 endPoint를 파라메터로 전달 할 수 있도록 만든 초기화 이다.
위와 같이 extension을 만들고
실제 ViewController에서 imageView를 전체 영역으로 올리고 다음과 같이 코딩을 한다.
@IBOutlet weak var backgroundImage: UIImageView!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
var colors = [UIColor]()
colors.append( colorLiteral(red: 0, green: 0.6941176471, blue: 1, alpha: 1))
colors.append( colorLiteral(red: 0.05882352941, green: 0.8392156863, blue: 0.8078431373, alpha: 1))
let gradientLayer = CAGradientLayer(frame: self.view.frame, colors: colors, startPoint: CGPoint(x: 0.5, y:0), endPoint: CGPoint(x:0.5, y:1))
backgroundImage.image = gradientLayer.createGradientImage()
}
colorLiteral을 사용해서 숫자로 표시되지만 실제로른 Xcode에서 색상 표를 이용해 hex로 입력 한것이다.
CGPoint(x: 0.5, y:0) ~ CGPoint(x:0.5, y:1) 은 중앙 상단에서 중앙 하단을 의미 한다.
