[UIKit] UILabel에 corenrRadius를 적용할 때 수학계산을 해줘야한다는 것을 알고 계셨습니까!🤔 (clipToboudns, masksToBounds차이점)

우선 Radius가 먹히지 않는 문제가 발생해서 그것 부터 해결하고자 했다.

CornerRadius가 안먹힐때 이 방법을 써보자.

🤯 나는 지굼 아래와 같은 모양의 카테고리를 만드는 중

let newsCategoryLabel: UILabel = {
        let newsCategoryLabel = UILabel()
        newsCategoryLabel.textAlignment = .center
        newsCategoryLabel.font = .font(.bold, ofSize: 12)
        newsCategoryLabel.layer.cornerRadius = 20
        newsCategoryLabel.backgroundColor = .white
        // TODO: - 카테고리에 적절한 색상을 넣어야합니다.
        newsCategoryLabel.textColor = .evyBlack1
        return newsCategoryLabel
    }()

위와 같이 코드를 작성했는데, 분명히 나는 radius를 작성했는데 아래처럼 cornerRadius가 적용이 안되는 것이다.

구글링 하다가 발견한 것, 아래의 코드가 선행되어야 한다.

label.clipToBounds = true

근데, 이건 머지?merge?

label.layer.masksToBounds = true

 

🙌🏻 두개 다 적용하면 radius가 짤리게 된다. 도대체 무슨 차이가 있고 언제 어떤 코드를 사용해야할까?

 

1️⃣ clipTobounds

UIView 소속의 인스턴스 프로퍼티이이다.

🍎 Subview가 내 view를 넘어선 경우, 내 뷰를 너머로 그릴 것인지 말것인지를 설정하는 인스턴스이다. default는 false이다.

https://developer.apple.com/documentation/uikit/uiview/1622415-clipstobounds

Apple Developer Documentation

이게 무슨 말이냐 하면, SuperView 안에 SubVIew가 있다고 하자. 
이때 Subview의 boudns를 superView외부로 옮겨버리면, subView는 위치가 어긋나서 그려지겟지?? 
근데 이때 만약 clipToBounds가 true이면, subview는 superview내부에서만 그려짐. 그 피그마에서 clip 하면 내가 지정한 내부에서만 그림을 그릴 수 있는것처럼!!

2️⃣  masksToBounds

clipsToBounds랑 똑같다고 한다. (기능은!)
근데 다른점은, masksToBounds코드를 뜯어보면, 이것은 CALayer 프로퍼티라고 한다. 그래서 잡을때

label.layer.masksToBounds = true

이렇게 .layer로 호출해야함. 호호호 이런이유가 있었군!

🍎 정의를 해보면, subLayer가 내 layer를 넘어간 경우, 내 layer 너머로 그릴것인지 아닌지 한계를 설정하는 것

https://developer.apple.com/documentation/quartzcore/calayer/1410896-maskstobounds

Apple Developer Documentation

 

😃🙌🏻 아하!! 💡🧐

cornerRadius또한 레이어를 기준으로 모서리를 잘리게 하는 것이기 때문에 둘중 어느 하나라도 해줘야되는구나! 를 깨달을 수 있다.

참고자료: https://dongkyprogramming.tistory.com/15

 

---

그리고 개발을 하던 중 발견한 사실이 있다.
여태껏 디자인에 그렇게 크게 신경쓰지 않고 개발을 했어서 피그마에 담긴 내용을 대충 눈대중으로 담으려고 노력했는데, 이렇게 디자이너와 제대로하는 협업은 처음이라 아주세세하게 기록하면서 해야했다.

그중에 고민스러웠던 것이 CorenrRadius였다. 왜냐면,, 피그마에서 준 값이랑 코드로 준 값은 같은데 모양이 다른것이다!! 도대체 뭐가 문제일까?ㅜㅜㅜㅜㅜ 엉엉

 

어쨋든 위의 코드를 적용해서 cornerRadius를 적용한 결과, 아래와 같이 출력됐다.

내가 원하는 모습과는 다르게, 약간 럭비공 모양처럼 요상하게 생겼다. 왜,,, 도대체 왜,,,! 난 피그마에서 디자이너가 준 값이랑 동일하게 준건데!!

