[iOS/Swift] RadioButton - UIButton을 사용해서 라디오 버튼 만들기, 내가 생각하는 방법

RadioButton 에시

 안녕하세요. 오늘은 라디오 버튼을 구현해보도록 하겠습니다. 라디오 버튼은 항목을 선택하는 기능을 제공하는데요. 체크 박스와 다른 점이 있다면 중복으로 선택이 안 되는 것입니다. 다수의 선택지에서 한 가지만 선택할 수 있는 버튼이라고 생각하시면 됩니다.

 

UIButton 배치

 UIKit에서는 따로 RadioButton을 제공하지 않아서 UIButton을 사용해서 기능을 만들어야 합니다. 저는 UIButton 3개를 배치했고 간단하게 StackView로 묶었습니다.

 

StackView Distribution

 StackView Distribution을 Fill Equally로 설정합니다. 

 

UIButton Tag 설정

 UIButton의 Tag를 지정해줄 예정입니다. Tag를 통해서 해당 버튼이 어떤 버튼인지 비교할 수 있습니다. 저는 위에서부터 0,1,2로 지정해 주었습니다.

 

IBOutlet Collection 사용

 Button 3개를 IBOutlet Collection을 사용해서 ViewController와 연결합니다.

 

UIButton Image 변경

버튼의 Title을 제거하고 Image를 애플에서 제공해주는 기본 이미지에서 circle을 선택합니다. (이 부분은 디자인마다 다를 수 있습니다.)

 

UIButton 설정

 Gif와 같은 방법으로 설정을 진행합니다.

 

@objc private func radioButton(_ sender: UIButton) {
	print("태그 번호 : ", sender.tag)
}

 버튼을 누르면 동작하는 함수를 작성합니다. 함수로 들어온 버튼의 Tag를 출력하는 방법으로 동작을 테스트합니다.

 

self.radioButtons.forEach {
	$0.addTarget(self, action: #selector(self.radioButton(_ :)), for: .touchUpInside)
}

 작성한 함수는 위와같은 방법으로 버튼과 연결합니다. 

 

Xcode Code

 작성된 Code를 위와같이 확인하고 테스트를 연결 상태를 테스트합니다.

 

Button 동작 모습

 Button의 동작 모습입니다. 지정해준 Tag와 연결된 함수가 잘 동작하는 모습입니다. 이제는 위 동작에서 RadioButton과 같은 효과를 만들어야 합니다.

 

// UIButton 반복
self.radioButtons.forEach {
    // sender로 들어온 버튼과 tag를 비교
    if $0.tag == sender.tag {
        // 같은 tag이면 색이 찬 동그라미로 변경
        $0.setImage(UIImage(systemName: "circle.fill"), for: .normal)
    } else {
        // 다른 tag이면 색이 없는 동그라미로 변경
        $0.setImage(UIImage(systemName: "circle"), for: .normal)
    }
}

 위에 코드를 통해서 변화를 적용합니다.

 

동작 코드

 코드는 버튼과 연결된 함수에 연결합니다.

 

동작모습

 이렇게 우리는 UIButton을 통해서 RadioButton과 같은 효과를 만들었습니다. 

 

 

아래 소스코드를 통해서 테스트할 수 있습니다.

SwiftExample/RadioButton at main · wlxo0401/SwiftExample (github.com)

GitHub - wlxo0401/SwiftExample: My study, record and share