Custom Viewを作るときに、どうやってRxと連携させるかを忘れないように記事にしました。

※ここでは、customView.rx.textDidChanged.~といったように、今までDelegateとして実装していたものをReactiveのExtensionとして記述することをRx連携と呼ばせていただきます。

どうしてRx連携するの？

自分が開発しているアプリではアーキテクチャがMVVMで、ViewとViewModelとのつなぎにRxSwift(RxCocoa)を使っています。

そのため、RxSwiftで用意されていない場合は自分で連携させる必要があります。

コードの量が減るかどうかはプロダクトによりますが、Rxを使うと圧倒的に簡潔に分かり易くかけると思います。

どれくらい綺麗になるか、サンプルコードを書いてみたので比較してみてください。

一番メリットとして感じるのは、今まで分離して関数を用意していたのがclosureとして記述できることだと思います。

結果的にUIViewControllerから煩わしいDelegateなどのコードが減るので、見通しもよくなります。

どうやって実装するの？

自作Viewを作るときに作成したDelegateを使って、DelegateProxy(Proxy: 代理)を作成し、それを使ってReactiveのExtensionとしてDelegateの中身を実装します。

今回は、内部にUITextFieldを持っているFilledTextFieldという自作Viewを使って、Rx連携する手順を紹介します。

コードはGithubのgist上げているので参考にしてください。

例として自作ViewのDelegateの内の二つの関数をRx連携させてみます。

DelegateProxy<P, D>とDelegateProxyType, 自作ViewのDelegateを継承したクラス、DelegateProxyを作成します。

DelegateProxy<P, D>のPは自作View(FilledTextField)、Dは自作ViewのDelegate(FilledTextFieldDelegate)です。

ここでは自作ViewとProxyとがお互いのDelegateをつなげる作業を行います。

Delgateが複数ある場合は変更が必要ですが、そういったケースは稀なので今回は割愛します。

ReactiveのExtensionとして実装していきます。

DelegateProxyのmethodInvoked(_:)を使って、Observableに変換します。

paramsはDelegateの引数を指します。

完成！！

一番FatになりがちなUIViewControllerのコードを綺麗に書くことができ、コードの可読性も向上できました。

RxSwiftを使いこなすことは難しいですが、上手く使えるようになればコードを綺麗に書けるようになると思います。

使い倒してどんどんコードを綺麗にしていきましょう！