button border radius 로 둥근 버튼 만들기

문제발생

프로젝트를 진행하던 중, 둥근 버튼을 만들다가 버튼의 모서리가 뾰족해지는 일이 발생했다. 실제 프로젝트를 기반으로 문제상황과 비슷하게 만들어보았다.

잘 보면, 맨위의 버튼의 모서리가 뾰족하다.

위에서부터 1,2,3,4 의 경우로 나눠서 왜 이런 문제가 발생했고 어떻게 해결을 했는지 기록하려고 한다.

핵심문제와 해결

핵심적인 문제는 잘못된 radius값 입력이었다.
radius 자체의 뜻인 원의 반지름을 생각하면 쉽게 문제가 해결이 되었다.
즉 높이의 절반을 radius로 표현하면 당연히 둥글게 표현이 될것이다.
그리고 만약 height와 width 가 1:1이라면 완벽한 원으로 표현이 될 것이다.

1번의 경우 (오렌지색), 높이에 맞지 않은 radius를 입력했기 때문에 당연히 찌그러질수 밖에 없다.

2,3,4 번의 경우 접근 방법만 다르지 기본적인 개념인 r = height/2 를 따르기 때문에 다 둥글게 표현이 되는 것을 확인할 수 있다.

class 만들어주기

필요성

UIView를 extension해서, @IBDesignable 를 사용하여 스토리보드 inspector에서 쉽게 radius 를 변경할 수도 있다.

또다른 방법으로는 각 view에 맞는 viewcontroller코드에서 지정도 해줄수 있다.

하지만 만약 똑같은 모양의 버튼을 계속 만들어야 한다면 custom class 로 따로 정의해주고 버튼을 class에 상속 시키면 더 편하지 않을까 싶다.

custom class code

custom class 는 다음과 같이 짤 수 있다

//
//  CornerButton.swift
//
//  Created by miori Lee on 2020/12/29.
//

import UIKit

class CornerButton: UIButton {
    
    // Only override draw() if you perform custom drawing.
    // An empty implementation adversely affects performance during animation.
    override func draw(_ rect: CGRect) {
        // Drawing code
        self.clipsToBounds = true
        self.layer.cornerRadius = self.frame.size.height / 2
    }
    
    
}

그다음 적용시키고 싶은 버튼의 identity inspector 영역에서 customclass를 상속해주면 된다.

이런식으로 진행하면, 바로 storyboard상에 적용이 되서, 둥글게 보여진다. 이점이 개인적으로 너무 편했다.

두번째(파랑색)의 경우 빌드를 시키고 시뮬레이터상에서는 둥글게 적용이 되었지만, 스토리보드상에서는 적용이 된건지 안된건지 확인이 힘들다. 하지만 세번째, 네번째 처럼 스토리보드상에서 바로 확인 할 수있는 점은 장점이라고 생각한다.

확장

버튼 뿐만 아니라 이미지 뷰에서도 확장이 가능하다.
위에서 말했다 시피, width:height = 1:1 일때는 원으로 적용이 된다.

시뮬레이터를 돌렸을때,

창모님께 감사의 인사를 :)

결론

구구절절 글이 길었지만 두가지로 요약이 가능할 것 같다.
1. 둥글게 하려면 1/2 를 잊지말자
2. custom class 를 쓰면 편하다