使用CGAffineTransform缩放按钮网格异常问题求助

核心修复思路 #

1. 按钮超出ScrollView问题：将所有按钮放在一个containerView中，让这个容器视图作为ScrollView的内容视图，通过约束绑定ScrollView的contentLayoutGuide，确保容器始终在ScrollView内部。
2. 缩放网格错位问题：使用嵌套UIStackView实现网格布局，利用Auto Layout自动维持按钮的相对位置，同时借助ScrollView原生的缩放机制（而非直接修改视图transform）来处理缩放，保证布局结构稳定。

可直接运行的ComplexVC代码 #

import UIKit

class ComplexVC: UIViewController, UIScrollViewDelegate {
    
    private let scrollView = UIScrollView()
    private let containerView = UIView()
    // 示例网格参数：3列，4行，按钮间距12，内边距16
    private let columnCount = 3
    private let rowCount = 4
    private let spacing: CGFloat = 12
    private let padding: CGFloat = 16
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupUI()
        setupGridButtons()
        setupScrollViewZoom()
    }
    
    private func setupUI() {
        view.backgroundColor = .systemBackground
        
        // 添加ScrollView并设置约束
        scrollView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(scrollView)
        NSLayoutConstraint.activate([
            scrollView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
            scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            scrollView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor)
        ])
        scrollView.delegate = self
        
        // 添加容器视图到ScrollView，绑定contentLayoutGuide
        containerView.translatesAutoresizingMaskIntoConstraints = false
        scrollView.addSubview(containerView)
        NSLayoutConstraint.activate([
            containerView.topAnchor.constraint(equalTo: scrollView.contentLayoutGuide.topAnchor),
            containerView.leadingAnchor.constraint(equalTo: scrollView.contentLayoutGuide.leadingAnchor),
            containerView.trailingAnchor.constraint(equalTo: scrollView.contentLayoutGuide.trailingAnchor),
            containerView.bottomAnchor.constraint(equalTo: scrollView.contentLayoutGuide.bottomAnchor),
            // 初始大小与ScrollView可视区域一致
            containerView.widthAnchor.constraint(equalTo: scrollView.frameLayoutGuide.widthAnchor),
            containerView.heightAnchor.constraint(equalTo: scrollView.frameLayoutGuide.heightAnchor)
        ])
        containerView.backgroundColor = .systemGray6
    }
    
    private func setupGridButtons() {
        // 创建垂直StackView承载行
        let verticalStack = UIStackView()
        verticalStack.translatesAutoresizingMaskIntoConstraints = false
        verticalStack.axis = .vertical
        verticalStack.spacing = spacing
        verticalStack.layoutMargins = UIEdgeInsets(top: padding, left: padding, bottom: padding, right: padding)
        verticalStack.isLayoutMarginsRelativeArrangement = true
        containerView.addSubview(verticalStack)
        
        // 绑定垂直StackView到容器四边
        NSLayoutConstraint.activate([
            verticalStack.topAnchor.constraint(equalTo: containerView.topAnchor),
            verticalStack.leadingAnchor.constraint(equalTo: containerView.leadingAnchor),
            verticalStack.trailingAnchor.constraint(equalTo: containerView.trailingAnchor),
            verticalStack.bottomAnchor.constraint(equalTo: containerView.bottomAnchor)
        ])
        
        // 生成每行的水平StackView和按钮
        for row in 0..<rowCount {
            let horizontalStack = UIStackView()
            horizontalStack.axis = .horizontal
            horizontalStack.spacing = spacing
            horizontalStack.distribution = .fillEqually
            
            for col in 0..<columnCount {
                let btn = UIButton(type: .system)
                btn.setTitle("\(row+1)-\(col+1)", for: .normal)
                btn.backgroundColor = .systemBlue
                btn.setTitleColor(.white, for: .normal)
                btn.layer.cornerRadius = 8
                horizontalStack.addArrangedSubview(btn)
                
                // 给按钮设置最小高度，避免缩放后过小
                btn.heightAnchor.constraint(greaterThanOrEqualToConstant: 44).isActive = true
            }
            
            verticalStack.addArrangedSubview(horizontalStack)
        }
    }
    
    private func setupScrollViewZoom() {
        scrollView.minimumZoomScale = 0.5
        scrollView.maximumZoomScale = 2.0
        scrollView.bouncesZoom = true
    }
    
    // MARK: - UIScrollViewDelegate
    func viewForZooming(in scrollView: UIScrollView) -> UIView? {
        return containerView
    }
}

关键说明 #

• 容器视图绑定：containerView的约束完全绑定到ScrollView的contentLayoutGuide，确保缩放时容器始终在ScrollView的内容范围内，不会溢出到主视图。
• StackView网格布局：嵌套的水平/垂直StackView通过fillEqually分布和固定间距，自动维持按钮的网格排列，缩放时所有按钮的相对位置和比例保持一致。
• 原生缩放机制：利用ScrollView的zoomScale特性，通过viewForZooming(in:)指定缩放视图，避免手动修改transform导致的布局混乱，同时支持捏合手势的原生交互逻辑。

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