Posted at

RxWebKitを使ってWKWebViewのローディング処理(プログレスバー更新等)をイイ感じにする

More than 1 year has passed since last update.


概要


イメージ

rxwebkit.gif


リポジトリ


環境


  • 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'


画面

スクリーンショット 2018-08-21 19.43.27.png


  • 画面構成


    • 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