[iOS - swift] CAGradientLayer, Gradation의 종류, axial, radial, conic (linear, circle, sweep)

CAGradientLayer

• CALayer의 subclass이며, background 색상이나 layer의 색상을 gradient으로 만들 수 있는 인스턴스
• gradient 종류는 3가지가 존재
  • axial (linear)
  • radial (circle)
  • conic (sweep)

https://developer.apple.com/documentation/quartzcore/cagradientlayer

• gradient를 사용할 때 핵심은 프로퍼티
  • locations [NSNumber] 위치 값
    • 예시) [0, 0.5, 1] - 0번까지 첫 번째 색, 0.5까지 두 번째 색, 1까지 세 번째 색
  • startPoint, endPoint 값
    • axial일때 - (0,0)은 좌측 상단, (1,1)은 우측 하단
    • radial일때 - (0,0)은 원 내부 중심, (1,1)은 원 바깥 테두리
    • conic일때 - (0,0)우측하단, (1,1)은 (0,0)에서 한바퀴 돌은 지점

axial gradient (linear)

• gradient.type = .axial로 설정
• startPoint, endPoint값
  • (0,0)은 좌측 상단, (1,1)은 우측 하단
• gradient가 선형적으로 퍼지는 형태
  • 3개의 색상의 location을 [0, 0.5, 1]로 설정 (0에서 초록색 마감, 0.5에서 파란색 마감, 1에서 노란색 마감)
  • 수평으로 gradation이 퍼지게 하기 위해서 startPoint는 (0, 0.5), endPoint는 (1, 0.5)

  private lazy var axialGradient: CAGradientLayer = {
    let gradient = CAGradientLayer()
    gradient.type = .axial // default
    gradient.colors = [
      UIColor.systemGreen.cgColor,
      UIColor.systemBlue.cgColor,
      UIColor.systemYellow.cgColor
    ]
    gradient.locations = [0, 0.5, 1] // gradient stop 지점
    // (0,0)이 좌측 상단, (1,1)이 우측 하단
    gradient.startPoint = CGPoint(x: 0, y: 0.5)
    gradient.endPoint = CGPoint(x: 1, y: 0.5)
    return gradient
  }()
  
  private lazy var axialView: UIView = {
    let view = UIView()
    view.backgroundColor = .systemGray
    view.translatesAutoresizingMaskIntoConstraints = false
    self.view.addSubview(view)
    return view
  }()

• gradient의 frame을 지정해준 후 뷰에 추가

  override func viewDidLoad() {
    super.viewDidLoad()
    
    ...
    
    self.axialView.layer.addSublayer(self.axialGradient)
  }
  
  override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    
    self.axialGradient.frame = self.axialView.bounds
  }

radial gradient (circle)

• gradient.type = .radial로 설정
• startPoint, endPoint값
  • (0,0)은 원 내부 중심, (1,1)은 원 바깥 테두리
• gradient 설정
  • 나머지 뷰에 추가하는 작업은 위와 동일

private lazy var radialGradient: CAGradientLayer = {
  let gradient = CAGradientLayer()
  gradient.type = .radial
  gradient.colors = [
    UIColor.systemGreen.cgColor,
    UIColor.systemBlue.cgColor,
    UIColor.systemYellow.cgColor
  ]
  gradient.locations = [0, 0.5, 1]
  
  // (0,0)이 원의 중심, (1,1)이 원의 테두리
  gradient.startPoint = CGPoint(x: 0.5, y: 0.5)
  gradient.endPoint = CGPoint(x: 1, y: 1)
  return gradient
}()

conic gradient (sweep)

• gradient.type = .conic으로 설정
• startPoint, endPoint 값
  • (0,0)우측하단, (1,1)은 (0,0)에서 한바퀴 돌은 지점

• gradient 인스턴스

private lazy var conicGradient: CAGradientLayer = {
  let gradient = CAGradientLayer()
  gradient.type = .conic
  gradient.colors = [
    UIColor.systemGreen.cgColor,
    UIColor.systemBlue.cgColor,
    UIColor.systemYellow.cgColor
  ]
  gradient.locations = [0, 0.5, 1]
  
  // startPoint: 원의 중심, endPoint: 첫 번째 색상과 마지막 색상이 결합되는 지점
  // (0,0)우측하단, (1,1)은 (0,0)에서 한바퀴 돌은 지점
  gradient.startPoint = CGPoint(x: 0.5, y: 0.5)
  gradient.endPoint = CGPoint(x: 1, y: 1)
  return gradient
}()

* 전체 코드: https://github.com/JK0369/ExGradient

 

* 참고

https://developer.apple.com/documentation/quartzcore/cagradientlayer

https://medium.com/swlh/how-to-create-a-custom-gradient-in-swift-with-cagradientlayer-ios-swift-guide-190941cb3db2