[iOS] TextField, TextView에 그림자(shadow) 주기 + 동그란 label 만들기

만약 이런 식으로 TextField나 TextView에 테두리 대신 그림자를 주고 싶다면 어떻게 해야 할까? 

 

UIView의 layer에는 다음과 같은 속성들이 있다. 

• shadowColor : 그림자의 색을 정해줄 수 있다. (CGColor)
• shadowOffset : 그림자가 어디로 얼마나 퍼져있을지를 정해줄 수 있다. 기본값은 (width: 0.0, height: -3.0)이다 (CGSize)
• shadowOpacity : 그림자의 투명도를 정해줄 수 있다. 0.0에서 1.0의 범위에서 정해줄 수 있으며 기본 값은 0.0이다.
• shadowRadius : 그림자가 얼마나 둥근지(곡률) 정해줄 수 있다. 

 

하지만 여기서 TextField와 TextView의 차이가 존재한다. 

 

기존에는 layer.masksToBounds가 기본으로 false이기 때문에, TextField의 경우 따로 지정을 해주지 않아도 해당 뷰의 bounds를 넘어 그림자가 표현이 됐다. 

 

masksToBounds가 sublayer를 해당 뷰의 bounds로 자를지 말지를 정하는 프로퍼티이기 때문에 true로 하게 될 경우 만약 해당 뷰를 넘어 표현이 된다면 모두 잘리게 된다. 

 

하지만 TextView의 경우 이를 따로 false로 지정해줘야 그림자가 잘리지 않고 표현이 됐다.

뭐야... 기본 값 false라매...

 

그런데 TextView는 찍어보면 이렇게 나온다. 

 

아직 왜 TextView의 masksToBounds가 true인지 정확한 근거는 찾지 못했다 🥲

 

어쨌든 textView와 textField에 그림자를 주기 위해선 layer의 shadow관련 프로퍼티 값을 설정해주면 그림자를 줄 수 있다.

view.layer.shadowColor = UIColor.black.cgColor
view.layer.shadowOffset = CGSize(width: 0, height: 5)
view.layer.shadowOpacity = 0.3
view.layer.shadowRadius = 5.0

이런 식으로 말이다. 

---

추가적으로 그럼 혹시 동그란 Label을 만들 수는 없을까??

처음에는 CoreGraphics를 통해 동그라미를 직접 그려야하나 생각했지만 이렇게 할 경우 내부에 텍스트를 적을 수 없었고 따로 또 label을 올려줘야했다. 따라서 Label 자체를 동그란 형태로 만들고 싶었다. 

 

그래서 생각한 것이 masksToBounds 프로퍼티를 활용하는 것이었다. 

masksToBounds 프로퍼티를 true로 설정할 경우 bounds 밖에는 어떤 것이 있든 보이지 않게 된다. 

 

따라서 Label의 backgroundColor를 따로 정해주고 cornerRadius를 정해주면 동그라미로 만들 수 있었다. 

여기서 완전히 동그라미로 만들어주려면 cornerRadius를 전체 width(혹은 height)의 절반을 주면 된다. 

 

class ProjectHeaderCircleLabel: UILabel {

    override func layoutSubviews() {
        super.layoutSubviews()
        
        self.layer.cornerRadius = self.bounds.width / 2
        self.layer.masksToBounds = true
    }

}

이런 식으로 커스텀 Label을 만들고 label을 생성할 때 이 클래스로 만들어주면 동그라미 label을 만들어줄 수 있다. 

 

이때 layoutSubviews 메서드를 재정의하여 내부에서 cornerRadius를 줬는데 이는 뷰의 크기가 변경되어 layout이 변경될 때마다 호출되는 메서드이기 때문이다. 따라서 만약 내부 텍스트가 변동하면서 view의 크기가 바뀌더라도 항상 동그라미 모양이 유지될 수 있도록 해주었다.