概要

RxWebKit というライブラリを使って、WKWebViewのローディング処理のUI更新周りをイイ感じに書く方法を紹介
RxSwiftを使ってWKWebViewのローディング処理をイイ感じにするの記事の続き

イメージ

リポジトリ

公式
- https://github.com/RxSwiftCommunity/RxWebKit
サンプル
- https://github.com/ryo-takahashi/WKWebViewRxSwiftLoadingExample

環境

Xcode 9.4
Swift 4.1
RxSwift 4.2
RxCocoa 4.2
RxOptional 3.5.0

環境構築

Podfile

  pod 'RxSwift'
  pod 'RxCocoa'
  pod 'RxOptional'
  pod 'RxWebKit'

画面

画面構成
- WKWebView
- Progress View

コード


import UIKit
import WebKit
import RxSwift
import RxCocoa
import RxOptional
import RxWebKit

class RxWebkitViewController: UIViewController {
    @IBOutlet weak var webView: WKWebView!
    @IBOutlet weak var progressView: UIProgressView!
    
    private let disposeBag = DisposeBag()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupWebView()
    }
    
    private func setupWebView() {
        
        // プログレスバーの表示制御、ゲージ制御、アクティビティインジケータ表示制御で使うため、一旦オブザーバを定義
        let loadingObservable = webView.rx.loading
            .share()
        
        // プログレスバーの表示・非表示
        loadingObservable
            .map { return !$0 }
            .observeOn(MainScheduler.instance)
            .bind(to: progressView.rx.isHidden)
            .disposed(by: disposeBag)
        
        // iPhoneの上部の時計のところのバーの（名称不明）アクティビティインジケータ表示制御
        loadingObservable
            .bind(to: UIApplication.shared.rx.isNetworkActivityIndicatorVisible)
            .disposed(by: disposeBag)
        
        // NavigationControllerのタイトル表示
        webView.rx.title
            .filterNil()
            .observeOn(MainScheduler.instance)
            .bind(to: navigationItem.rx.title)
            .disposed(by: disposeBag)
        
        // プログレスバーのゲージ制御
        webView.rx.estimatedProgress
            .map { return Float($0) }
            .observeOn(MainScheduler.instance)
            .bind(to: progressView.rx.progress)
            .disposed(by: disposeBag)
        
        
        let url = URL(string: "https://www.google.com/")
        let urlRequest = URLRequest(url: url!)
        webView.load(urlRequest)
    }
}

良い
- 完全にタイポの可能性がなくなった
  - コンパイルエラーで発見できる
- 直感的に書ける、わかる
  - webView.rx.title のところ、navigationItemのtitleにbindしてるんだなーというのがすぐわかる

まとめ

RxWebKit を使うことでわかりやすくUIの処理ができるようになった

Notes

今回は紹介していませんが、RxWebKit には canGoBack canGoForward などもっと色々なパラメータがあります
詳しくは https://github.com/RxSwiftCommunity/RxWebKit