Custom UIControl subclass with RxSwift

Question

I am creating a custom subclass of UIControl (I need to override its draw method) and I want to add RxSwift to bind its isSelected property to my model.

So far so good. This works fine.

My problem is how can I do to change the value isSelected property in response of user touchUpInside event?.

My first try was to use the addTarget method of UIControl, but changing the value of isSelected programmatically is not reported by the ControlProperty (as stated in the doc). But I can figure another way to resolve this.

Any help appreciated.

Source code of the subclass:

class SYYesNoButton: UIControl {

override init(frame: CGRect) {
    super.init(frame: frame)

    // subscribe to touchUpInside event

    addTarget(
        self,
        action: #selector(userDidTouchUpInside),
        for: UIControlEvents.touchUpInside)
}



func userDidTouchUpInside() {

    // change the value of the property
    // this does not work, 
    // the change is not reported to the ControlProperty
    // HOW CAN I CHANGE THIS ??

    self.isSelected = !isSelected
}

}

Extensions to add reactive support:

extension SYYesNoButton {

    var rx_isSelected: ControlProperty<Bool> {

    return UIControl.valuePublic(
        self,
        getter: { (button) -> Bool in
            return button.isSelected
    },
        setter: { (button, value) in
            button.isSelected = value
    })


    }
}



extension UIControl {

    static func valuePublic<T, ControlType: UIControl>(_ control: ControlType, getter:  @escaping (ControlType) -> T, setter: @escaping (ControlType, T) -> ()) -> ControlProperty<T> {



        let values: Observable<T> = Observable.deferred { [weak control] in
            guard let existingSelf = control else {
                return Observable.empty()
            }

            return (existingSelf as UIControl).rx.controlEvent([.allEditingEvents, .valueChanged])
                .flatMap { _ in
                    return control.map { Observable.just(getter($0)) } ?? Observable.empty()
                }
                .startWith(getter(existingSelf))
        }


        return ControlProperty(values: values, valueSink: UIBindingObserver(UIElement: control) { control, value in
            setter(control, value)
        })

    }
}

Thanks for all.

are you also using `RxCocoa`? – Ozgur Vatansever May 04 '17 at 15:43 — Ozgur Vatansever, May 04 '17 at 15:43

score 6 · Answer 1 · answered Jan 21 '19 at 17:24

Once you have an actual UIControl, there's an even nicer way to a "native" RxCocoa extension called a ControlProperty using a helper method in RxCocoa.

For example:

extension Reactive where Base: someControl {
    var someProperty: ControlProperty<Float> {
        return controlProperty(editingEvents: .valueChanged,
                               getter: { $0.value },
                               setter: { $0.value = $1 })
    }
}

This will expose the current value from the getter block whenever the specified UIControlEvent is fired, and will also set the value whenever some stream is bound to it.

It sort of acts like an Observable and Observer type together - you can observe its value, but can also subscribe to it.

Daniel T. · Accepted Answer · 2019-05-09T11:23:14.287

If you are subclassing from UIControl, then you are making your own control class and you have to override one or more of beginTracking(_:with:), continueTracking(_:with:), endTracking(_:with:), or cancelTracking(with:) to make the control work the way you want. Then call sendActions(for:) with the correct event. The guts of a UIControl would not have Rx in it.

Taking a queue from UIButton, your control should not select itself, although it can highlight and unhighlight itself (when the user's finger is on it for example.)

Once you have properly created your UIControl, code outside the control can use Rx to observe it with no extra work on your part.

The following works (Updated for Swift 5/RxSwift 5):

class ViewController: UIViewController {

    @IBOutlet weak var yesNoButton: SYYesNoButton!
    private let bag = DisposeBag()

    override func viewDidLoad() {
        super.viewDidLoad()

        yesNoButton.rx.controlEvent(.touchUpInside)
            .scan(false) { v, _ in !v }
            .bind(to: yesNoButton.rx.isSelected)
            .disposed(by: bag)
    }
}

@IBDesignable
class SYYesNoButton: UIControl {

    override func layoutSubviews() {
        super.layoutSubviews()
        backgroundColor = isSelected ? .green : .red
    }

    override var isSelected: Bool {
        didSet {
            super.isSelected = isSelected
            backgroundColor = isSelected ? .green : .red
        }
    }
}

Daniel, can you explain the line `.scan(false, accumulator: { !$0.0 })`? I can't seem to compile it in Swift 5 and current version of RxSwift. Thanks. — Glenn Posadas, May 09 '19 at 06:02
I have updated the answer. Swift now requires that you explicitly call out when you are ignoring values coming into a closure. — Daniel T., May 09 '19 at 11:24

Custom UIControl subclass with RxSwift

2 Answers2