[iOS/UI] UIView 백그라운드 그라데이션 색 넣기 (UIView Background gradient color)

오늘은 UIView에 그라데이션 색 효과넣는 법을 알아봅시다.

 

제일 먼저 스토리보드에서 시험하기 위한 view를 하나 만들어주고

뷰컨트롤러에 연결시켜줍니다.

그런 다음 extension으로 UIView를 확장시켜주고 안에 파라미터를 두 종류 색을 받는 메소드로 setGradient를 만들어줍니다.

 

우선 CAGradientLayer인 gradient를 만들어준 뒤 gradient.colors를 파라미터로 두 종류를 받습니다.

 

gradient.locations는 그라데이션이 어느 방향으로 갈지 정하는 것입니다.

 

startPoint와 endPoint는 각 각 시작점과 끝점을 정해주는 겁니다.

 

frame은 해당 view에 맞게 맞춰주는 bounds를 써주시고 해당 view의 layer에 addSublayer로 gradient를 넣어줍시다.

1 2 3 4 5 6 7 8 9 10 11

extension UIView{     func setGradient(color1:UIColor,color2:UIColor){         let gradient: CAGradientLayer = CAGradientLayer()         gradient.colors = [color1.cgColor,color2.cgColor]         gradient.locations = [0.0 , 1.0]         gradient.startPoint = CGPoint(x: 0.0, y: 1.0)         gradient.endPoint = CGPoint(x: 1.0, y: 1.0)         gradient.frame = bounds         layer.addSublayer(gradient)     } } Colored by Color Scripter

 

 

그런 다음 원하는 view에 setGradient 메소드와 파라미터로 원하는 두 종류의 색을 넣으면

 

 

다음과 같이 그라데이션 효과를 입은 뷰가 나타나게 됩니다.