Xcode 기능 - 버튼, 뷰 모서리 둥글게 만들기 / button, view cornerRadius

이번에는 버튼, 또는 뷰의 모서리를 둥글게 처리하는 방법에 대해 알려드릴께요

 

 

일단 크게 두 가지 방법이 있습니다.

첫번째로 코드로 간단하게 구현하는 방법을 알려드리겠습니다

 

1) ViewController

일단 버튼, 또는 뷰의 모서리를 둥글게 만들기 위해서 먼저

ViewController 에서 버튼, 뷰가 연결되어 있어야 합니다

 

 

위의 이미지에선 버튼을 연결한 모습입니다.

view 또한 마찬가지 방법으로 연결되어 있으면 됩니다.

 

저는 모서리를 둥글게 만드는 함수를 따로 만들었습니다

 

그 다음으로 아래처럼 하시면 됩니다!

< 버튼, 뷰 모서리 둥글게 만들기 / button, view cornerRadius 코드 >

연결된 UIButton.layer.cornerRadius = 곡률숫자

Button_plus_outlet.layer.cornerRadius = 4

 

아주 간단하죠?

 

다만 위의 방법의 단점은 실제로 실행을 했을시에 확인이 가능하다는 점입니다.

 

 

 

그래서 이번엔 실행 전에도 곡률을 확인해보고 싶다! 하시는 분들을 위한

두번째 방법을 알려드릴께요

 

이번에는 버튼에만 해당되는 내용입니다

2) UIButton

이번에는 파일을 새로 만드셔야 합니다

 

위 이미지 순으로 클릭하신 다음에

Subclass of 값에 UIButton을 입력, 또는 선택을 해주셔야 합니다!

Class 값은 사용하실 이름입니다. RoundButton 이런식으로 적어주시면 되겠습니다

 

타겟까지 설정이 된채로 완료하시면

이런 화면이 뜰겁니다

 

이제 여기서 아래 화면처럼 코드를 붙여주시면 됩니다!

 

< 버튼 모서리 둥글게 만드는 함수 / UIButton Class 코드 >

import UIKit

@IBDesignable
class YourButton: UIButton {

    @IBInspectable var cornerRadius: CGFloat = 0{
        didSet{
        self.layer.cornerRadius = cornerRadius
        }
    }

    @IBInspectable var borderWidth: CGFloat = 0{
        didSet{
            self.layer.borderWidth = borderWidth
        }
    }

    @IBInspectable var borderColor: UIColor = UIColor.clear{
        didSet{
            self.layer.borderColor = borderColor.cgColor
        }
    }

}

 

이렇게 만드신 다음에 MainStoryboard에 들어가셔서

 

버튼을 넣으신 다음에 Class를 아까 만들었던 Class로 설정을 해주셔야 합니다!

 

그렇게 완료가 되면?

 

이렇게 설정이 바로 가능해집니다!

 

 

이렇게 두가지 방법으로 곡률을 설정할 수 있답니다