Swift - 그라데이션

앱의 화면을 만들다가 보니 이미지 위에 텍스트를 보여줘야하는 경우가 존재하는데..

만약 텍스트를 어두운색으로 하면 배경에 어두운 이미지가 들어가면 텍스트가 안보이고

 

그렇다고 밝은색으로 하면 배경이 밝은 경우 또 잘 안보입니다.

그런경우에 텍스트필드 또는 레이블의 백그라운드에 색을 줘서 글씨를 더 잘 보이게 해줄 수도 있지만 어떤경우에 UI와 별로 어울리지도 않고 안 이쁠 수도 있습니다.

 

그런경우 그라데이션을 주면 텍스트를 자연스럽게 잘 보여지게 할 수 있습니다.

 

먼저 그라데이션은 CAGradientLayer라는 클래스를 이용해서 만들 수 있습니다.

 

 

그라데이션에 스타일을 줄 수 있는 프로퍼티는 이렇게 존재합니다.

 

 

 

먼저 기본적인 그라데이션을 그려보면

 

let gradient = CAGradientLayer()
gradient.frame = CGRect(x: 0, y: 0, width: gradientView.frame.width, height: gradientView.frame.height)
gradient.colors = [UIColor.systemRed.cgColor, UIColor.systemPink.cgColor, UIColor.systemOrange.cgColor]
        
gradientView.layer.addSublayer(gradient)

 

 

또 startPoint, endPoint를 통해 대각선으로도 표현할 수 있습니다.

 

let gradient = CAGradientLayer()
gradient.frame = self.view.bounds
gradient.startPoint = CGPoint(x: 0, y: 0)
gradient.endPoint = CGPoint(x: 1, y: 1)
gradient.colors = [UIColor.systemRed.cgColor, UIColor.systemPink.cgColor, UIColor.systemOrange.cgColor]
        
view.layer.addSublayer(gradient)

 

 

그리고 그라데이션을 주는데 위치를 조금 조정하고 싶다면 locations 프로퍼티를 이용하면 됩니다.

배열안에 0.0 ~ 1.0 까지의 값을 줄 수 있고 각 값은 각 그라데이션 색이 끝나는 지점을 설정하는 숫자입니다.

처음 그라데이션과 마지막 그라데이션의 차이가 보이시나요??

 

let gradient = CAGradientLayer()
gradient.frame = self.view.bounds
gradient.locations = [0.2, 0.8, 1.0]
gradient.colors = [UIColor.systemRed.cgColor, UIColor.systemPink.cgColor, UIColor.systemOrange.cgColor]
        
view.layer.addSublayer(gradient)

 

 

마지막으로 그라데이션 타입

이건 저도 사용해본 적은 없는 프로퍼티인데

axial, radial, conic 이렇게 세가지 값이 있습니다.

axial이 기본 타입이고

 

방사형 원뿔형 이라는 값인걸보니... 검색해보니 아래처럼 표현도 가능한 것 같습니다.

 

 

 

그럼 이걸 이용해서 이런식으로!

하게 되면 이렇게 은은하게 배경이 들어가서 이미지에 크게 영향을 안끼치고 위쪽이나 아랫쪽에 텍스트를 넣을 수 있습니다.

let gradient = CAGradientLayer()
gradient.frame = self.view.bounds
gradient.colors = [UIColor.lightGray.withAlphaComponent(0.3).cgColor, UIColor.clear.cgColor, UIColor.lightGray.withAlphaComponent(0.3).cgColor]
        
view.layer.addSublayer(gradient)