今日は、昨日の続きでプログレスバーの表示対応です。

以下ViewController.swiftのコードです。画面の下端に表示しました。ページ読み込み開始時はオレンジ色で、読み込むと共に緑色になって行きます。

import UIKit
import WebKit

class ViewController: UIViewController {

    private var _webView : WKWebView!
    private var _hideStatusBar : Bool = false
    private var _iPhoneX_Header : CGFloat = 0
    private var _progressView: UIProgressView!
    
    func iPhoneX() -> Bool {
        guard #available(iOS 11.0, *) else {
            return false
        }
        return UIApplication.shared.windows[0].safeAreaInsets != UIEdgeInsets.zero
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        // ステータスバーの高さを取得
        _iPhoneX_Header = iPhoneX() ? UIApplication.shared.statusBarFrame.size.height : 0
        // WKWebViewを位置指定して表示
        _webView = WKWebView(frame:CGRect(x:0, y: -_iPhoneX_Header, width:self.view.bounds.size.width, height:self.view.bounds.size.height + _iPhoneX_Header))
        // ジェスチャー(フリック)による 進む や 戻る を許可
        _webView.allowsBackForwardNavigationGestures = true
        // WebViewの読込監視
        _webView.addObserver(self, forKeyPath:"estimatedProgress", options:.new, context:nil)
        // ステータスバーの非表示 ※ステータスバーの高さを取得する前に非表示にすると、ステータスバーの高さが取得できない
        _hideStatusBar = true
        self.setNeedsStatusBarAppearanceUpdate()
        // テキスト漫画読み込み
        let url : URL = URL(string: "https://minnano.app/textmanga/")!
        let request : URLRequest = URLRequest(url: url)
        _webView.load(request)
        self.view.addSubview(_webView)
        // ProgressView
        _progressView = UIProgressView(frame: CGRect(x:0, y:0, width:self.view.bounds.size.width * 2, height:4))
        _progressView.layer.position = CGPoint(x:0, y:self.view.bounds.size.height - 1)
        _progressView.transform = CGAffineTransform(scaleX: 1.0, y: 2.0)
        _progressView.progressTintColor = UIColor.green
        _progressView.trackTintColor = UIColor.orange
        self.view.addSubview(_progressView)
        // 回転時の通知
        NotificationCenter.default.addObserver(self, selector: #selector(ViewController.orientationChange(notification:)), name: NSNotification.Name.UIDeviceOrientationDidChange, object: nil)
    }
    deinit {
        _webView?.removeObserver(self, forKeyPath: "estimatedProgress")
    }
    
    @objc
    private func orientationChange(notification: NSNotification) {
        let portrait : Bool = UIInterfaceOrientationIsPortrait(UIApplication.shared.statusBarOrientation)
        // WebViewの表示調整
        _webView.frame.origin = CGPoint(x:portrait ? 0 : -_iPhoneX_Header, y:portrait ? -_iPhoneX_Header : 0)
        _webView.frame.size = CGSize(width:self.view.bounds.size.width + (portrait ? 0 : _iPhoneX_Header * 2), height:self.view.bounds.size.height + (portrait ? _iPhoneX_Header : 0))
        // プログレスバーの表示調整
        _progressView.frame.origin = CGPoint(x: 0, y: 0)
        _progressView.frame.size = CGSize(width:self.view.bounds.size.width * 2, height:4)
        _progressView.layer.position = CGPoint(x:0, y:self.view.bounds.size.height - 1)
    }
    
    // ステータスバーの非表示
    override var prefersStatusBarHidden: Bool {
        return _hideStatusBar
    }
    
    // WebViewの監視
    override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey: Any]?, context: UnsafeMutableRawPointer?) {
        if("estimatedProgress" == keyPath){
            if(_progressView != nil){
                // 更新
                let progress : Float = Float(_webView.estimatedProgress)
                _progressView.setProgress(progress < 1.0 ? progress : 0.0, animated: true)
                _progressView.alpha = progress < 1.0 ? 1.0 : 0.0  // 読み込みが完了したら非表示に
            }
        }
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

}

iPhoneXの全面表示や画面の回転にも対応しています。

テキスト漫画はその名の通りテキストばかりで読み込み早いから、

せっかく作ったけどプログレスバーは要らないかなぁ・・・