SwiftUI 다양한 토글 형태를 만들어 주기 위한 ToggleStyle 프로토콜

# 🥨  체크박스 를  만들고 싶다면

SwiftUI 에서 제공하는 Toggle 구조체를 사용하지 않고도 SF Symbol의 이미지를 활용해 클릭할 때마다 전환해주면서 체크박스를 구현해줄 수 있다. 코드 예시는 아래와 같다.

import SwiftUI

struct MyTag {
    let label : String
    let value : Int
}

struct ToggleStylePracticeView: View {
    @State var selectedTopics : [String] = ["tag1", "tag3"]
    
    let myTags : [MyTag] =  [
        MyTag(label: "tag1", value: 1),
        MyTag(label: "tag2", value: 2),
        MyTag(label: "tag3", value: 3),
        MyTag(label: "tag4", value: 4),
        MyTag(label: "tag5", value: 5),
    ]
    
    var body: some View {
        VStack(alignment: .leading, spacing: 0){
            ForEach(myTags.map{$0.label}, id : \.self){el in
                VStack(spacing: 0){
                    HStack{
                        Button{
                            if(selectedTopics.contains(el)){
                                selectedTopics = selectedTopics.filter{topic in topic != el}
                            }else{
                                selectedTopics.append(el)
                            }
                        }label : {
                            HStack(alignment: .center){
                                
                                selectedTopics.contains(el)
                                ?  Image(systemName:  "checkmark.circle.fill")
                                    .imageScale(.large)
                                    .foregroundColor(.green)
                                :  Image(systemName:  "circle")
                                    .imageScale(.large)
                                    .foregroundColor(.green)
                                
                                
                                Text(el)
                                    .foregroundColor(.black)
                                Spacer()
                            }
                            .padding(5)
                        }
                        
                        Spacer()
                    }
                    
                    Divider()
                        .padding(.bottom,5)
                    
                }
            }
        }
    }
}

 

하지만 매번 체크박스를 이렇게 만든다면 코드가 길어지기도 하고 정확히 저 코드에서 무엇을 하고싶은지 의도를 파악하기 오래걸리기 때문에 ToggleStyle 프로토콜을 상속받은 구조체를 모듈화 하여 다양한 모양의 체크박스, 토글 버튼을 만들어주면 좋을 것 같다.

 

# 🥨 SwiftUI에서 제공하는 Toggle View 사용하기

애플 공식문서에서는 Toggle View를 이렇게 설명하고 있다.

https://developer.apple.com/documentation/swiftui/toggle

Toggle | Apple Developer Documentation

 

아래의 예시코드 처럼 사용할 수 있고 label 파라미터에 대한 인자는 후행클로저로서 전달할 수 있다.

import SwiftUI

struct ToggleStylePracticeView: View {
    @State var isOn = false
    
    var body: some View {
        VStack {
            Toggle(isOn: self.$isOn) {
                Text("Toggle: \(String(self.isOn))")
            }
            .toggleStyle(.automatic) // .automatic, .button, .switch 세가지 스타일만 지원한다
        }
    }
}

 

하지만, 이렇게 기본 토글 뷰에 대해서는 위 코드블럭에서 주석으로 말한 것처럼 세가지 토글 스타일만을 지원한다. 그렇기때문에 Toggle View를 활용해서 여러 모양의 체크박스를 구현해주기 위해서 사용해주는게 바로 ToggleStyle 프로토콜이다.

 

# 🥨 ToggleStyle 프로토콜을 활용하여 커스텀 토글 버튼 만드는 방법

https://developer.apple.com/documentation/swiftui/togglestyle

ToggleStyle | Apple Developer Documentation

 

1) 우선 토글에 커스텀 스타일을 적용해주려면 ToggleStyle 프로토콜을 준수하는 구조체를 정의해주고, makeBody(configuration:) -> some View 메소드를 구현해야한다.

struct ChecklistToggleStyle: ToggleStyle {
    func makeBody(configuration: Configuration) -> some View {
        // Return a view that has checklist appearance and behavior.
    }
}

 

2) 원하는 모양의 토글버튼 view를 넣어준다

struct CheckboxToggleStyle: ToggleStyle {
    
    func makeBody(configuration: Configuration) -> some View {
        Button(action: {
            configuration.isOn.toggle()
        }, label: {
            VStack(alignment: .leading, spacing: 0){
                HStack {
                    Image(systemName: configuration.isOn ? "checkmark.circle.fill" : "circle")
                        .imageScale(.large)
                    
                    configuration.label
                        .foregroundColor(.black)
                }
                .padding(5)
            }
        })
    }
    
}

 

3) 그리고 실질적으로 해당 스타일을 사용할 때는 이렇게 toggleStyle에 넘겨주면된다.

import SwiftUI

struct ToggleStylePracticeView: View {
    @State var isOn = false
    
    var body: some View {
        VStack {
            Toggle(isOn: self.$isOn) {
                Text("Toggle: \(String(self.isOn))")
            }
            .toggleStyle(CheckboxToggleStyle())
        }
    }
}

 

# 🥨  보다 더 확장 가능한 custom toggle style 만들기

앱에서 원 모양, 사각형 모양 등의 체크박스가 있을 때, 우리는 아래와 같이 열거형 (enum)을 사용하여 재사용 가능하도록 만들어줄 수 있고,

struct CheckboxToggleStyle: ToggleStyle {
    let style: Style
    
    func makeBody(configuration: Configuration) -> some View {
        Button(action: {
            configuration.isOn.toggle()
        }, label: {
            VStack(alignment: .leading, spacing: 0){
                HStack {
                    Image(systemName: configuration.isOn ? "checkmark.\(style.sfSymbolName).fill" : style.sfSymbolName)
                        .imageScale(.large)
                    
                    configuration.label
                        .foregroundColor(.black)
                }
                .padding(5)
            }
        })
    }
    
    enum Style {
        case square, circle

        var sfSymbolName: String {
            switch self {
            case .square:
                return "square"
            case .circle:
                return "circle"
            }
        }
    }
    
}

 

중복 선택 가능한 체크 리스트 등 여러가지 형태의 토글, 체크박스를 구현해야할 때도 조금의 로직만 추가해준다면 어렵지 않게 기존에 만들어둔 커스텀 스타일을 재사용해줄 수 있다.

import SwiftUI

struct MyTag {
    let label : String
    let value : Int
}


struct ToggleStylePracticeView: View {
    @State var selectedTopics : [String] = ["tag1", "tag3"]
    
    let myTags : [MyTag] =  [
        MyTag(label: "tag1", value: 1),
        MyTag(label: "tag2", value: 2),
        MyTag(label: "tag3", value: 3),
        MyTag(label: "tag4", value: 4),
        MyTag(label: "tag5", value: 5),
    ]
    
    func binding(for key: String) -> Binding<Bool> {
        return Binding(
            get: {
                return self.selectedTopics.contains(key)
            }
            , set: {
                if($0 == false){
                    self.selectedTopics = self.selectedTopics.filter{topic in topic != key}
                } else{
                    self.selectedTopics.append(key)
                }
            }
        )
    }
    
    var body: some View {
        VStack{
            ForEach(myTags.map{$0.label}, id : \.self){el in
                HStack{
                    Toggle(el, isOn: binding(for:el))
                        .toggleStyle(CheckboxToggleStyle(style: .circle))
                        .foregroundColor(.green)
                    Spacer()
                }
                
            }
            
        }
        
    }
}