はじめに

iOSでコードベースでレイアウトを組む際に便利なSnapKitと、振る舞いを宣言的に記述できるRxSwiftを連携する方法について説明します。

前提

以下のライブラリについて基本的な知識を有している方向けの記事です

RxSwift https://github.com/ReactiveX/RxSwift
RxCocoa https://github.com/ReactiveX/RxSwift/tree/master/RxCocoa
SnapKit https://github.com/SnapKit/SnapKit

サンプルアプリ

https://github.com/idomazine/RxSnapKit
git clone後、 pod install を実行しXCodeでビルドします。

RxでConstraintの値を操作

以下のように記述することでSnapKit.ConstraintのプロパティをRxのBinderに適応させることができます。

import RxSwift
import RxCocoa
import SnapKit

extension Constraint: ReactiveCompatible { }
extension Reactive where Base: Constraint {
    var isActive: Binder<Bool> {
        Binder(base) { constraint, isActive in
            constraint.isActive = isActive
        }
    }
    
    var offset: Binder<Float> {
        Binder(base) { constraint, offset in
            constraint.update(offset: offset)
        }
    }
    
    var inset: Binder<Float> {
        Binder(base) { constraint, inset in
            constraint.update(inset: inset)
        }
    }
    
    var priority: Binder<ConstraintPriority> {
        Binder(base) { constraint, priority in
            constraint.update(priority: priority)
        }
    }
}

サンプルアプリの以下の例では、UISliderのValueを真ん中のビューのcenterXに対応するconstraintのoffsetにbindすることでスライダーに追従した動きを実現しています。

import UIKit
import RxSwift
import RxCocoa
import SnapKit

final class SliderViewController: UIViewController {
    private var flexibleView: UIView!
    private var centerXConstraint: Constraint!
    private var slider: UISlider!

    private let disposeBag = DisposeBag()

    override init(nibName nibNameOrNil: String?, bundle nibBundleOrNil: Bundle?) {
        super.init(nibName: nibNameOrNil, bundle: nibBundleOrNil)
        title = "Slider"
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override func loadView() {
        super.loadView()
        view.backgroundColor = .systemPurple

        flexibleView = {
            let flexibleView = UIView()
            flexibleView.backgroundColor = .systemPink
            view.addSubview(flexibleView)
            flexibleView.snp.makeConstraints {
                $0.centerY.equalToSuperview()
                $0.height.width.equalTo(44)
                centerXConstraint = $0.centerX.equalToSuperview().constraint
            }
            return flexibleView
        }()

        slider = {
            let slider = UISlider()
            slider.minimumValue = -50
            slider.maximumValue = 50
            slider.value = 0
            slider.minimumTrackTintColor = .systemRed
            slider.maximumTrackTintColor = .systemBlue
            view.addSubview(slider)
            slider.snp.makeConstraints {
                $0.top.equalTo(flexibleView.snp.bottom).offset(10)
                $0.width.equalToSuperview().offset(-20)
                $0.centerX.equalToSuperview()
            }
            return slider
        }()
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        // Sliderの値をConstraintのoffset値にバインドしている
        slider.rx.value
            .bind(to: centerXConstraint.rx.offset)
            .disposed(by: disposeBag)
    }
}

Rxで動的にレイアウトを定義

以下のように記述することでストリームで流れてくる値に合わせたレイアウトの定義を行い、自動でConstraintの切り替えを行うBinderを実装できます。

extension Reactive where Base: UIView {
    func makeConstraints<T>(makes: @escaping ((ConstraintMaker, T) -> Void)) -> Binder<T> {
        var constraints: [Constraint] = []
        return Binder(base) { view, value in
            constraints.forEach { $0.deactivate() }
            constraints = view.snp.prepareConstraints { maker in makes(maker, value) }
            constraints.forEach { $0.activate() }
        }
    }
}

サンプルアプリの以下の例では、真ん中の四角いビューがLeftボタンを押すと左に、Rightボタンを押すと右に移動します。
rx.makeConstraintsで定義されたレイアウトは、新たにストリームが流れるとリフレッシュされます。


import RxSwift
import RxCocoa
import SnapKit

final class LeftRightViewController: UIViewController {
    private var boxView: UIView!
    private var leftButton: UIButton!
    private var rightButton: UIButton!

    private let disposeBag = DisposeBag()
    
    override init(nibName nibNameOrNil: String?, bundle nibBundleOrNil: Bundle?) {
        super.init(nibName: nibNameOrNil, bundle: nibBundleOrNil)
        title = "LR"
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    override func loadView() {
        super.loadView()
        view.backgroundColor = .systemPurple
        boxView = {
            let boxView = UIView()
            boxView.backgroundColor = .systemGreen
            view.addSubview(boxView)
            boxView.snp.makeConstraints {
                $0.width.height.equalTo(44)
                $0.centerX.equalToSuperview().priority(.high)
                $0.centerY.equalToSuperview()
            }
            return boxView
        }()

        leftButton = {
            let leftButton = UIButton()
            view.addSubview(leftButton)
            leftButton.setTitleColor(.white, for: .normal)
            leftButton.setTitle("Left", for: .normal)
            leftButton.snp.makeConstraints {
                $0.left.equalToSuperview().inset(20)
                $0.bottom.equalTo(view.safeAreaLayoutGuide).inset(20)
            }
            return leftButton
        }()

        rightButton = {
            let rightButton = UIButton()
            view.addSubview(rightButton)
            rightButton.setTitleColor(.white, for: .normal)
            rightButton.setTitle("Right", for: .normal)
            rightButton.snp.makeConstraints {
                $0.right.equalToSuperview().inset(20)
                $0.bottom.equalTo(view.safeAreaLayoutGuide).inset(20)
            }
            return rightButton
        }()
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        let alignsLeft: Observable<Bool> = Observable.merge(leftButton.rx.tap.map { _ in true },
                                                            rightButton.rx.tap.map { _ in false})
        // Observableで流れてくる値に応じてレイアウトを切り替えている
        alignsLeft
            .bind(to: boxView.rx.makeConstraints { maker, alignsLeft in
                if alignsLeft {
                    maker.left.equalToSuperview().inset(10)
                } else {
                    maker.right.equalToSuperview().inset(10)
                }
            })
        .disposed(by: disposeBag)
    }
}

実践にあたって

サンプルアプリ内では単体のUIViewController内でRxのストリームが完結していますが、実際の開発で例えばMVVMなどを採用しているときなどはViewModelの流すストリームに合わせてレイアウトを切り替えることになるかと思います。