모서리를 깎아보자! - 2 -

1편 링크

1편에서는 숫자가 늘어남에 따라서 모든 숫자를 반영하는 뱃지를 만들지는 못했다.
예를 들어, 10 정도는 뱃지안에 들어왔지만, 100000 -> 10... 이런식으로 표현이 되었다.

 

이 문제를 해결하기 위해 했던 고민과 그 해결을 정리하기 위해 글을 쓴다.

접근법

1편에서는 label 과 그 테두리를 수정하는 방향이였다면,
2편에서는 label 을 감싸는 UIView를 하나 선언해서 그 View 의 테두리를 변경하는 방향으로 바꾸었다.
거기다가 뷰의 너비를 유동적으로 조절할 수 있도록 Greater Than or Equal 옵션을 주었다.

그리하고 뱃지 뷰의 배경 cornerRadius 를 조정하는 방식을 사용했다.

self.badgeView.layer.cornerRadius = self.badgeView.frame.size.height / 2

그리고 뱃지 뷰의 오토레이아웃에서, 너비 값을 Greater Than or Equal 을 적용해서 최소한 30은 가질 수 있도록 설정해주었다.

이 화면은 어떻게 띄우냐면,

이것을 더블클릭하면 나온다.

구현 모습

 

결론

글에 두서가 없고 중구난방이지만, 쓰다보면 늘겠지 하는 마음으로 작성했다.
이 글 자체도 짝 프로그래밍 페어(킹왕짱알렉스)께서 알려준 것을 놓치고 싶지 않은 마음에 기록하는 것이다.
두서 없는 글 읽어 주셔서 감사하다. 도움이 되었으면 좋겠다.