设置堆栈视图的所有属性

Question

我在 UIImageView 中使用 SF 符号图像。我也给出了限制。我所看到的在不同的模拟器中运行相同的代码实际上会增加图像的宽度，但我想为不同的 iOS 模拟器提供固定的宽度。

这是图像的代码：

let rightImageView: UIImageView = {
    let rightImageView = UIImageView()
    rightImageView.image = UIImage(systemName: "arrow.right")
    rightImageView.translatesAutoresizingMaskIntoConstraints = false
    rightImageView.tintColor = .purple
    return rightImageView
}()

这是它和其他属性的约束：

private func setUpUI() {
    view.addSubview(stackview)
    stackview.dm_addArrangedSubviews(titleLable)
    stackview.dm_addArrangedSubviews(viewAllLable)
    stackview.dm_addArrangedSubviews(rightImageView)
    view.addSubview(collectionView)
    
    let safeArea = view.safeAreaLayoutGuide
    NSLayoutConstraint.activate([
        
        stackview.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            stackview.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            stackview.topAnchor.constraint(equalTo: view.topAnchor),
            collectionView.topAnchor.constraint(equalTo: stackview.bottomAnchor),
            collectionView.leadingAnchor.constraint(equalTo: safeArea.leadingAnchor),
            collectionView.trailingAnchor.constraint(equalTo: safeArea.trailingAnchor),
            collectionView.heightAnchor.constraint(equalToConstant: view.frame.width/2)
    ])
}

以下是 iPhone 15 Pro Max 的屏幕截图：

以下是iPhone 15模拟器中的截图：

这是不同模式下的屏幕截图，右箭头图像宽度设置正确：

如您所见，

rightImageView

属性的宽度增加了。如何为不同设备提供固定宽度？

Answer 1

将

rightImageView.widthAnchor

设置为等于

rightImageView.heightAnchor

。

将内容拥抱优先级设置为

viewAllLable

，这样它就不会水平拉伸。

简单示例：

class ViewController: UIViewController {
    
    let rightImageView: UIImageView = {
        let rightImageView = UIImageView()
        rightImageView.image = UIImage(systemName: "arrow.right")
        rightImageView.tintColor = .purple
        return rightImageView
    }()
    
    let stackview: UIStackView = {
        let v = UIStackView()
        v.translatesAutoresizingMaskIntoConstraints = false
        v.spacing = 8
        return v
    }()
    
    let titleLable: UILabel = {
        let v = UILabel()
        v.font = .systemFont(ofSize: 24.0, weight: .regular)
        v.text = "Similar Movies"
        return v
    }()

    let viewAllLable: UILabel = {
        let v = UILabel()
        v.font = .systemFont(ofSize: 24.0, weight: .regular)
        v.text = "View all"
        return v
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setUpUI()
    }
    
    private func setUpUI() {
        view.addSubview(stackview)
        stackview.addArrangedSubview(titleLable)
        stackview.addArrangedSubview(viewAllLable)
        stackview.addArrangedSubview(rightImageView)
        
        let safeArea = view.safeAreaLayoutGuide
        NSLayoutConstraint.activate([
            
            // constrain to safeArea, with 8-point "padding" on top/leading/trailing
            stackview.leadingAnchor.constraint(equalTo: safeArea.leadingAnchor, constant: 8.0),
            stackview.trailingAnchor.constraint(equalTo: safeArea.trailingAnchor, constant: -8.0),
            stackview.topAnchor.constraint(equalTo: safeArea.topAnchor, constant: 8.0),
            
            rightImageView.widthAnchor.constraint(equalTo: rightImageView.heightAnchor),
            
        ])
        
        // don't let viewAllLable stretch horizontally
        viewAllLable.setContentHuggingPriority(.required, for: .horizontal)
        
    }
    
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        // toggle colors so we can see the framing
        if titleLable.backgroundColor == .yellow {
            titleLable.backgroundColor = .clear
            viewAllLable.backgroundColor = .clear
            rightImageView.backgroundColor = .clear
            
            stackview.layer.borderWidth = 0
        } else {
            titleLable.backgroundColor = .yellow
            viewAllLable.backgroundColor = .green
            rightImageView.backgroundColor = .cyan
            
            stackview.layer.borderColor = UIColor.red.cgColor
            stackview.layer.borderWidth = 1
        }
    }
}

看起来像这样：

并且元素宽度保持不变，无论视图宽度如何：

运行上述代码时，点击任意位置即可打开/关闭颜色，以便您可以看到框架：