UIScrollView约束冲突及ButtonView按钮布局异常求助

问题现象 #

遇到约束冲突错误：

Will attempt to recover by breaking constraint
<NSLayoutConstraint:0x600000ea6440 UIView:0x7fc684509760.height == UIScrollView:0x7fc685818000.height (active)>

Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger.
The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKitCore/UIView.h> may also be helpful.

同时存在两个额外问题：

• buttonView中的按钮位置偏移
• 修改numN值后，按钮无法适配屏幕尺寸

问题根源 #

1. 约束冲突：containerView被设置为与scrollView等宽等高的约束，但containerView作为scrollView的可缩放内容容器，需要根据子视图尺寸自由调整大小，固定尺寸约束与scrollView的滚动/缩放逻辑矛盾，导致系统不得不打破约束。
2. 按钮适配失效：按钮的高度是通过frame计算的固定值，没有使用动态约束关联到buttonView的高度和numN，当numN变化或视图缩放时，无法自动调整尺寸和位置。

修复步骤 #

1. 解决约束冲突

删除containerView与scrollView的宽高相等约束，改为让containerView由子视图（pianoRollView和buttonView）撑开尺寸，同时保留边缘对齐约束以确保滚动范围正确。

2. 实现按钮动态适配

• 用约束替代固定数值计算，让每个按钮的高度等于buttonView高度除以numN
• 按钮的顶部锚点关联上一个按钮的底部锚点（或第一个按钮关联buttonView顶部），避免使用固定偏移量导致的累积误差
• 当numN变化时，清空旧按钮并重新创建，同时调用pianoRollView.setNeedsDisplay()重绘网格

修改后的完整代码 #

import UIKit
import Foundation

class PianoRollView: UIView {
    var numN = 127 {
        didSet {
            setNeedsDisplay()
        }
    }
    var numT = 4 {
        didSet {
            setNeedsDisplay()
        }
    }
    
    override func draw(_ rect: CGRect) {
        super.draw(rect)
        
        let context = UIGraphicsGetCurrentContext()
        context?.setStrokeColor(UIColor.black.cgColor)
        context?.setLineWidth(1.0)
        
        let noteHeight = rect.height / CGFloat(numN)
      
        for i in 1..<numN {
            let y = CGFloat(i) * noteHeight
            context?.move(to: CGPoint(x: 0, y: y))
            context?.addLine(to: CGPoint(x: rect.width, y: y))
        }
        
        let timeSlotWidth = rect.width / CGFloat(numT)
        
        for i in 1..<numT {
            let x = CGFloat(i) * timeSlotWidth
            context?.move(to: CGPoint(x: x, y: 0))
            context?.addLine(to: CGPoint(x: x, y: rect.height))
        }
        
        // 绘制边框
        context?.stroke(rect)
    }
}

class ViewController: UIViewController, UIScrollViewDelegate {
    let scrollView = UIScrollView()
    let pianoRollView = PianoRollView()
    let containerView = UIView()
    var buttonView = UIView() // 改为实例变量，方便numN变化时更新
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        setupViews()
        setupConstraints()
        addButtons()
        
