Swift线性占比条形图动画最小段宽设置与约束冲突解决咨询

问题1：Auto Layout约束冲突修复 #

你遇到的约束报错：

Unable to simultaneously satisfy constraints. Probably at least one of the constraints in the following list is one you don't want.

根因是布局中两个子视图之间有2pt的固定间距，总间距合计4pt，但是你直接用父视图宽度乘以比例计算子视图宽度，三个比例加总为1时，子视图总宽度+4pt的间距会超过父视图宽度，必然触发约束冲突。同时你每次更新宽度都删除旧约束再新建的操作，也会在短时间内存在新旧约束同时生效的情况，加剧冲突概率。

问题2：极端占比下子视图最小宽度保障 #

要实现无论占比多低都保留10pt宽度，需要做两个改动：

• 给每个子视图添加宽度≥10pt的高优先级约束，优先级高于比例宽度约束
• 调整宽度计算逻辑，先预留所有子视图的最小宽度和总间距，剩余可用宽度再按资产占比分配，避免总宽度超出父视图

修改后完整代码 #

import UIKit

class StripView: UIView {
    
    var stocksConstraint = NSLayoutConstraint()
    var bondsConstraint = NSLayoutConstraint()
    var etfConstraint = NSLayoutConstraint()
    
    // 统一配置常量，方便后续修改
    private let minItemWidth: CGFloat = 10
    private let spacing: CGFloat = 2
    
    let stocksView: UIView = {
        let view = UIView()
        view.backgroundColor = .lightGray
        view.layer.cornerRadius = 4
        return view
    }()
    
    let bondsView: UIView = {
        let view = UIView()
        view.backgroundColor = .lightGray
        view.layer.cornerRadius = 4
        return view
    }()
    
    let etfView: UIView = {
        let view = UIView()
        view.backgroundColor = .lightGray
        view.layer.cornerRadius = 4
        return view
    }()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        backgroundColor = .clear
        layer.cornerRadius = 4
        layer.masksToBounds = true
        
        setupViews()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    func update(multipliers: [CGFloat]) {
        // 父视图宽度要先扣除总间距和三个子视图的最小宽度，剩余部分再按比例分配
        let totalReservedWidth = 3 * minItemWidth + 2 * spacing
        guard bounds.width > totalReservedWidth else { return }
        let availableWidth = bounds.width - totalReservedWidth
        
        let stocksWidth = minItemWidth + availableWidth * multipliers[0]
        let bondsWidth = minItemWidth + availableWidth * multipliers[1]
        let etfWidth = minItemWidth + availableWidth * multipliers[2]
        
        // 直接修改约束常量，不需要删了重建，效率更高无冲突
        stocksConstraint.constant = stocksWidth
        bondsConstraint.constant = bondsWidth
        etfConstraint.constant = etfWidth
        
        UIView.animate(withDuration: 1.0) {
            self.layoutIfNeeded()
            self.stocksView.backgroundColor = .systemRed
            self.bondsView.backgroundColor = .systemGreen
            self.etfView.backgroundColor = .systemBlue
        }
    }
    
    func setupViews() {
        let views = [stocksView, bondsView, etfView]
        views.forEach {
            $0.translatesAutoresizingMaskIntoConstraints = false
            addSubview($0)
        }
        
        // 初始宽度用固定值，不需要multiplier
        stocksConstraint = stocksView.widthAnchor.constraint(equalToConstant: 0.33 * bounds.width)
        bondsConstraint = bondsView.widthAnchor.constraint(equalToConstant: 0.33 * bounds.width)
        etfConstraint = etfView.widthAnchor.constraint(equalToConstant: 0.33 * bounds.width)
        
        NSLayoutConstraint.activate([
            stocksView.topAnchor.constraint(equalTo: topAnchor),
            stocksView.bottomAnchor.constraint(equalTo: bottomAnchor),
            stocksView.leadingAnchor.constraint(equalTo: leadingAnchor),
            stocksConstraint,
            // 新增最小宽度约束
            stocksView.widthAnchor.constraint(greaterThanOrEqualToConstant: minItemWidth),
            
            bondsView.topAnchor.constraint(equalTo: topAnchor),
            bondsView.bottomAnchor.constraint(equalTo: bottomAnchor),
            bondsView.leadingAnchor.constraint(equalTo: stocksView.trailingAnchor, constant: spacing),
            bondsConstraint,
            bondsView.widthAnchor.constraint(greaterThanOrEqualToConstant: minItemWidth),
            
            etfView.topAnchor.constraint(equalTo: topAnchor),
            etfView.bottomAnchor.constraint(equalTo: bottomAnchor),
            etfView.leadingAnchor.constraint(equalTo: bondsView.trailingAnchor, constant: spacing),
            etfConstraint,
            etfView.widthAnchor.constraint(greaterThanOrEqualToConstant: minItemWidth),
            // 新增etf尾部约束，保证总宽度匹配父视图，彻底解决约束冲突
            etfView.trailingAnchor.constraint(equalTo: trailingAnchor)
        ])
    }
}

额外说明 #

• 新增了etf视图的尾部约束，保证三个子视图+间距的总宽度永远和父视图对齐，从根源避免宽度溢出
• 所有配置常量统一提取，后续要调整最小宽度、间距时直接修改对应值即可
• 不再频繁增删约束，直接修改宽度约束的constant，性能更好也不会出现约束冲突

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