라운드 프레임 버튼 만들기

이번 글에서는 "라운드 프레임 버튼"을 두가지 방식("스토리 보드"와 "코딩으로 직접 추가")으로 만들어 보겠습니다.

 

스토리 보드로 라운드 프레임 버튼 만들기

우선 ViewController 중앙에 아래와 같이 UI 버튼을 추가합니다.

 

버튼을 중앙에 정렬 되도록 아래 그림과 같이 오토레이아웃 값을 설정해줍니다.

 

라운드 프레임 처리를 위해 Identity Inspector의 User DefinedRuntime Attributes에 아래와 같은 속성값을 입력해 줍니다.

 

추가로 Attributes Inspector로 이동해 View 부분의 Drawing 관련 부분의 Clip to Bounds를 체크해 줍니다.

 

추가로 오토레이아웃 설정에 width 값을 추가해줍니다.

 

자 이렇게 스토리보드를 사용해 1dp의 검은색 라운드 프레임을 가지고 모서리 곡률이 8인 라운드 버튼을 만들었습니다.

 

 

코딩으로 라운드 프레임 버튼 직접 추가하기

이번에는 코딩으로 라운드 프레임 버튼을 직접 추가해보도록 하겠습니다.

 

저는 스토리보드에서 속성 값을 하나하나 선택해서 입력하는 것 보다 코딩으로 직접 추가하는 방식이 더 빠르고 수월한 것 같아요.

설명하기도 쉽고... 또 여기저기서 설정하지 않고 한곳에서 관리할 수 있으니 직관적이기도 하고... ^___^;;

override func viewDidLoad() {
    super.viewDidLoad()

    // 라운드 프레임 버튼 인스턴스를 생성해 줍니다.
    let btnRedFrame = UIButton()
    // 폰트 사이즈를 18로 설정하고 배경색을 흰색으로 설정한 후
    btnRedFrame.titleLabel!.font = .systemFont(ofSize: 18)
    btnRedFrame.backgroundColor = .white
    // 프레임 곡률과 프레임 두께 그리고 색상을 설정해줍니다.
    btnRedFrame.layer.cornerRadius = 8
    btnRedFrame.layer.borderWidth = 1
    btnRedFrame.layer.borderColor = UIColor(red: 255/255, green: 0/255, blue: 0/255, alpha: 1).cgColor
    // 버튼의 문구와 색상을 설정해준 후 
    btnRedFrame.setTitle("Red Round Frame Button", for:.normal)
    btnRedFrame.setTitleColor(.black, for: .normal)
    // view에 add합니다.
    self.vContents.addSubview(btnRedFrame)

    // 마지막으로 스토리보드에서 추가한 버튼의 하단에 위치하도록 오토레이아웃 값과 버튼의 width값을 입력해 줍니다.
    btnRedFrame.translatesAutoresizingMaskIntoConstraints = false
    btnRedFrame.centerXAnchor.constraint(equalTo: self.vContents.centerXAnchor).isActive = true
    btnRedFrame.centerYAnchor.constraint(equalTo: self.vContents.centerYAnchor, constant: 50.0).isActive = true
    btnRedFrame.widthAnchor.constraint(equalToConstant: 250.0).isActive = true
}

 

이제 앱을 실행하면 아래와 같은 버튼이 추가가 되었음을 확인할 수 있습니다.