如何在可捏合缩放的图片上方添加UITextField

你的代码里有几个关键问题导致约束失效、textField无法跟随图片缩放：

• UITextField用了计算属性：每次调用textField都会生成新实例，代理设置、视图层级和约束全乱了，得改成存储属性。
• 视图层级重复添加：同时把textField加到imageView和scrollView，实际textField只会在scrollView上，根本不会跟着图片动。
• 约束逻辑错配：把textField约束到scrollView而不是imageView，缩放时自然不会跟着图片走；另外imageView绑定scrollView宽高的约束，会让图片无法正确适配缩放逻辑。

下面是修正后的完整代码：

import UIKit

class ZoomImage: UIViewController, UITextFieldDelegate {
    
    // 改成存储属性，确保全程是同一个UITextField实例
    private let textField: UITextField = {
        let ut = UITextField()
        ut.backgroundColor = .black
        ut.textColor = .white
        ut.placeholder = "Testing"
        return ut
    }()
    
    private let scrollView: UIScrollView = {
        let sv = UIScrollView()
        sv.backgroundColor = .red
        return sv
    }()
    
    private let imageView: UIImageView = {
        let v = UIImageView()
        v.contentMode = .scaleAspectFit
        v.clipsToBounds = true
        return v
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setup()
    }
    
    func setup() {
        textField.delegate = self
        scrollView.delegate = self
        
        // 构建正确的视图层级：scrollView 包裹 imageView，imageView 包裹 textField
        view.addSubview(scrollView)
        scrollView.addSubview(imageView)
        imageView.addSubview(textField)
        
        // 加载图片并设置imageView初始尺寸
        guard let image = UIImage(named: "test.png") else { return }
        imageView.image = image
        imageView.bounds.size = image.size
        
        // 统一关闭自动约束转换，启用AutoLayout
        [scrollView, imageView, textField].forEach {
            $0.translatesAutoresizingMaskIntoConstraints = false
        }
        
        let safeG = view.safeAreaLayoutGuide
        
        scrollView.minimumZoomScale = 1.0
        scrollView.maximumZoomScale = 10.0
        
        NSLayoutConstraint.activate([
            // scrollView 铺满安全区
            scrollView.leadingAnchor.constraint(equalTo: safeG.leadingAnchor),
            scrollView.trailingAnchor.constraint(equalTo: safeG.trailingAnchor),
            scrollView.topAnchor.constraint(equalTo: safeG.topAnchor),
            scrollView.bottomAnchor.constraint(equalTo: safeG.bottomAnchor),
            
            // imageView 居中于scrollView，尺寸设为图片原始大小，支持缩放调整
            imageView.centerXAnchor.constraint(equalTo: scrollView.centerXAnchor),
            imageView.centerYAnchor.constraint(equalTo: scrollView.centerYAnchor),
            imageView.widthAnchor.constraint(equalToConstant: image.size.width),
            imageView.heightAnchor.constraint(equalToConstant: image.size.height),
            
            // textField 绑定到imageView的特定位置（示例为左上角偏移20），可按需调整
            textField.leadingAnchor.constraint(equalTo: imageView.leadingAnchor, constant: 20),
            textField.topAnchor.constraint(equalTo: imageView.topAnchor, constant: 20),
            textField.widthAnchor.constraint(equalToConstant: 150),
            textField.heightAnchor.constraint(equalToConstant: 40)
        ])
    }
}

extension ZoomImage: UIScrollViewDelegate {
    func viewForZooming(in scrollView: UIScrollView) -> UIView? {
        return imageView
    }
    
    // 可选：如果想让textField字体不随图片缩放变大，添加这个方法反向缩放transform
    func scrollViewDidZoom(_ scrollView: UIScrollView) {
        textField.transform = CGAffineTransform(scaleX: 1/scrollView.zoomScale, y: 1/scrollView.zoomScale)
    }
}

关键修改说明：

1. UITextField改为存储属性：彻底解决重复实例导致的代理、约束失效问题。
2. 修正视图层级：textField只作为imageView的子视图，这样imageView缩放时textField会自动跟随位移和缩放。
3. 调整imageView约束：不再绑定scrollView宽高，改用图片原始尺寸+居中约束，让scrollView的contentSize随图片缩放自动适配。
4. textField约束绑定imageView：把textField的位置锚定到imageView上，确保它始终固定在图片的对应位置。
5. 可选的字体大小固定：如果不需要textField随图片放大字体，通过scrollViewDidZoom反向缩放textField的transform，保持字体大小不变。

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