WebViewを使って、Railsで作成したアプリケーションを表示させたいので、まずはWebViewを使ったことがなかったので、メモ。下記の記事を参考に、やってみました。
https://qiita.com/on0z/items/9768d2bccc29cc4e1851
環境
・xcode9
・swift4
storyboard上で、navigationcontrollerを使用しないと、アプリが落ちるので要注意です。
プログレスバーを表示させるのが、思ってたより簡単でした。
ただ、コードを見てみると、Viewの設定は簡単であっても、ローディングの表示が難しそうでした。
で、調べてみると、
・WkWebViewを使用すると、①title②URL③estimatedProgress(ローディングの状況)④loadingを監視することができる。
・その監視方法として、「KVO(Key-Value Observingの略)」がある。
あとは監視した値によって、プログレスバーを更新すれば完了。
ただ、やっぱり動的に何かするというプログラミングの基本ができていないので、勉強を進めます。
sample.swift
import UIKit
import WebKit
class WebViewController: UIViewController,WKNavigationDelegate {
@IBOutlet weak var webView: WKWebView!
var progressView = UIProgressView()
override func viewDidLoad() {
super.viewDidLoad()
self.tabBarController?.tabBar.isHidden = true
//監視の設定
self.webView.addObserver(self, forKeyPath: "loading", options: .new, context: nil)
self.webView.addObserver(self, forKeyPath: "estimatedProgress", options: .new, context: nil)
//プログレスバーを生成(NavigationBar下)
progressView = UIProgressView(frame: CGRect(x: 0, y: self.navigationController!.navigationBar.frame.size.height - 2, width: self.view.frame.size.width, height: 10))
progressView.progressViewStyle = .bar
self.navigationItem.title = "Title"
self.navigationController?.navigationBar.addSubview(progressView)
load()
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) {
if keyPath == "estimatedProgress"{
//estimatedProgressが変更されたときに、setProgressを使ってプログレスバーの値を変更する。
self.progressView.setProgress(Float(self.webView.estimatedProgress), animated: true)
}else if keyPath == "loading"{
UIApplication.shared.isNetworkActivityIndicatorVisible = self.webView.isLoading
if self.webView.isLoading {
self.progressView.setProgress(0.1, animated: true)
}else{
//読み込みが終わったら0に
self.progressView.setProgress(0.0, animated: false)
}
}
}
func load() {
// 表示するWEBサイトのURLを設定します。
let url = URL(string: "xxxxxxxxxx")
let urlRequest = URLRequest(url: url!)
// webViewで表示するWEBサイトの読み込みを開始します。
webView.load(urlRequest)
}
deinit{
//監視の解除
self.webView.removeObserver(self, forKeyPath: "estimatedProgress")
self.webView.removeObserver(self, forKeyPath: "loading")
}
}