如何让WKWebView作为背景显示且上层按钮标签正常显示

我帮你分析下这个问题哈——你想让GIF作为后台动图播放，同时让登录、注册按钮和标签显示在它上方，但目前只有GIF能显示，按钮和标签都看不到，对吧？

先看看你给出的代码片段：

import Foundation
import UIKit
import WebKit
class LoginViewController: UIViewController {
    @IBOutlet var containerView: UIView! = nil
    var webViewBG: WKWebView?
    @IBOutlet weak var loginButton: UIButton!
    @IBOutlet weak var signUpButton: UIButton!
    override func loadView() {
        super.loadView()
        self.w...

问题根源 #

大概率是视图层级的问题：你通过WebView加载GIF后，WebView被默认添加到了containerView的最上层，直接把原本在上面的按钮、标签给盖住了，所以它们就显示不出来了。

解决方案 #

只需要把WebView放到视图层级的最底层，让按钮和标签能“浮”在它上面就行，这里给你两种简单的实现方式：

方式一：添加WebView后将其移至底层

在把WebView添加到containerView之后，调用sendSubviewToBack方法，把WebView放到所有子视图的下面：

override func loadView() {
    super.loadView()
    
    // 补全WebView初始化和配置的代码
    let webConfig = WKWebViewConfiguration()
    webViewBG = WKWebView(frame: containerView.bounds, configuration: webConfig)
    webViewBG?.autoresizingMask = [.flexibleWidth, .flexibleHeight]
    
    if let webView = webViewBG {
        containerView.addSubview(webView)
        // 关键：将WebView移到containerView的底层
        containerView.sendSubviewToBack(webView)
    }
    
    // 补全GIF加载逻辑
    if let gifURL = Bundle.main.url(forResource: "你的GIF文件名", withExtension: "gif") {
        webViewBG?.load(URLRequest(url: gifURL))
    }
}

方式二：插入WebView到视图层级的最底部

也可以用insertSubview(_:at:)方法，直接把WebView插入到containerView子视图列表的第0位（最底层）：

if let webView = webViewBG {
    // 直接插入到最底层
    containerView.insertSubview(webView, at: 0)
}

额外检查项 #

• 确认Storyboard/XIB中，按钮和标签确实是放在containerView的子视图层级里，并且没有被其他视图遮挡
• 检查按钮/标签的isHidden属性是否为false，alpha值是否为1.0

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