8
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

[ios]Webviewにプログレスバーを表示させる

Posted at

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")
    }
    
}

8
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?