[iOS][Swift][UIKit] UIPickerView의 그라데이션넣기(gradient).

상황

• 다음과 같이 DateTimePicker 에 그림자와 배경 그라데이션 필요

문제상황

• 일반적으로 UIPickerView 는 UIView 를 상속해서 이 때문에 pickerView 자체에 그라데이션과 그림자를 넣어줬다
  1. 이 때문에 배경색에 그라데이션이 여러 레이어대로 제대로 작동하지 않거나
  2. 그림자를 넣었을 때 백그라운드 전체에 걸려서 그라데이션을 방해했다.

원인파악

• 일반적으로 UIView의 그라데이션은 두가지 정도를 추가할 수 있는데 위와같은 여러 레이어가 필요한경우는 CAGradientLayer() 객체를 사용해야했다.
• CAGradientLayer()는 CALayer() 를 상속한다.

즉 , UIView > CALayer > CAGradientLayer 이 단계로 접근해야한다.

• 또 CAGradientLayer 는 초기화 시에 frame을 설정해줘야하고 이것을 뷰가 그려지고나서 업데이트해야한다. (viewDidLayoutSubviews 또는 viewDidLoad) 이것을 해주지 않았다.

해결 과정

extension CAGradientLayer {
    func setGradient(color: [CGColor], locations: [NSNumber]? , _ radius: CGFloat?) {

        self.cornerRadius = radius ?? 0
        self.colors = color
        self.locations = locations
        self.startPoint = CGPoint(x: 0.5, y: 0)
        self.endPoint = CGPoint(x: 0.5, y: 1)
    }
}

• 위와 같이 extension을 작성해주고 location 에 위치를 설정한 배열을 넣어준다.
• 또 UIView에 그라데이션이나 shadow는 UIView의 layer (CALayer)프로퍼티에 접근해야한다.

다시 한번 ,

즉 , UIView > CALayer > CAGradientLayer 이 단계로 접근해야한다.

CAGradientLayer의 익스텐션을 커스텀하고, 이를 CALayer ( view.layer) 에 넣어줘야한다.

// UIView Extension

func addGradientLayer(_ caGradientLayer: CAGradientLayer) {
        caGradientLayer.frame = self.bounds
        self.layer.insertSublayer(caGradientLayer, at: 0)
    }

ViewController

• 그라데이션레이어를 다음과 같이 설정하고

gradientLayer.do {
            $0.frame = datePickerWrapper.bounds
            $0.setGradient(color:[color1, color2, color3, color3, color2, color1],
                           locations: [0.0, 0.2, 0.4, 0.6, 0.8, 1.0], 20)
            $0.setShadow(CGSize(width: 0, height: 4),CSColor._220_220_220.cgColor , 1, 2)
        }

• 데이트피커를 감싼 Wrapper 에 적용해준다.

datePickerWrapper.do {
            $0.addGradientLayer(gradientLayer)
        }

• 마지막으로 뷰가 그려진 후 그라데이션 뷰의 크기를 업데이트 시켜준다

override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        gradientLayer.frame = datePickerWrapper.bounds
    }