iOS开发：如何添加子视图使其覆盖已有WKWebView？

要实现将textSizeChangeView放在webView的视觉上方（而非内部），你需要调整视图的位置布局和层级关系，以下是具体步骤和优化后的代码：

核心要点 #

要满足需求，需要注意两点：

1. 位置布局：让textSizeChangeView的底部刚好贴合webView的顶部，确保它在webView的正上方区域
2. 层级关系：确保textSizeChangeView在webView的上层，避免被遮挡

基于Frame的实现代码 #

这种方式适合简单的固定布局场景：

// 1. 先创建并添加WKWebView
webView = WKWebView(frame: CGRect(x: 3, y: horizontalLine.frame.maxY + 8, width: self.view.frame.width - 6, height: CGFloat(self.view.frame.height - 150)))
webView.navigationDelegate = self
self.view.addSubview(webView)

// 2. 创建文本大小调节视图，位置设置在webView的正上方
textSizeChangeView = UIView(frame: CGRect(
    x: 0,
    y: webView.frame.minY - 100, // 让视图底部刚好贴住webView的顶部
    width: self.view.frame.width,
    height: 100
))
textSizeChangeView.backgroundColor = UIColor(red: 0.97, green: 0.98, blue: 0.98, alpha: 1.00)

// 3. 创建并配置滑块
let mySlider = UISlider(frame:CGRect(x: 10, y: 0, width: self.view.frame.width - 20, height: 30))
mySlider.center = self.textSizeChangeView.center
mySlider.minimumValue = 1
mySlider.maximumValue = 2
mySlider.isContinuous = true
mySlider.tintColor = UIColor(red: 0.33, green: 0.79, blue: 0.93, alpha: 1.00)
mySlider.addTarget(self, action: #selector(self.sliderValueChanged(sender:)), for: .valueChanged)
self.textSizeChangeView.addSubview(mySlider)

// 4. 初始隐藏视图并添加到父视图
textSizeChangeView.isHidden = true
self.view.addSubview(self.textSizeChangeView)

// 5. 确保调节视图在webView上层（可选，因为后add的视图默认在上层）
self.view.bringSubviewToFront(textSizeChangeView)

推荐：基于Auto Layout的实现（更健壮） #

如果需要适配不同屏幕尺寸或旋转场景，建议使用Auto Layout替代Frame，布局会更稳定：

// 1. 创建WKWebView并禁用自动转换约束
webView = WKWebView()
webView.navigationDelegate = self
webView.translatesAutoresizingMaskIntoConstraints = false
self.view.addSubview(webView)

// 2. 创建文本大小调节视图
textSizeChangeView = UIView()
textSizeChangeView.backgroundColor = UIColor(red: 0.97, green: 0.98, blue: 0.98, alpha: 1.00)
textSizeChangeView.translatesAutoresizingMaskIntoConstraints = false
textSizeChangeView.isHidden = true
self.view.addSubview(textSizeChangeView)

// 3. 创建并配置滑块
let mySlider = UISlider()
mySlider.minimumValue = 1
mySlider.maximumValue = 2
mySlider.isContinuous = true
mySlider.tintColor = UIColor(red: 0.33, green: 0.79, blue: 0.93, alpha: 1.00)
mySlider.addTarget(self, action: #selector(self.sliderValueChanged(sender:)), for: .valueChanged)
mySlider.translatesAutoresizingMaskIntoConstraints = false
textSizeChangeView.addSubview(mySlider)

// 4. 添加Auto Layout约束
NSLayoutConstraint.activate([
    // 调节视图约束：左右贴父视图，高度100，底部与webView顶部对齐
    textSizeChangeView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
    textSizeChangeView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),
    textSizeChangeView.heightAnchor.constraint(equalToConstant: 100),
    textSizeChangeView.bottomAnchor.constraint(equalTo: webView.topAnchor),
    
    // webView约束：左间距3，顶部与horizontalLine底部间距8，宽度父视图-6，高度父视图-150
    webView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor, constant: 3),
    webView.topAnchor.constraint(equalTo: horizontalLine.bottomAnchor, constant: 8),
    webView.widthAnchor.constraint(equalTo: self.view.widthAnchor, constant: -6),
    webView.heightAnchor.constraint(equalTo: self.view.heightAnchor, constant: -150),
    
    // 滑块约束：左右间距10，垂直居中于调节视图
    mySlider.leadingAnchor.constraint(equalTo: textSizeChangeView.leadingAnchor, constant: 10),
    mySlider.trailingAnchor.constraint(equalTo: textSizeChangeView.trailingAnchor, constant: -10),
    mySlider.centerYAnchor.constraint(equalTo: textSizeChangeView.centerYAnchor)
])

// 确保调节视图层级在上
self.view.bringSubviewToFront(textSizeChangeView)

关键说明 #

• 用webView.frame.minY - 100（Frame方式）或bottomAnchor.constraint(equalTo: webView.topAnchor)（Auto Layout方式）来精准控制调节视图的位置，确保它在webView的正上方
• bringSubviewToFront方法可以强制将调节视图放在webView的上层，避免被遮挡（如果是先添加webView再添加调节视图，默认已经在上层，此步骤可选）

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