How to hide the label of a Picker, Stepper, Toggle, and more using labelsHidden()

 

Hacking with Swift 사이트의 강좌 번역본입니다.

 

[원문 : https://www.hackingwithswift.com/quick-start/swiftui/how-to-hide-the-label-of-a-picker-stepper-toggle-and-more-using-labelshidden]

 

How to hide the label of a Picker, Stepper, Toggle, and more using labelsHidden()

 

SwiftUI는 컨트롤에 라벨을 추가해야하고, 좀 더 정확한 UI 레이아웃을 얻을 수 있도록 일반적으로 해당 라벨을 숨기고자 합니다. 하지만, 라벨을 숨기는 나쁜(bad) 방법과 좋은(good) 방법이 있고, 이미 일반적으로 사용자에게 피해를 주는 나쁜 선택을 하는 경우가 있습니다. 

 

첫번째, 라벨을 숨기는 옳은(right) 방법을 살펴봅시다. 예제에서 처럼, 다음은 사용자가 숫자를 선택할 수 있는 Picker입니다.

Picker("Select a number", selection: $selectedNumber) {
    ForEach(0..<10) {
        Text("\($0)")
    }
}

 

기본적으로, 왼쪽에 Select a number, (iOS에서는) 오른쪽에 휠 picker를 보여줄 것입니다. 라벨이 작은 공간에 꽉 차있기때문에, 초라해 보입니다 - 더 좋은 생각은 사용자정의 텍스트 라벨로 된 VStack을 사용하고, Picker에 있는 라벨을 숨기는 것입니다.

 

Picker에 있는 라벨을 숨기기 위해(DatePicker, Stepper, Toggle 또는 라벨일 필요한 다른 뷰) 다음과 같이, 뷰에 labelsHidden() modifier를 추가해야 합니다.

Picker("Select a number", selection: $selectedNumber) {
    ForEach(0..<10) {
        Text("\($0)")
    }
}
.labelsHidden()

 

여전히 라벨을 만들지만, 이제는 보여지지 않습니다. 결과적으로, Picker를 VStack 안에 넣고 원하는 라벨을 추가할 수 있습니다.

 

팁: 모든 라벨을 숨기길 원하는 경우에 VStack 또는 가장 바깥쪽 컨테이너에 사용되는 것에, labelsHidden() modifier을 적용할 수 있습니다.

 

특이한 경우에, 다음과 같이 라벨을 숨기는 잘못된 방법은 EmptyView를 사용하는 것입니다.

Picker(selection: $selectedNumber, label: EmptyView()) {
    ForEach(0..<10) {
        Text("\($0)")
    }
}

 

네, 마지막 결과는 같아 보이지만, labelsHidden()을 사용하는것이 훨씬 좋은 중요한 이유가 있습니다: 숨겨진 라벨은 여전히 화면 읽기(reader)에 접근할 수 있으며, 텍스트가 보이지 않더라도 VoiceOver가 UI 구조를 이해하는데 도움이 됩니다.