[Swift] CALayer - 둥근 모서리, 그림자, 그라데이션

Xcode에서 View를 생성하게 되면,

기본적으로 아주 뾰족한 모서리를 가진 직사각형이 생성된다.

그러나 우리가 실제 사용하는 앱에서 그런 직사각형 모양의 View를 찾아보기가 힘들다.

 

이러한 처리들은, UIView의 메소드나 프로퍼티가 아닌 직전 포스팅을 통해 공부했던

CALayer의 프로퍼티에 접근하여 구현할 수 있다.

기본 View의 모습을 좀 더 깔끔하게 만들어 줄 수 있는 CALayer의 기능들을 몇 가지 알아보도록 하겠다.

 

3개의 기본 View

class ViewController: UIViewController {

    @IBOutlet weak var navySquare: UIView!
    @IBOutlet weak var greenSquare: UIView!
    @IBOutlet weak var clearSquare: UIView!
    
    override func viewDidLoad() {
        super.viewDidLoad()        
        self.makeViews()
    }
    
    private func makeViews(){
      // Make View Circle, Border
      
      // Make View Shadow
      
      // Make View Gradient
    }

위 코드처럼 만들어진 3개의 View를 이용해 한 가지씩 적용해 볼 예정이다.

 

 

 

📂  둥근 모서리 만들기(cornerRadius)

// Make View Circle, Border
self.navySquare.layer.cornerRadius = self.navySquare.frame.height / 2
self.navySquare.layer.borderWidth = 5.0
self.navySquare.layer.borderColor = UIColor.lightGray.cgColor

self.navySquare.clipsToBounds = true

UiView.layer.cornerRadius 프로퍼티에 값을 넣는 만큼 모서리에 radius가 생긴다.

너무 큰 값을 넣게되면 View의 모양이 깨질 수 있다.

원 모양을 만들고 싶으면, 위와 같이 View의 height / 2로 값을 설정하면 된다.

 

⌘ clipsToBounds

: UIView의 프로퍼티.

  SubView가 View의 위치를 벗어난 경우, 해당 SubView를 View 너머로 그릴 것인지(false) / 자를 것인지(true) 설정함

  → cilpsToBounds 속성을 true로 해주지 않으면, cornerRadius가 적용된 만큼 SubView의 모서리가 튀어나올 수 있다.

 

 

 

📂  그림자 추가하기

// Make View Shadow
self.greenSquare.layer.shadowColor = UIColor.black.cgColor
self.greenSquare.layer.shadowOffset = CGSize(width: 15, height: 15)
self.greenSquare.layer.shadowOpacity = 0.8
self.greenSquare.layer.shadowRadius = 8.0

self.greenSquare.layer.masksToBounds = false

CALayer가 shadow를 그릴 수 있는 프로퍼티와 메소드를 갖고 있다.

 

shadowColor : Shadow의 Color를 지정한다.

shadowOffset : shadow 위치를 지정한다.(shadow는 기본적으로는 View의 layer와 위치가 겹쳐있는 상태이다)

shadowOpacity : shadow의 투명도를 설정한다.(0.0 ~ 1.0) 

shadowRadius : shadow의 크기를 설정한다. 값이 클 수록, 크고 부드러운 질감의 그림자가 생성된다.

 

⌘ masksToBounds

: CALayer의 프로퍼티.

  SubLayer가 Layer의 위치를 벗어난 경우, 해당 SubLayer를 Layer 너머로 그릴 것인지(false) / 자를 것인지(true) 설정함

  → masksToBounds 속성을 false로 해주지 않으면, 그림자가 잘려서 보이지 않을 수 있다.

 

✓ masksToBounds와 clipsToBounds의 차이점?

: CALayer의 프로퍼티인지 UIView의 프로퍼티인지의 여부이고, 프로퍼티 설정에 대한 의미는 동일하다고 볼 수 있다.

 

 

 

📂  그라데이션 만들기(CAGradientLayer)

// Make View Gradient
let colors: [CGColor] = [
  UIColor.black.cgColor, UIColor.darkGray.cgColor, UIColor.clear.cgColor
]

let gradientLayer = CAGradientLayer()
gradientLayer.cornerRadius = 10
gradientLayer.colors = colors
gradientLayer.frame = self.clearSquare.bounds
gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.0)
gradientLayer.endPoint = CGPoint(x: 0.0, y: 1.0)
gradientLayer.locations = [0.3, 0.5]
                
self.clearSquare.layer.addSublayer(gradientLayer)

그라데이션 생성에 있어서, CALayer를 상속받는 CAGradientLayer를 이용해야 한다.

CAGradientLayer를 생성하고, 필요한 것들을 설정한 뒤, 그라데이션을 입힐 View의 SubLayer로 추가해준다.

 

colors : gradient를 입힐 CGColor의 배열을 받는 프로퍼티.

frame : CAGradientLayer의 크기를 설정한다. gradient를 입힐 View의 bounds를 지정한다(frame으로 사용하면 안된다.)
locations : gradient가 그려지는 방향에 따라 색이 변할 지점을 직접 지정할 수 있다.(0.0 ~ 1.0 사이)

startPoint, endPoint : CGPoint 개념을 이용해서, gradient의 방향을 지정할 수 있다.(위 코드는 y값만 변하는 수직 방향)

CGPoint

예를 들어, startPoint = CGPoint(x: 0.0, y: 0.0), endPoint = CGPoint(x: 1.0, y: 1.0)이라면

gradient는 수직 방향이 아닌 대각선 방향으로 그려지게 된다.

 

 

 

 

세 가지 코드를 모두 적용한다면 다음과 같은 결과를 얻을 수 있다.

 

 

 

📌 마치며

이전에도 많이 사용했었던 코드지만,

오늘을 계기로 더 확실히 정리가 되었다.

그리고 clipsToBounds와 masksToBounds의 차이를 확실히 짚게 되었다!

 

 

오류 및 지적사항은 댓글로 남겨주시면 감사하겠습니다!

참고 : 

https://babbab2.tistory.com/55