소개

RxSwift의 도입을 검토하고 있다.

Swift로 써 왔지만, RxSwift도 앞으로 사용해 가고 싶다.

라고 말한 RxSwift 초보자용의 기사입니다.
RxSwift를 사용하여 간단한 데이터 바인딩 샘플을 만듭니다.

이 기사의 목표

이 기사에서는 ViewController 및 ViewModel 값을 bind하여 UITextField가 업데이트되면 UILabel이 업데이트되는 샘플을 만듭니다.

샘플의 전체 이미지

ViewController와 ViewModel간에 데이터 바인딩을 수행하고 값이 업데이트되면 View가 업데이트합니다.

아래 준비

Xcode에서 새 프로젝트를 만들고 RxSwift 및 RxCocoa를 가져옵니다.

RxSwift 및 RxCocoa 가져오기

【Swift】 Carthage에서 RxSwift 가져오기

이 기사를 참조하여 RxSwift를 프로젝트로 가져옵니다.

View 준비

먼저 StoryBoard에 UITextField와 UILabel을 놓고 ViewController에 연결합니다.

ViewContoller.swift

import UIKit

class ViewController: UIViewController {
    @IBOutlet weak private var textField: UITextField!
    @IBOutlet weak private var titleLabel: UILabel!

    override func viewDidLoad() {
        super.viewDidLoad()
    }
}

TextField 업데이트 모니터링

그런 다음 TextField가 입력을 모니터링하는 코드를 ViewController에 추가합니다.

ViewContoller.swift

import UIKit
import RxSwift
import RxCocoa

class ViewController: UIViewController {
    @IBOutlet weak private var textField: UITextField!
    @IBOutlet weak private var titleLabel: UILabel!

    private let disposeBag = DisposeBag()

    override func viewDidLoad() {
        super.viewDidLoad()
        bind()
    }

    private func bind() {
        textField.rx.text.orEmpty.asObservable()
            .subscribe { [weak self] in
                //　ここでViewModelに値の更新を通知します。
            }
            .disposed(by: disposeBag)
    }
}

ViewModel에서 대상 값 만들기

ViewModel.swift

import RxSwift

class ViewModel {
    var title: Observable<String> {
        return titleSubject
    }
    private let titleSubject = PublishSubject<String>()
}

모니터링할 변수를 만들고 관리합니다.
대상인 titleSubject는 외부에서 업데이트할 수 없도록 캡슐화합니다.

ViewController에서 값을 받는 코드 추가

ViewContoller.swift

import UIKit
import RxSwift
import RxCocoa

class ViewController: UIViewController {
    @IBOutlet weak private var textField: UITextField!
    @IBOutlet weak private var titleLabel: UILabel!

    private let viewModel = ViewModel()
    private let disposeBag = DisposeBag()

    override func viewDidLoad() {
        super.viewDidLoad()
        bind()
    }

    private func bind() {
        textField.rx.text.orEmpty.asObservable()
            .subscribe { [weak self] in
                //　ここでViewModelに値の更新を通知します。
            }
            .disposed(by: disposeBag)

        viewModel.title.asObservable()
            .subscribe { [weak self] in
                //　ここでViewModelの更新を受け取ります。
            }.disposed(by: disposeBag)
    }
}

ViewController에서 VideoModel 값 업데이트

ViewModel의 관리 대상은 캡슐화하고 있으므로 새롭게 함수를 만들어 값을 갱신합니다.

ViewContoller.swift

    private func bind() {
        textField.rx.text.orEmpty.asObservable()
            .subscribe { [weak self] in
                guard let value = $0.element else { return }
                self?.viewModel.set(text: value)
            }
            .disposed(by: disposeBag)

        viewModel.title.asObservable()
            .subscribe { [weak self] in
                //　ここでViewModelの更新を受け取ります。
            }.disposed(by: disposeBag)
    }

ViewModel.swift

import RxSwift

class ViewModel {
    var title: Observable<String> {
        return titleSubject
    }
    private let titleSubject = PublishSubject<String>()

    func set(text: String) {
        titleSubject.onNext(text)
    }
}

이제 ViewController에서 VideoModel의 모니터링된 값을 업데이트할 수 있습니다.

ViewModel 업데이트를 받고 View 업데이트

ViewModel을 업데이트 할 수있었습니다.
마지막으로 방금 만든 ViewModel 값 업데이트를 받는 코드에 View를 업데이트하는 코드를 추가합니다.

ViewContoller.swift

    private func bind() {
        textField.rx.text.orEmpty.asObservable()
            .subscribe { [weak self] in
                guard let value = $0.element else { return }
                self?.viewModel.set(text: value)
            }
            .disposed(by: disposeBag)

        viewModel.title.asObservable()
            .subscribe { [weak self] in
                self?.titleLabel.text = $0.element
            }.disposed(by: disposeBag)
    }

쉽게 UITextField와 UILabel 데이터를 바인딩 할 수있었습니다.

샘플 코드

htps : // 기주 b. 코 m / 하나오 / Rx ぃ ft_ 베긴_

요약

세세한 부분에 대한 설명은 충분하지 않지만 RxSwift를 사용하여 데이터 바인딩을 쉽게 할 수있었습니다.

기사에 대해 잘못된 부분이나 지적 등이 있으면 의견에 부탁드립니다.