궁금한 내용을 검색해보세요!
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
서근 개발노트
티스토리에 팔로잉
SWIFTUI/Controls

SwiftUI : Toggle Switch (toggleStyle)

서근
QUOTE THE DAY

“ 좋은 소프트웨어의 기능이란 복잡한 것을 간단하게 보이도록 만드는 것이다. ”

- Grady Booch (그래디 부치)
Written by SeogunSEOGUN

SwiftUI : Toggle Switch (toggleStyle)

 

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

Toggle

기본 코드

swift
UNFOLDED
@State private var someBinding = true
Toggle("SomeText", isOn: $someBinding)

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

 

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

 

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

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

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

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

SwiftUI : Toggle Switch (toggleStyle) - Toggle - 기본 코드

Toggle에 색상 부여 

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

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

swift
UNFOLDED
.toggleStyle(SwitchToggleStyle(tint: Color.yellow))
swift
UNFOLDED
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()

SwiftUI : Toggle Switch (toggleStyle) - Toggle - Toggle에 색상 부여 

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

swift
UNFOLDED
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 : Toggle Switch (toggleStyle) - Toggle - Toggle에 색상 부여 

 

읽어주셔서 감사합니다🤟

 


잘못된 내용이 있으면 언제든 피드백 부탁드립니다.

'SWIFTUI > Controls' 카테고리의 다른 글

SwiftUI : Dynamic List and identifiable  (0) 2021.05.04
SwiftUI : Text  (0) 2021.04.29
SwiftUI : Alert (알림 메세지)  (0) 2021.01.23
SwiftUI : EditButton [onDelete, OnMove]  (1) 2021.01.23
SwiftUI : Button / onTapGesture  (4) 2021.01.23


서근


위처럼 이미지 와 함께 댓글을 작성할 수 있습니다.