[SwiftUI] User Interface Elements

제목은 거창하지만 줄이면 그냥 UI 요소들이다

 

오늘 살펴볼 UI Elements는

Text, Label, TextField, SecureField, TextEditor, Button, EditButton, Link, Menu, Slider, Stepper, Toggle, Picker, DatePicker, ColorPicker, ProgressView 이다.

 

Text, Label, TextField, SecureField, TextEditor

Text("Text Input and Output")
    .font(.title)
Text("I'm Text")
    .textSelection(.enabled)
Label("I'm Label", systemImage: "tray.fill")
TextField("PlaceHolder", text: self.$textField)
TextField("PlaceHolder with TextInputAutocapitalization",
          text: self.$textInputAutocapitalization)
    .textInputAutocapitalization(.words)
SecureField("PlaceHolder Secure", text: self.$secureField)
TextEditor(text: self.$textEditor)

Text와 Label은 UIKit에서 UILabel과 같은 역할을 하는 것으로 보인다.

Label은 paramete로 Image를 받는 것이 Text와의 차이점이다.

TextField는 PlaceHolder와 Binding할 값을 어디에 써야하는지 헷갈리지 말자.

textInputAutocapitalization Modifier를 쓰면 전달한 인자에 따라 자동으로 대문자를 변환해준다.

SecureField는 UITextField에서 옵션으로 주던 게 자체 UI로 빠져나온듯 하다.

TextEditor는 UITextView와 비슷한 UI로 TextField보다는 상대적으로 긴 글을 작성할 때 사용된다.

 

Button, EditButton, Link, Menu, Slider, Stepper, Toggle

@State var sliderValue: Float = 5.0
@State var stepperValue: Int = 0
@State var toggleValue: Bool = false

Button("Button") {
    print("Button")
}
EditButton()
if let url = URL(string: "https://apple.com/kr") {
    Link("Apple", destination: url)
}
Menu("Menu") {
    Text("Menu Text 1")
    Button("Menu Button 1") {
        
    }
    Text("Menu Text 2")
    Button("Menu Button 2") {
        
    }
    EditButton()
    if let url = URL(string: "https://naver.com") {
        Link("Naver", destination: url)
    }
}
Slider(value: self.$sliderValue, in: 1...10, step: 0.5) {
    Text("Slider Value: \(self.sliderValue)")
}
Stepper(value: self.$stepperValue, step: 1) {
    Text("Stepper Value: \(self.stepperValue)")
}
Toggle(isOn: self.$toggleValue) {
    Text("Toggle Value: \(String(self.toggleValue))")
}

Button은 예시처럼 단순 string으로 Title을 설정할 수도 있고, label을 통해 버튼의 모양을 커스텀 할 수도 있다.

EditButton은 자동은 Edit과 Done을 스위치 해준다.

Link는 URL을 받는 Button이다. UIKit에서 이런건 못봤는데 신기하다.

 

Menu는 List 처럼 생긴 Popup View를 띄운다.

Button 말고 Text를 넣어봤는데, 활성화가 되지 않고 눌러도 아무런 반응을 하지 않았다.

 

Slider, Stepper, Toggle은 너무나도 익숙한 UI고 사용도 크게 어렵지 않기 때문에 별다른 설명이 필요없을거 같다!

 

 

Picker

@State var pickerValue: Int = 0

Picker("Menu Picker", selection: self.$pickerValue) {
    ForEach(0..<101) { per in
        Text(per, format: .percent)
    }
}
.pickerStyle(.menu)

List {
    Picker("Inline Picker", selection: self.$pickerValue) {
        ForEach(0..<5) { per in
            Text(per, format: .percent)
        }
    }
    .pickerStyle(.inline)
    Text("Picker in List")
}

Picker("Wheel Picker", selection: self.$pickerValue) {
    ForEach(0..<101) { per in
        Text(per, format: .percent)
    }
}
.pickerStyle(.wheel)

Picker("Segmented Picker", selection: self.$pickerValue) {
    ForEach(0..<5) { per in
        Text(per, format: .percent)
    }
}
.pickerStyle(.segmented)

Picker와 DatePicker는 스타일이 다양해서 하나씩 분리했다.

menu: Menu UI와 비슷하게 나온다.

inline: Picker가 List 안에 있을 때, 제대로 작동한다. List가 아니라면 wheel과 동일하게 표시된다.

wheel: 휠 형식으로 나오다. 애플 플랫폼에서 자주 접하는 UI다.

segmented: 지금은 선택지가 5개지만, 일부러 넓은 범위와 좁은 간격으로 생성하면 맥북 터치바의 프로그래스 segment처럼 나온다.

 

DatePicker

@State var dataPicker: Date = Date.now

DatePicker("Compact DatePicker",
           selection: self.$dataPicker,
           displayedComponents: .date)
    .datePickerStyle(.compact)

DatePicker("Wheel DatePicker",
           selection: self.$dataPicker,
           displayedComponents: .date)
    .datePickerStyle(.wheel)

DatePicker("Graphical DatePicker",
           selection: self.$dataPicker,
           displayedComponents: .date)
    .datePickerStyle(.graphical)

DatePicker("Compact HourAndMinute DatePicker",
           selection: self.$dataPicker,
           displayedComponents: .hourAndMinute)
    .datePickerStyle(.compact)

DatePicker("Wheel HourAndMinute DatePicker",
           selection: self.$dataPicker,
           displayedComponents: .hourAndMinute)
    .datePickerStyle(.wheel)

DatePicker("Graphical HourAndMinute DatePicker",
           selection: self.$dataPicker,
           displayedComponents: .hourAndMinute)
    .datePickerStyle(.graphical)

date 옵션으로 compact, wheel, graphical

hourAndMinute 옵션으로 compact, wheel, graphical 순서다.

작동 예시를 보면 이해가 더 빠르다.

hourAndMinute에서는 compact와, graphical의 차이가 없다.

 

ColorPicker, ProgressView

@State var colorPicker: Color = .white
@State var progressValue = 0.05
    
ColorPicker("Color Picker", selection: self.$colorPicker)
    .pickerStyle(.menu)

ProgressView(value: self.progressValue)
    .progressViewStyle(.linear)
ProgressView(value: self.progressValue)
    .progressViewStyle(.circular)

Button("Progress Value Up") {
    Timer.scheduledTimer(withTimeInterval: 0.125, repeats: true) { timer in
        self.progressValue += 0.01
        if self.progressValue == 1 {
            timer.invalidate()
        }
    }
}

ColorPicker는 PencilKit이랑 같이 쓰면 좋을거같다.

ProgressView의 기본 Style이 두 개라 둘 다 넣어봤는데,

circular의 경우에 value의 최대값(1)이 되어도 멈추지 않아서 조금 아쉬웠다.

 

 

 

 

ㅂ위의 코드 말고도 각 UI들을 생성하는 생성자는 다양하기 때문에 목적에 맞는 생성자를 호출하여 활용하자!