How to add activity Indicator to center of webView-CodePudding

With this code I get indicator but to top left corner of webView and behind borders

(I have DetailView storyboard but want to write code programmatically)

var webView = WKWebView()
var detailItem : CountriesFinal?
var spinner = UIActivityIndicatorView()
override func viewDidLoad() {
    super.viewDidLoad()
    spinner.frame = CGRect(x: webView.frame.width / 2, y: webView.frame.height / 2, width: 10, height: 10)
    webView.addSubview(spinner)
    spinner.startAnimating()
    spinner.hidesWhenStopped = true
    webView.backgroundColor = .blue
    webView.translatesAutoresizingMaskIntoConstraints = false
    webView.navigationDelegate = self
    
    webView.frame = CGRect(x: 125, y: 150, width: 250, height: 150)
    webView.layer.borderWidth = 5
    webView.layer.borderColor = UIColor.red.cgColor

    webView.contentMode = .scaleAspectFit
    webView.backgroundColor = .blue

    self.view.addSubview(webView)

I notice that this line doesn't change anything and I thought it may be the solution:

  spinner.frame = CGRect(x: webView.frame.width / 2, y: webView.frame.height / 2, width: 10, height: 10)

I've tried to set translatesAutoresizingMaskIntoConstraints of spinner to false but then whole webView disappear with purple warning " Layout Issues: Position and size are ambiguous for WKWebView."

UPDATED CODE(webVIew not showing):

   webView.frame = CGRect(x: 125, y: 150, width: 250, height: 150)
    
    webView.backgroundColor = .blue
    webView.translatesAutoresizingMaskIntoConstraints = false
    webView.navigationDelegate = self
    
    
    webView.layer.borderWidth = 5
    webView.layer.borderColor = UIColor.red.cgColor

    webView.contentMode = .scaleAspectFit
    webView.backgroundColor = .blue
    self.view.addSubview(webView)
    
    self.view.insertSubview(spinner, aboveSubview: webView)
    spinner.centerXAnchor.constraint(equalTo: webView.centerXAnchor).isActive = true
    spinner.centerYAnchor.constraint(equalTo: webView.centerYAnchor).isActive = true
    spinner.startAnimating()
    spinner.hidesWhenStopped = true

CodePudding user response：

In my opinion WKWebView is one of the system views that should probably be a "leaf" in your view hiercarchy. It is very complex in the content it manages and may not like it if you add subviews.

Instead of putting the spinner inside the WKWebView, I would probably put it into a view that is a sibling and stack it in front of the WebView in the z-order. It will float above the web view, but look like it is inside of it.

Here's a Playground I threw together that demonstrates the idea:

import UIKit
import WebKit
import PlaygroundSupport

NSSetUncaughtExceptionHandler { error in
    debugPrint(error)
}

let controller = UIViewController()

let webView = WKWebView()
webView.autoresizingMask = [.flexibleWidth, .flexibleHeight]

webView.load(URLRequest(url: URL(string: "https://www.apple.com")!))

let spinner = UIActivityIndicatorView()
spinner.translatesAutoresizingMaskIntoConstraints = false

controller.view.addSubview(webView)
webView.frame = controller.view.bounds

controller.view.insertSubview(spinner, aboveSubview: webView)

spinner.centerXAnchor.constraint(equalTo: webView.centerXAnchor).isActive = true
spinner.centerYAnchor.constraint(equalTo: webView.centerYAnchor).isActive = true

PlaygroundSupport.PlaygroundPage.current.liveView = controller

spinner.startAnimating()

CodePudding user response：

Working code:

    webView.frame = CGRect(x: 125, y: 150, width: 250, height: 150)
    
    webView.backgroundColor = .blue
    webView.translatesAutoresizingMaskIntoConstraints = false
    
    webView.layer.borderWidth = 5
    webView.layer.borderColor = UIColor.red.cgColor

    webView.contentMode = .scaleAspectFit
    webView.backgroundColor = .blue
    self.view.addSubview(webView)
    
    self.webView.addSubview(self.spinner)//first we need to add subview then make center or something
    spinner.center = CGPoint(x: webView.bounds.width / 2, y: webView.bounds.height / 2)
 
    webView.navigationDelegate = self
    spinner.startAnimating()
    spinner.hidesWhenStopped = true