SwiftUI : Toggle Switch (toggleStyle)

 

Toggle에 대해 알아보도록 합시다

Toggle

기본 코드

@State private var someBinding = true

Toggle("SomeText", isOn: $someBinding)

SwiftUI의 Toggle()을 사용하면 UIKit의 UISwitch 에서처럼 사용자가 true이거나 false상태 사이를 이동할 수 있습니다.

 

Toggle()의 현재 값을 저장하는 데 사용할 @State Boolean 속성을 정의해야 합니다. 그런 다음 이것을 사용하여 필요에 따라 다른 view를 표시하거나 숨길 수 있습니다.

 

버튼이 Toggle() 될 때마다if 문을 사용하여 텍스트를 지정해 줄 수 있습니다.

struct ContentView: View {
    
    @State private var someToggle = true
    
    var body: some View {
        VStack {
            Toggle("확인", isOn: $someToggle)
            
            if someToggle {
                Text("확인 되었습니다.")
            } else {
                Text("확인 버튼을 눌러주세요.")
            }
        }
        .padding()
    }
}

위 코드와 동일한 화면을 보여주는 삼항연산자를 사용할 수 도 있겠죠?

struct ContentView: View {
    
    @State private var someToggle = true
    
    var body: some View {
        VStack {
            Toggle("확인", isOn: $someToggle)
            
            someToggle ? Text("확인 되었습니다.") : Text("확인 버튼을 눌러주세요.")
        }
        .padding()
    }
}

Toggle에 색상 부여 

toggleStyle()수정자를 사용하여 Toggle Switch를 만드는 데 사용되는 색상을 사용자 지정할 수 있습니다. 

이것은 Toggle view가 accentColor()와 함께 작동하지 않기 때문에, 색상을 다시 지정하는 유일한 방법입니다.

.toggleStyle(SwitchToggleStyle(tint: Color.yellow))

struct ContentView: View {
    
    @State private var someToggle = true
    
    var body: some View {
        VStack {
            Toggle("확인", isOn: $someToggle)
                .toggleStyle(SwitchToggleStyle(tint: Color.yellow))
            
            someToggle ? Text("확인 되었습니다.") : Text("확인 버튼을 눌러주세요.")
                
        }
        .padding()

삼항연산자를 사용해서 토글이 활성화 되어있을때와 그렇지 않을때에 따라 텍스트를 다르게 해줄수도 있겠네요.

import SwiftUI

struct SwiftUIView: View {
    @State var toggleIsOn: Bool = false
    var body: some View {
        VStack {
            HStack {
                Text("@Seogun :")
                Text(toggleIsOn ? "온라인 중" : "오프라인")
                    .foregroundColor(toggleIsOn ? Color.blue : Color.red)
            }
            .font(.title)
            
            Toggle(isOn: $toggleIsOn, label: {
                Text("로그인")
            })
                .toggleStyle(SwitchToggleStyle(tint: Color(hex:0xff8882)))
            .padding(.horizontal, 100)
             Spacer()
        }
    }
}

참고로 왜인지는 모르겠으나 Xcode 13으로 업데이트하면서 ColorLiteral이 사용되지를 않아 위에서는 hex code extension을 사용했습니다. 사용 방법에 대해 궁금하신분들은 아래 링크를 참고해주세요!

 

SwiftUI 컬러 익스텐션 만들기 - 헥스코드활용

 

 

읽어주셔서 감사합니다🤟