CornerRaidus가 생기는 원리를 알아야할 것 같다!

결론은 찾지 못했고, radius가 20이 과한거같은데 ㅠㅠ 방법이 없나..라는 생각 뿐이었다. 분명 피그마에서는 20을 주어서, 나도 코드에서 20을 준건데 너무 과하게 잘리는 것같아서 임의로 조절해줄수도 없고 이거이거,,, 이상하네 …

위: 코드 / 아래: 피그마 화면

피그마에서는 위 사진에서 오른쪽 밑에있는 것처럼, 코드로 변형한 모습을 보여주는데, 저기서도 cornerRadius가 26.5로 잘 넣어져있다. 근데 이걸 출력하면 어케되냐면!!



ㅋㅋㅋㅋㅋㅋㅋㅋ 요롷게 요상하고 괴상한 소세지🌭모양이 된다.

이리저리 코드를 바꿔보면서 도대체가 뭐가 잘못된 것인지 찾아보았다.

 

1️⃣ 1차 추측

버튼에 width, height 사이즈를 주고 radius = 35 적용

override init(frame: CGRect) {
        super.init(frame: .init(origin: .zero, size: .init(width: 205, height: 50)))
        self.configureUI()
    }

→ 근데 이렇게 직접적으로 사이즈를 조절해주고, radius 를 주면, 피그마랑 다름. 피그마에서는 26.5줬는데, 여기서는 35정도 줘야 원하는 반원 모양으로 나옴… 무슨원리지,, 코너가 잘리는 원리가..?

버튼에 사이즈를 직접적으로 주지 않고, autolayout으로 크기를 조절한 경우 다시 뾰족이로 comback

gotoButton.constraint(.widthAnchor, constant: 205)
gotoButton.constraint(.heightAnchor, constant: 50)
// 이렇게 오토레이아웃 주는곳에다가 주고  빌드해보면?
// 위에 사이즈는 지움 (안지워도 근데 뷰는 동일하게 나오네?)

 

뭐,, 원인은 도대체가 뭐가 잘못된것은 모른채로, 이리저리 바꿔보다가 아래 결과를 도출해냈다.

헐, 이거 width 랑 height주느 방식에 따라 다른거같아.

 

2️⃣ 미친!! cornerRadius가 일정한 비율로 잘리는게 아니라, 가진 width와 height에 따라 달라진다고?!?!?!?

 

🤔 cornerRadius란

https://developer.apple.com/documentation/quartzcore/calayer/1410818-cornerradius

Apple Developer Documentation

layer의 배경에 사용하는 둥근 모서리를 그리는데 사용되는 반지름을 의미한다. CGFloat값을 크게 줄 수록 더 굴절률이 크게 발생한다.

예를들어서 보자.

이렇게 100짜리 정사각형에, cornerRadius = 10을 주면 왼쪽위가 깎이는것처럼 저렇게 깎인다.

width와 height가 50이라고 치면, 내가 가장 동그란 버튼을 만들고자한다. 그러면, 그림처럼 4개의 구역으로 나눠서 모서리를 총 네번 깎을 수 있는데, 반지름 25짜리 로 네번을 짤라서 완전 동그란 모양을 만들 수 있다. cornerRadius = 25인 상태이다.

그럼 이제 여기서, cornerRadius가 40이 되버리면 어떻게 될까?

결국 이렇게 큰 원이 작은 사각형을 네 모서리를 잘라가기때문에, 요상한 군고구마 모양🍠이 나올 것임. 아하!!!! 그래서 내가 저렇게 요상하고 뾰족한 군고구마가 나왔구나!!!!!

버튼의 width나 height를 고려해서 radius를 주어야한다고 판단했다.!! 이를 깨닫게 해주신,, 갓듀의 … 코드리뷰

 

 

이렇게 무사히 나는 corenrRadius에 대한 이해랄 미차고 잘 적용해서 칭찬을 받았다는 후문이다~!~! ❤️

 

 

그동안 코드만 주구장창 쳤었는데,, 이제 원리를 하나하나 깨우쳐가니까 재미나다... 씁,,, 하... 🥹