CAGradientLayer _ 화면에 그라데이션 넣기

 

프로젝트 정리

 

https://babbab2.tistory.com/55

iOS) CAGradientLayer - UIView에 그라데이션 넣기

 

이거 보면서 만들었었는데 잘 정리되어 있음.. ㅎ

let colors: [CGColor] = [
    UIColor.white.cgColor,
    UIColor.clear.cgColor,
    UIColor.clear.cgColor,
    UIColor.clear.cgColor,
    UIColor.clear.cgColor,
    UIColor.clear.cgColor
]

override func viewDidLoad() {
    super.viewDidLoad()
    setGradient()
}

private func setGradient() {
    if let sublayers = view.layer.sublayers {
        for sublayer in sublayers {
            if (sublayer is CAGradientLayer) {
                sublayer.removeFromSuperlayer()
            }
        }
    }

    let gradientLayer = CAGradientLayer()
    gradientLayer.frame = view.bounds

    gradientLayer.colors = colors
    gradientLayer.startPoint = CGPoint(x: 0.5, y: 1.0)
    gradientLayer.endPoint = CGPoint(x: 0.5, y: 0.0)

    view.layer.addSublayer(gradientLayer)
}

 

우선 그라데이션 구현을 setGradient() 함수로 빼서 만들어줬다.

* 참고로 CAGradientLayer()는 단순히 그래픽 효과를 제공하는 레이어이기 때문에 따로 터치가 안 되도록 설정해 줄 필요 없다

 

 

요런 그라데이션을 넣어줄 거라서 컬러를 저렇게 배열로 만들어줘서 끝에만 흰색 그라데이션이 되도록 설정해 줬다..

그런데 컬러가 변수에 동일한 내용으로 8줄이나 차지해서

private func setGradient() {
    if let sublayers = view.layer.sublayers {
        for sublayer in sublayers {
            if (sublayer is CAGradientLayer) {
                sublayer.removeFromSuperlayer()
            }
        }
    }

    let gradientColors = [UIColor.white.withAlphaComponent(1).cgColor] + Array(repeating: UIColor.white.withAlphaComponent(0).cgColor, count: 8)
    let gradientLayer = CAGradientLayer()
    gradientLayer.frame = view.bounds

    gradientLayer.colors = gradientColors
    gradientLayer.startPoint = CGPoint(x: 0.5, y: 1.0)
    gradientLayer.endPoint = CGPoint(x: 0.5, y: 0.0)

    view.layer.addSublayer(gradientLayer)
}

 

 

let gradientColors = [UIColor.white.withAlphaComponent(1).cgColor] + Array(repeating: UIColor.white.withAlphaComponent(0).cgColor, count: 8)

 

이렇게 배열로 반복하게 해서 넣어줬다!

잘 구현했다고 생각했었는데 나중에 팀원분이 수정해 주신 거 보니까

 

private func setGradient() {
    let maskedView = UIView()
    maskedView.backgroundColor = view.backgroundColor
    view.addSubview(maskedView)

    maskedView.snp.makeConstraints {
        $0.bottom.leading.trailing.equalToSuperview()
        $0.height.equalTo(40)
    }

    let gradientLayer = CAGradientLayer()
    gradientLayer.frame = view.bounds
    gradientLayer.colors = [UIColor.clear.cgColor, UIColor.white.withAlphaComponent(0.98).cgColor, UIColor.white.cgColor, UIColor.white.cgColor]
    gradientLayer.locations = [0, 0.05, 0.8, 1]

    maskedView.layer.mask = gradientLayer
    maskedView.isUserInteractionEnabled = false
}

이렇게도 구현이 가능하다!

 

 

 

이렇게 구현하면 하단에 이렇게 희미하게 그라데이션이 들어간 것을 볼 수 있다

그러나 코드를 이렇게 구현하면 view위에 layer를 덮은 것 이기 때문에 isUserInteractionEnabled를 false로 따로 설정해주어야 한다

그래도 아래쪽에만 그라데이션을 주면 되기 때문에 View로 영역을 좀 분리하는 것을 선택했다.

 

코드 해석하면서 생각한 건데 View와 Layer의 차이가 뭘까..

- View는 사용자 인터페이스의 기본 구성 요소이고, Layer는 뷰의 내부에서 시각적으로 나타나는 객체

그래서 초반에 해준 코드에서는 따로 view를 추가한 게 아니라서 isUserInteractionEnabled를 해줄 필요가 없었다

maskedView.isUserInteractionEnabled = false로 이 뷰가 사용자 상호작용을 받지 않도록 할 수 있다.

현재 이 그라데이션을 하기 위한 maskedView는 기본 페이지 위에 덮어씌워져 있기 때문에 스크롤이나 클릭에 방해를 줄 수 있어서 isUserInteractionEnabled로 상호작용을 없애서 정말 시각적인 요소로 사용하도록 구현할 수 있다.

 

 

근데 어떤 방식이 더 좋은 지 chatGPT에 물어보니..

CAGradientLayer를 직접 추가하되, 그라데이션이 적용될 영역을 정확하게 지정하는 두 마리 토끼를 잡을.. 방법이 있다고 해서..

private func setGradient() {
    // 기존에 추가된 모든 CAGradientLayer를 제거합니다.
    if let sublayers = view.layer.sublayers {
        for sublayer in sublayers {
            if sublayer is CAGradientLayer {
                sublayer.removeFromSuperlayer()
            }
        }
    }

    // 그라데이션 레이어를 추가합니다.
    let gradientLayer = CAGradientLayer()
    let gradientHeight: CGFloat = 40.0
    gradientLayer.frame = CGRect(x: 0, y: view.bounds.height - gradientHeight, width: view.bounds.width, height: gradientHeight)

    // 그라데이션 색상 설정
    gradientLayer.colors = [
        UIColor.white.withAlphaComponent(0).cgColor,
        UIColor.white.withAlphaComponent(0.98).cgColor,
        UIColor.white.cgColor
    ]
    
    // 그라데이션 위치 설정
    gradientLayer.locations = [0.0, 0.8, 1.0]

    // 그라데이션 레이어 추가
    view.layer.addSublayer(gradientLayer)
}

시도는 안 해봤지만 요런 방법도 있다고 한다!