        // 设置缩放参数
        let minZoomScale = max(view.bounds.width / pianoRollView.bounds.width, view.bounds.height / pianoRollView.bounds.height)
        scrollView.minimumZoomScale = minZoomScale
        scrollView.maximumZoomScale = 5
        scrollView.delegate = self
    }
    
    private func setupViews() {
        view.addSubview(scrollView)
        scrollView.addSubview(containerView)
        containerView.addSubview(buttonView)
        containerView.addSubview(pianoRollView)
        
        // 禁用 autoresizing mask
        scrollView.translatesAutoresizingMaskIntoConstraints = false
        pianoRollView.translatesAutoresizingMaskIntoConstraints = false
        containerView.translatesAutoresizingMaskIntoConstraints = false
        buttonView.translatesAutoresizingMaskIntoConstraints = false
        
        // 初始化pianoRollView的初始尺寸
        pianoRollView.bounds = CGRect(x: 0, y: 0, width: 2000, height: 2000)
        pianoRollView.backgroundColor = .clear
        pianoRollView.layer.zPosition = 1
        
        buttonView.backgroundColor = .clear
        scrollView.showsVerticalScrollIndicator = true
        scrollView.showsHorizontalScrollIndicator = true
    }
    
    private func setupConstraints() {
        // scrollView 撑满控制器视图
        NSLayoutConstraint.activate([
            scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            scrollView.topAnchor.constraint(equalTo: view.topAnchor),
            scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
        ])
        
        // containerView 与 scrollView 边缘对齐，尺寸由子视图撑开
        NSLayoutConstraint.activate([
            containerView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
            containerView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor),
            containerView.topAnchor.constraint(equalTo: scrollView.topAnchor),
            containerView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor)
        ])
        
        // pianoRollView 撑满 containerView
        NSLayoutConstraint.activate([
            pianoRollView.leadingAnchor.constraint(equalTo: containerView.leadingAnchor),
            pianoRollView.trailingAnchor.constraint(equalTo: containerView.trailingAnchor),
            pianoRollView.topAnchor.constraint(equalTo: containerView.topAnchor),
            pianoRollView.bottomAnchor.constraint(equalTo: containerView.bottomAnchor),
            // 固定pianoRollView的初始尺寸，作为scrollView的内容大小基础
            pianoRollView.widthAnchor.constraint(equalToConstant: 2000),
            pianoRollView.heightAnchor.constraint(equalToConstant: 2000)
        ])
        
        // buttonView 撑满 containerView
        NSLayoutConstraint.activate([
            buttonView.leadingAnchor.constraint(equalTo: containerView.leadingAnchor),
            buttonView.trailingAnchor.constraint(equalTo: containerView.trailingAnchor),
            buttonView.topAnchor.constraint(equalTo: containerView.topAnchor),
            buttonView.bottomAnchor.constraint(equalTo: containerView.bottomAnchor)
        ])
    }
    
    private func addButtons() {
        // 先清空旧按钮
        buttonView.subviews.forEach { $0.removeFromSuperview() }
        
        var previousButton: UIButton?
        let numN = pianoRollView.numN
        
        for i in 0..<numN {
            let button = UIButton()
            button.translatesAutoresizingMaskIntoConstraints = false
            buttonView.addSubview(button)
            
            // 设置按钮约束
            let constraints = [
                button.leadingAnchor.constraint(equalTo: buttonView.leadingAnchor),
                button.trailingAnchor.constraint(equalTo: buttonView.trailingAnchor),
                button.heightAnchor.constraint(equalTo: buttonView.heightAnchor, multiplier: 1/CGFloat(numN))
            ]
            
            if let prevBtn = previousButton {
                constraints.append(button.topAnchor.constraint(equalTo: prevBtn.bottomAnchor))
            } else {
                constraints.append(button.topAnchor.constraint(equalTo: buttonView.topAnchor))
            }
            
            NSLayoutConstraint.activate(constraints)
            
            button.setTitle("Button \(i)", for: .normal)
            button.setTitleColor(.black, for: .normal)
            button.backgroundColor = .red
            
            previousButton = button
        }
    }
    
    // 外部修改numN时调用此方法更新按钮和网格
    func updateNumN(_ newNumN: Int) {
        pianoRollView.numN = newNumN
        addButtons()
    }
    
    func viewForZooming(in scrollView: UIScrollView) -> UIView? {
        return containerView
    }
    
    func scrollViewDidZoom(_ scrollView: UIScrollView) {
        // 居中内容
        let horizontalInset = max(0, (scrollView.bounds.width - scrollView.contentSize.width) / 2)
        let verticalInset = max(0, (scrollView.bounds.height - scrollView.contentSize.height) / 2)
        scrollView.contentInset = UIEdgeInsets(top: verticalInset, left: horizontalInset, bottom: verticalInset, right: horizontalInset)
    }
}

关键修改说明 #

• 给PianoRollView的numN和numT添加didSet，值变化时自动触发重绘
• 将buttonView改为实例变量，方便更新时清空旧按钮
• 按钮使用multiplier约束高度，绑定到buttonView高度和numN，实现动态适配
• 删除containerView与scrollView的宽高约束，改为由pianoRollView的固定初始尺寸撑开，确保滚动和缩放正常
• 封装addButtons方法，方便numN变化时重新创建按钮

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