CAGradientLayer _ 화면에 그라데이션 넣기
프로젝트 정리
https://babbab2.tistory.com/55
이거 보면서 만들었었는데 잘 정리되어 있음.. ㅎ
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)
}
시도는 안 해봤지만 요런 방법도 있다고 한다!