SwiftUI Slider와 Stepper

  • 이번에는 SwiftUI에서 Slider와 Stepper를 어떻게 사용하는지 알아보겠다.
  • Swift 기본 문법을 숙지하고 있다는 가정 하에 작성되었다.

Slider 역할

  • SwiftUI의 Slider는 UIKit의 UISlider와 같은 역할을 한다.

Slider 사용법

  • Slider에는 넣을 수 있는 여러 개의 파라미터가 있다.
  • 그 중에서 가장 많이 사용하는 파라미터에 대해 알아보겠다.
Slider(value: Binding<BinaryFloatingPoint>, label: () -> _, step: Int)
  • Value : Binding 되는 값이 들어간다.
  • In : Slider의 범위를 설정해준다.
  • Step : Slider의 단위를 설정해준다.

Slider 전체 코드

  • 아래와 같은 코드를 실행하면
struct ContentView: View {
    @State private var celsius: Double = 0

    var body: some View {
        VStack {
            Slider(value: $celsius, in: -100...100, step: 0.1)
            Text("\(celsius) Celsius is \(celsius * 9 / 5 + 32) Fahrenheit")
        }
    }
}
  • 이렇게 화면에 표시되게 된다.
swiftui-tutorial-slider-stepper

Stepper 역할

  • SwiftUI의 Stepper는 UIKit의 UIStepper와 같은 역할을 한다.

Stepper 사용법

  • Stepper에도 넣을 수 있는 여러 개의 파라미터가 있다.
  • 그 중에서 가장 많이 사용하는 파라미터에 대해 알아보겠다.
Stepper(StringProtocol, value: Binding<Strideable>, in: ClosedRange<Strideable>)
  • Title : Stepper의 제목 View가 들어간다.
  • Value : Binding 되는 값이 들어간다.
  • In : Stepper의 범위를 설정해준다.

Stepper 전체 코드

  • 아래와 같은 코드를 실행하면
struct ContentViewThree: View {
    @State var age = 22

    var body: some View {
        VStack {
            Stepper("Enter your age", value: $age, in: 0...130)
            Text("Your age is \(age)")
        }
    }
}
  • 이렇게 화면에 표시되게 된다.
swiftui-tutorial-slider-stepper

관련 글