如何为UIActivityIndicator正确设置自定义深灰色背景视图

我来帮你搞定这个问题！针对你需要的深灰色背景+白色底色+橙色大尺寸指示器的需求，我们可以通过创建一个自定义视图来实现，这样指示器在网页内容上会非常显眼，不会被混淆。

第一步：创建自定义加载视图类 #

这个类会封装深灰色背景、白色圆角底色和橙色指示器，代码如下：

import UIKit

class CustomLoadingView: UIView {
    
    // 自定义橙色大尺寸指示器
    private let activityIndicator: UIActivityIndicatorView = {
        let indicator = UIActivityIndicatorView(style: .large)
        indicator.color = .orange
        indicator.startAnimating()
        indicator.translatesAutoresizingMaskIntoConstraints = false
        return indicator
    }()
    
    // 白色圆角底色视图
    private let whiteBackgroundView: UIView = {
        let view = UIView()
        view.backgroundColor = .white
        view.layer.cornerRadius = 10 // 圆角让样式更美观，可按需调整
        view.translatesAutoresizingMaskIntoConstraints = false
        return view
    }()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupLayout()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupLayout()
    }
    
    private func setupLayout() {
        // 设置深灰色半透明背景，可调整颜色和透明度
        backgroundColor = UIColor(white: 0.2, alpha: 0.8)
        translatesAutoresizingMaskIntoConstraints = false
        
        // 添加白色底色视图到容器
        addSubview(whiteBackgroundView)
        // 添加指示器到白色底色视图上
        whiteBackgroundView.addSubview(activityIndicator)
        
        // 配置自动布局约束
        NSLayoutConstraint.activate([
            // 白色底色视图居中，大小设为80x80（大尺寸效果）
            whiteBackgroundView.centerXAnchor.constraint(equalTo: centerXAnchor),
            whiteBackgroundView.centerYAnchor.constraint(equalTo: centerYAnchor),
            whiteBackgroundView.widthAnchor.constraint(equalToConstant: 80),
            whiteBackgroundView.heightAnchor.constraint(equalToConstant: 80),
            
            // 指示器在白色视图中居中
            activityIndicator.centerXAnchor.constraint(equalTo: whiteBackgroundView.centerXAnchor),
            activityIndicator.centerYAnchor.constraint(equalTo: whiteBackgroundView.centerYAnchor)
        ])
    }
    
    // 控制指示器显示/隐藏的方法
    func startAnimating() {
        activityIndicator.startAnimating()
        isHidden = false
    }
    
    func stopAnimating() {
        activityIndicator.stopAnimating()
        isHidden = true
    }
}

第二步：在WKWebView控制器中使用这个加载视图 #

接下来，我们把这个自定义加载视图加到你的网页控制器里，配合WKWebView的导航代理来自动控制显示和隐藏：

import UIKit
import WebKit

class WebViewController: UIViewController, WKNavigationDelegate {
    
    private let webView = WKWebView()
    private let customLoadingView = CustomLoadingView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupWebView()
        setupLoadingView()
        loadTargetURL()
    }
    
    private func setupWebView() {
        webView.navigationDelegate = self
        webView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(webView)
        
        // 让WebView铺满整个屏幕
        NSLayoutConstraint.activate([
            webView.topAnchor.constraint(equalTo: view.topAnchor),
            webView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            webView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            webView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
        ])
    }
    
    private func setupLoadingView() {
        view.addSubview(customLoadingView)
        // 让加载视图铺满整个屏幕，遮挡WebView内容
        NSLayoutConstraint.activate([
            customLoadingView.topAnchor.constraint(equalTo: view.topAnchor),
            customLoadingView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            customLoadingView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            customLoadingView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
        ])
        // 初始状态隐藏
        customLoadingView.isHidden = true
    }
    
    private func loadTargetURL() {
        // 替换成你的目标网页URL
        guard let url = URL(string: "https://your-website-url.com") else { return }
        webView.load(URLRequest(url: url))
    }
    
    // MARK: - WKNavigationDelegate
    // 网页开始加载时显示指示器
    func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!) {
        customLoadingView.startAnimating()
    }
    
    // 网页加载完成时隐藏指示器
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        customLoadingView.stopAnimating()
    }
    
    // 网页加载失败时也隐藏指示器（可额外添加错误提示）
    func webView(_ webView: WKWebView, didFail navigation: WKNavigation!, withError error: Error) {
        customLoadingView.stopAnimating()
        print("网页加载失败：\(error.localizedDescription)")
    }
}

一些可自定义的点 #

• 如果你觉得深灰色背景太暗，可以调整UIColor(white: 0.2, alpha: 0.8)里的white值（0是纯黑，1是纯白）和alpha透明度；
• 白色底色的大小可以修改80这个数值，圆角也可以调整cornerRadius；
• 指示器的颜色可以换成你想要的任意UIColor值。

内容的提问来源于stack exchange，提问作者Drew