SwiftUi 커스텀 라디오 버튼

동기

빌보두 차트 앱 개발 도중 라디오 버튼을 눌러 해당 차트를 불러오는 기능을 구현해야 하는데 Swift UI에는 라디오 버튼이 따로 없기 때문에 내가 만들어야 한다..

목표

• 이전 선택된 버튼과 현재 선택된 버튼이 같은지를 판별
• 현재 선택된 버튼의 글자색과 배경색 변경
• callback함수로 이전 선택된 버튼id와 현재 선택된 버튼 id를 보냄

순서

1. 라디오버튼을 담을 그룹 생성하기

struct RadioButtonGroup: View {
    let window = UIScreen.main.bounds.size
    let items :[String] = ["누적","최신","일간","주간","월간"]
    
    @State var selectedId:Int = 0
    
    let callback: ((Int,Int)) -> ()
    
    func radioGroupCallback(id: Int) {
        callback((selectedId,id)) //콜백 (이전 선택,현재 선택) 을 튜블 형태로 
        selectedId = id //선택된 아이디 변경
        
    }
    
    
    var body: some View {
        
        VStack(alignment: .leading) {
            HStack(spacing: 1) { //버튼간 간격
                
                ForEach(Array(items.enumerated()), id: \.offset) { idx, item in
                    RadioBttuon(title: item, id:idx, callback: self.radioGroupCallback, selectedID: self.selectedId) //버튼 설정
                }
            }.frame(width: window.width, height: 30, alignment: .center)
        }
        
    }
    
}

2. 라디오버튼 구현

struct RadioBttuon: View {
    let window = UIScreen.main.bounds.size
    let id:Int
    let title:String
    let callback: (Int)->()
    let selectedId:Int
    init(
        title:String,
        id: Int,
        callback: @escaping (Int)->(),
        selectedID: Int
    ) {
        self.title = title
        self.id = id
        self.selectedId = selectedID
        self.callback = callback
    }
    
    var body: some View {
        
        Button {
         
            self.callback(id)
            
            
        } label: {
            
            Text(title).fontWeight(.bold).tracking(4) //자간 간격 4 만큼
            
            
            //글자 색
                .foregroundColor(self.selectedId != self.id ? Color("UnSelectedTextColor"):.white)
            
            //배경색
                .background(self.selectedId != self.id ? Color("UnSelectedRbtnColor")  : Color("PrimaryColor"))
                .cornerRadius(10)
            //테두리 설정
                .overlay(RoundedRectangle(cornerRadius: 10).stroke(Color("PrimaryColor"),lineWidth: 1))
        }.frame(width: window.width*0.15, height: window.height*0.02, alignment: .center)
            //최종 크기
        
        
        
    }
}

결과

정리

• 가장 바깥 뷰에서 콜백으로 받은 이전 버튼 아이디와 현재 버튼 아이
  디 값이 다를 경우 해당 아이디별 화면을 띄운다.