iOS) 선택 옵션 버튼 만들기

왼쪽부터 CGV, 카카오뱅크, 스타벅스 iOS 앱의 캡쳐화면입니다.

 

안녕하세요! 모바일 앱을 이용하다보면 위와 같은 선택 옵션 버튼을 본 적이 있으실텐데요.

선택된 옵션과 선택되지 않은 옵션에 대해 배경색 등으로 차이를 주어 선택한 옵션을 시각적으로 알 수 있는 기능입니다!

 

오늘은 이와 같은 기능을 구현하기 위해 제가 사용했던 방법을 알려드리겠습니다.

 

먼저, 첫번째로 시도했던 방법입니다.

@IBOutlet var oneWeek: UIButton! //1주
@IBOutlet var oneMonth: UIButton! //1달
@IBOutlet var threeMonth: UIButton! //3달 
@IBOutlet var sixMonth: UIButton! //6달

ViewController에 4개의 UIButton을 생성해 주고 IBOutlet으로 각 버튼을 스토리보드에서 연결해주었습니다.

스토리보드의 뷰에서 UIButton을 추가한 모습

    //1주일 버튼 선택시
    @IBAction func weekAction1(_ sender: Any) {
        // 1주일 버튼의 isSelected를 참으로 변경
        self.oneWeek.isSelected = true
        // 나머지 3개의 버튼의 isSelected를 거짓으로 변경
        self.oneMonth.isSelected = false
        self.threeMonth.isSelected = false
        self.sixMonth.isSelected = false
        
        //  1주일 버튼의 배경색을 파란색으로 변경
        self.oneWeek.backgroundColor = UIColor.blue
        // 나머지 3개의 버튼의 배경색을 빨간색으로 변경
        self.oneMonth.backgroundColor = UIColor.red
        self.threeMonth.backgroundColor = UIColor.red
        self.sixMonth.backgroundColor = UIColor.red
    }

그리고 위와 같이 IBAction을 각 버튼마다, 작성해서 연결했습니다 ..!!

예시처럼 4개의 선택 옵션이 있다면, 선택된 버튼의 이름만 다른 4개의 IBAction을 만들어야 합니다..

옵션이 더 많다면,,  * N개의 같은 기능을 하는 함수가 생기겠죠.

가장 간단한 방법이지만,,, 선택 옵션에 사용되는 버튼이 4개라면 이렇게 긴 코드가 작성되어야 합니다..

 

만약 여러 뷰에서 비슷한 선택 옵션 기능이 있거나, 앱이 업데이트 되거나, 버튼의 내용 또는 기능이 바뀐다면 모든 IBAction을 수정해야 하는 굉장히 비효율적인 코드입니다.

 

그래서 저는 이 기능을 좀 더 간단하고 효율적인 방법으로 구현할 수 있는 방법을 고민했습니다.🤔

 

고민하던 중, 

Swift의 Array는 Class를 요소로 가질 수 있고, UIButton은 UIControl Class를 상속하는 Class라는 점이 떠올랐습니다 !!

https://developer.apple.com/documentation/uikit/uibutton

Apple Developer Documentation

 

그래서 조금 더 효율적으로 구현할 수 있는 두번째 방법입니다.

    @IBOutlet var oneWeek2: UIButton!
    @IBOutlet var oneMonth2: UIButton!
    @IBOutlet var threeMonth2: UIButton!
    @IBOutlet var sixMonth2: UIButton!
    
    // UIButton을 요소로 가지는 배열 선언
    var BtnArray = [UIButton]()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //현재 뷰에서 선택옵션 기능에 이용할 UIButton들을 배열에 추가
        BtnArray.append(oneWeek2)
        BtnArray.append(oneMonth2)
        BtnArray.append(threeMonth2)
        BtnArray.append(sixMonth2)
        
    }

먼저, 첫번째 방법과 같이 UIButton을 생성해 주고 IBOutlet으로 각 버튼을 스토리보드에서 연결해주었습니다.

그리고 UIButton을 요소로 가지는 배열 BtnArray에 모든 버튼을 담아줍니다.

 

    @IBAction func selectOptionBtnAction(_ sender: UIButton) {
        for Btn in BtnArray {
            if Btn == sender {
                // 만약 현재 버튼이 이 함수를 호출한 버튼이라면
                Btn.isSelected = true
                Btn.backgroundColor = UIColor.blue
            } else {
                // 이 함수를 호출한 버튼이 아니라면
                Btn.isSelected = false
                Btn.backgroundColor = UIColor.red
            }
        }
    }

그 후, sender가 UIButton인 하나의 IBAction을 만들어서 모든 UIButton들에 해당 함수를 연결해줍니다.

이 함수 안에서 for문을 통해 선택옵션 버튼들을 순회하기때문에 해당 함수를 호출한 버튼일때/아닐때에 대한 기능을 각각 처리해 줄 수 있습니다!

실행 결과

첫번째 방법과 같은 기능을 하지만 이 방법을 이용하면 코드가 굉장히 간결하고 직관적이기에 기능이 변경되더라도 쉽게 수정할 수 있습니다.

 

최고로 효과적인 방법은 아닐지라도, 이 방법을 통해 이름만 다르고 중복되는 기능을 하는 함수를 개선할 수 있습니다.

만약, 여러 뷰에서 이와 같은 기능을 수행한다면 extension 등을 통해 이용해 더욱 효율적으로 구현할 수 있습니다. 😊