InterfaceBuilder의 스토리보드에서 UIStepper는 아래 그림과 같이 마이너스(-) 버튼과 플러스(+) 버튼이 있으며 버튼을 누를때마다 값이 증감하는 컴포넌트입니다. 스테퍼의 값은 Double 타입의 형태로 UIStepper 인스턴스에 자체적으로 저장됩니다만 화면에는 표시되지 않기 때문에 알 방법이 없습니다. 이를 레이블(UILabel)에 표시하는 예제입니다.

Animated GIF - Find & Share on GIPHY

 

참고: UIStepper 최소값, 최대값, 증감값(step value) 설정하기

1) 스토리보드에서 UIStepper 컴포넌트를 선택한 후 우측 Attribute Inspector에서 설정

2) 프로그래밍 방식으로 설정

// IBOutlet 연결
@IBOutlet weak var stepperCount: UIStepper!

// 현재값 설정
stepperCount.value = 0

// 증감값(stepValue) 설정
stepperCount.stepValue = 5.0

// 최소값 및 최대값 설정
stepperCount.minimumValue = 0.0
stepperCount.maximumValue = 10000.0

 

 

먼저 일반적인 방법으로 구현하고, 다음엔 RxSwift(RxCocoa)를 사용하여 구현하도록 하겠습니다.

방법 1 – 일반

1) 스토리보드에 레이블과 스테퍼를 배치한 후 각각 @IBOutlet으로 뷰 컨트롤러 코드와 연결합니다. 이 변수들은 각 컴포넌트를 참고하게 됩니다.

 

2) 스토리보드에 스테퍼를 @IBAction으로 뷰 컨트롤러 코드와 연결합니다. stepperActCount 메서드는 버튼이 눌렸을 때 실행됩니다.

 

3) 초기값을 레이블에 표시하도록 설정합니다. viewDidLoad(_:)에 아래 코드를 추가합니다.

override func viewDidLoad() {
    super.viewDidLoad()

    lblCount.text = "\(stepperCount.value)"   
}

 

4) 값이 증감될때마다(=>스테퍼 버튼을 누를때마다) 레이블에 표시되는 값이 업데이트되도록 합니다. @IBAction 함수인 stepperActCount 내에 다음과 같이 작성합니다.

@IBAction func stepperActCount(_ sender: UIStepper) {
    lblCount.text = "\(sender.value)"
}

 

빌드 및 실행하여 결과를 확인합니다.

 

방법 2 – RxSwift(RxCocoa) 사용하여 구현하기

참고

 

0) CocoaPods 프로젝트로 초기화하고, RxSwift를 설치합니다.

# RxSwift
pod 'RxSwift'
pod 'RxCocoa'

 

뷰 컨트롤러에 RxSwiftimport 합니다.

  • import RxSwift

 

1) 스토리보드에 레이블과 스테퍼를 배치한 후 각각 @IBOutlet으로 뷰 컨트롤러 코드와 연결합니다. 이 변수들은 각 컴포넌트를 참고하게 됩니다.

 

2) @IBAction은 추가하지 않으며, 대신 viewDidLoad(_:)에 아래 코드를 추가합니다.

_ = stepperCount.rx.value.subscribe(onNext: { [unowned self] value in
    lblCount.text = "\(value)"
})
  • UI 컴포넌트 뒤에 rx를 붙이면 RxSwift의 기능을 사용할 수 있습니다.
  • value.subscribe
    • value(스테퍼의 현재 값)이 변경될 때마다 구독(subscribe)하여 정보를 업데이트합니다.
    • onNext: 값이 업데이트 되었을 때 실행할 동작을 지정합니다.
  • [unowned self]
    • 해당 클로저 안에 있는 변수에 자동으로 self 가 붙은 것으로 간주되며, self 사용 시 순환 참조의 문제를 방지하기 위해 unowned 키워드가 사용되었습니다.
    • 참고 – [Swift] weak와 unowned의 차이
  • lblCount.text = "\(value)"
    • value 값을 레이블에 업데이트합니다.

 

또는

_ = stepperCount.rx.value.map { String($0) }.bind(to: lblCount.rx.text)

로도 작성할 수 있습니다.

 

빌드 및 실행하여 결과를 확인합니다.

문의 | 코멘트 또는 yoonbumtae@gmail.com


카테고리: Swift


0개의 댓글

답글 남기기

Avatar placeholder

이메일 주소는 공개되지 않습니다.

계산결과를 입력해주세요 (스팸댓글 방지용) 96 − 91 =