[swift]라디오 버튼 커스텀으로 만들기 custom radio button

swift로 사이드 프로젝트를 진행중에 라디오 버튼을 커스텀으로 만들어 보았습니다.

라디오 버튼은 동시 클릭이 안되고 하나만 클릭이 가능하다는 특성이 있습니다.

 

---

버튼을 만드는 부분 코드입니다.

import Foundation
import UIKit

protocol SearchSegmentControllerDelegate:class {
    func segmentValueChanged(to index: Int)
}

class SearchSegmentController: UIView {
    private var buttonTitles: [String]!
    private var buttons: [UIButton]!
    var textColor: UIColor = .black
    
    var selectedColor: UIColor = #colorLiteral(red: 0.9529411793, green: 0.6862745285, blue: 0.1333333403, alpha: 1)
    public private(set) var selectedIndex: Int = 0
    weak var searchBarDelegate : SearchSegmentControllerDelegate?
    
    override init(frame: CGRect) {
        super.init(frame: frame)
    }
    
    convenience init(frame: CGRect, buttonTitles: [String]) {
        self.init(frame: frame)
        self.buttonTitles = buttonTitles
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    override func draw(_ rect: CGRect) {
        super.draw(rect)
        print("my custom segment - draw() call")
        updateView()
    }
    
    fileprivate func updateView() {
        print("MyCustomSegmentControll - update() call")
        createButton()
        configStackView()
    }
    
    fileprivate func createButton() {
        self.buttons = [UIButton]()
        self.buttons.removeAll()
        self.subviews.forEach({$0.removeFromSuperview()})
        for buttonTitleItem in buttonTitles {
            let button = UIButton(type: .system)
            button.backgroundColor = .white
            button.titleLabel?.textColor = .black
            button.setTitle(buttonTitleItem, for: .normal)
            button.setTitleColor(textColor, for: .normal)
            button.addTarget(self, action: #selector(SearchSegmentController.buttonAction(_:)), for: .touchUpInside)
            button.contentEdgeInsets = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)
            button.titleLabel?.adjustsFontSizeToFitWidth = true
            button.titleLabel?.minimumScaleFactor = 0.5
            self.buttons.append(button)
        }
        buttons[0].setTitleColor(selectedColor, for: .normal)
    }
    
    fileprivate func configStackView() {
        let stackView = UIStackView(arrangedSubviews: buttons)
        stackView.axis = .horizontal
        stackView.alignment = .center
        stackView.distribution = .fillEqually
        self.addSubview(stackView)
        stackView.translatesAutoresizingMaskIntoConstraints = false
        stackView.topAnchor.constraint(equalTo: self.topAnchor).isActive = true
        stackView.bottomAnchor.constraint(equalTo: self.bottomAnchor).isActive = true
        stackView.leadingAnchor.constraint(equalTo: self.leadingAnchor).isActive = true
        stackView.trailingAnchor.constraint(equalTo: self.trailingAnchor).isActive = true
    }
    
    @objc func buttonAction(_ sender: UIButton) {

        for(buttonIndex, btn) in buttons.enumerated(){
            btn.setTitleColor(textColor, for: .normal)
            if btn == sender {
                self.selectedIndex = buttonIndex
                searchBarDelegate?.segmentValueChanged(to: self.selectedIndex)
                btn.setTitleColor(#colorLiteral(red: 0.9607843161, green: 0.7058823705, blue: 0.200000003, alpha: 1), for: .normal)
            } else {
                btn.setTitleColor(textColor, for: .normal)
            }
        }
    }
}

---

버튼을 불러오는 부분 코드입니다.

override func loadView() {
        super.loadView()
        print("loadview call")
        
        let myCustomSegmentControll = SearchSegmentController(frame: CGRect(x: 0, y: 0, width: 200, height: 200), buttonTitles: ["전체","제목","저자"])
        myCustomSegmentControll.searchBarDelegate = self
        
        self.view.addSubview(myCustomSegmentControll)
        
        myCustomSegmentControll.translatesAutoresizingMaskIntoConstraints = false
        myCustomSegmentControll.widthAnchor.constraint(equalToConstant: 300).isActive = true
        myCustomSegmentControll.heightAnchor.constraint(equalToConstant: 60).isActive = true
        myCustomSegmentControll.topAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.topAnchor, constant: 50).isActive = true
        myCustomSegmentControll.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
                
    }

 

좋은 강좌를 제공해 주신 유튜버 "개발하는 정대리"님 감사합니다.

아래 강좌 링크를 통해 위 코드에 대한 상세한 설명을 들으실 수 있습니다.

출처 : https://youtu.be/dOSoijHZo5Y