IOS) UIView에 Corner Radius와 Shadow를 적용하기

완성 본

안녕하세요!!! 후르륵짭짭 입니다.

위에 영상을 보면 초록색 뷰에 그림자와 각진 부분이 깍인 것을 확인 할 수 있습니다

오늘은 이것에 대해서 자세히 알아 보려고 합니다.

두가지 방법이 있습니다.

하나는 하드코딩으로 하는 것과 Extension 하는 방법으로 두가지가 있습니다.

** 하드 코딩 **

하드 코딩 방법은 정말 간단 합니다.

그냥 적용하는 뷰에다가 아래 코드를 적용해주면 끝~~!!!

    func setView(){
        
        mainView.layer.cornerRadius = 20
        
        mainView.layer.borderWidth = 2
        mainView.layer.borderColor = UIColor.red.cgColor
        mainView.layer.shadowOpacity = 1
        mainView.layer.shadowColor = UIColor.black.cgColor
        mainView.layer.shadowOffset = CGSize(width: 0, height: 0)
        mainView.layer.shadowRadius = 10

        mainView.layer.masksToBounds = false
        
    }

그럼 이 코드에 대해서 알아보도록 하겠습니다!!!

 

- 그림자를 적용하기 -

mainView.layer.shadowOpacity = 1

이것은 Opacity(사전 : 불투명함)으로 투명도를 말하는 것 입니다.

값은 0 부터 1 의 값으로 0이면 완전 투명한것 1이면 완전 진한 것을 의미합니다.

mainView.layer.shadowColor = UIColor.black.cgColor

이것은 Color가 들어간 것을 보고 바로 알 수 있죠?

바로 그림자 색을 의미합니다. 이때 shadowColor는 UIcolor가 아니라 cgColor 이기 때문에

마지막에 cgColor를 넣어줘야합니다.

mainView.layer.shadowRadius = 10

이것은 Radius(사전:반경)으로 그림자의 퍼짐 정도를 의미합니다.

값이 커지면 커질 수록 넓게 퍼지게 됩니다.

넓게 퍼지면 퍼질 수록 뷰랑 가까운 부분은 진하게 되고 멀리 있는 부분은 연해집니다.

mainView.layer.shadowOffset = CGSize(width: 0, height: 0)

이것이 가장 이해 하기 힘들 수가 있는데요. 

그림자는 빛의 위에 따라서 만들어지죠. 태양이 동쪽에 있으면 그림자는 서쪽에서 생깁니다.

바로 이것이랑 같은 겁니다. 

width는 x 축이라 생각하고 height는 y축이라 생각하세요.

 

- 뷰에 곡선 만들기 -

UIView에 곡선을 만드는 방법은 간단합니다.

mainView.layer.cornerRadius = 20

바로 이것인데요. 

숫자가 크면 클수록 곡선률이 높아지게 됩니다.

그럼 원을 만들려면 어떻게 해야할까요?

현재 뷰의 너비와 높이가 동일하게 1:1 비율이라 가정하면 너비 / 2 로 해주면 됩니다.

 

- 외각 부분 살리기 -

mainView.layer.masksToBounds = false

그림자는 뷰의 외각 부분입니다.

그리고 곡선을 자르게 되면 잘릴 부분은 모두 외각 부분이죠.

그래서 위의 코드를 true로 할 경우 외각 부분은 모두 잘려 안 보이게 됩니다.

그래서 false로 해주셔야합니다.

 

** Extension으로 편하게 적용하기 **

저는 보통 뷰에 디자인을 적용할 때, 새로운 뷰를 만들고  @IBDesignable을 사용합니다.

그래야 일의 효율이 증가하기 때문이져

그런데,,, 곡선과 그림자가 적용이 안되는 겁니다....

정말 당황스러웠죠....

그런데 일반적인 UIView에서는 잘되는데, UIView를 상속받은 새로운 뷰는 안되는 겁니다...(아직 이유는 모르겠습니다 ㅠㅠ)

결국 UIView를 확장(Extension)해서 적용을 할 수 있게 됐습니다.

extension UIView {
    
    //extension에서는 Stored Property(값을 넣는 프로퍼티)가
    //안되기 때문에, 이렇게 get과 set으로 넣어줘야한다.
    @IBInspectable var cornerRadius : CGFloat{
      //외각선을 짤라주기
        get{
            return self.layer.cornerRadius
        }
        
        set{
            self.layer.cornerRadius = newValue
        }
        
    }
    
    @IBInspectable var shadowRadius : CGFloat {
        //그림자의 퍼짐정도
        get{
            return self.layer.shadowRadius
        }
        
        
        set{
            self.layer.shadowRadius = newValue
        }
        
    }
    
    @IBInspectable var shadowOpacity : Float {
        //그림자의 투명도 0 - 1 사이의 값을 가짐
        get{
            return self.layer.shadowOpacity
        }
        
        set{
            self.layer.shadowOpacity = newValue
        }
        
    }
    
    @IBInspectable var shadowColor : UIColor {
        //그림자의 색
        get{    
            if let shadowColor = self.layer.shadowColor {
                    return UIColor(cgColor: shadowColor)
            }            
            return UIColor.clear            
        }
        set{
            //그림자의 색이 지정됬을 경우            
            self.layer.shadowOffset = CGSize(width: 0, height: 0)
            //shadowOffset은 빛의 위치를 지정해준다. 북쪽에 있으면 남쪽으로 그림지가 생기는 것
            self.layer.shadowColor = newValue.cgColor
            //그림자의 색을 지정
        }
        
    }
    
    @IBInspectable var maskToBound : Bool{
        
        get{            
            return self.layer.masksToBounds  
        }
        
        set{
            self.layer.masksToBounds = newValue
        }
        
    }

    
}

새로운 파일을 만들고 위 코드를 복사해서 붙여넣어주세요!

그러면 StroyBoard에 새로운 것이 추가 될 겁니다.

숫자를 변경해주시면 자동으로 적용이 되니 사용하기 편해질 겁니다!

 

모두모두 즐코 하세용~~!!