以编程方式围绕图像填充

Question

我需要创建一个组件来快速显示带有标签的图像。

我创建了一个扩展UIStackView的类，并放置了ImageView和UILabel并且可以正常工作。

问题 ：结果很难看，我需要在UIImage周围添加一些填充。 我试图将图像包含在比UIImage大的UIView ，但它会使图像消失！ 在运行时，显示以下警告消息：

Probably at least one of the constraints in the following list is one you don't want. 
Try this: 
    (1) look at each constraint and try to figure out which you don't expect; 
    (2) find the code that added the unwanted constraint or constraints and fix it. 
(Note: If you're seeing NSAutoresizingMaskLayoutConstraints that you don't understand, refer to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints) 
(
"<NSAutoresizingMaskLayoutConstraint:0x60000009e820 h=--& v=--& UIImageView:0x7fea7fc02850.width == 0   (active)>",
"<NSLayoutConstraint:0x60400009b4e0 UIImageView:0x7fea7fc02850.width == 40   (active)>"
)

Will attempt to recover by breaking constraint 
<NSLayoutConstraint:0x60400009b4e0 UIImageView:0x7fea7fc02850.width == 40   (active)>

因此，由于我不了解的原因，图像会自动获得约束width = 0 ，这会丢弃约束width = 40

这是代码：

class HeaderView: UIStackView {

    var label: UILabel = UILabel()

    override init(frame: CGRect) {
        super.init(frame: frame)
    }

    required init(coder: NSCoder) {
        super.init(coder: coder)
    }

    func setup(title: String, image: UIImage?) {
        axis = UILayoutConstraintAxis.horizontal
        let imgView = UIImageView()
        imgView.image = image!
        imgView.widthAnchor.constraint(equalToConstant: 40).isActive = true
        imgView.heightAnchor.constraint(equalToConstant: 40).isActive = true

        let paddedView = UIView()
        paddedView.addSubview(imgView)
        paddedView.widthAnchor.constraint(equalToConstant: 50).isActive = true
        paddedView.heightAnchor.constraint(equalToConstant: 50).isActive = true

        addArrangedSubview(paddedView)

        label.text = title
        addArrangedSubview(label)
    }
}

Answer 1

• 您应该将translatesAutoresizingMaskIntoConstraints设置为false，以避免与自动布局的冲突。
• 您的imgView在paddedView位置不明确。 这将是更好地约束边缘imgView到paddedView ，而不是直接设置imgView大小。
• 正如@Luzo提到的，您需要更改堆栈视图的对齐方式，因为默认情况下它是.fill 。

这是代码

func setup(title: String, image: UIImage?) {
    axis = .vertical
    alignment = .center

    label.text = title

    let imageView = UIImageView(image: image)
    imageView.translatesAutoresizingMaskIntoConstraints = false

    let containerView = UIView()
    containerView.translatesAutoresizingMaskIntoConstraints = false
    containerView.addSubview(imageView)

    NSLayoutConstraint.activate([
        imageView.topAnchor.constraint(equalTo: containerView.topAnchor, constant: 10.0),
        imageView.leadingAnchor.constraint(equalTo: containerView.leadingAnchor, constant: 10.0),
        imageView.trailingAnchor.constraint(equalTo: containerView.trailingAnchor, constant: -10.0),
        imageView.bottomAnchor.constraint(equalTo: containerView.bottomAnchor, constant: -10.0),
        containerView.heightAnchor.constraint(equalToConstant: 50.0),
        containerView.widthAnchor.constraint(equalToConstant: 50.0)
    ])

    stackView.addArrangedSubview(containerView)
    stackView.addArrangedSubview(label)
}

Answer 2

将imgView，paddedView和labels的translatesAutoresizingMaskIntoConstraints属性设置为false

-阿斯洛

降低宽度和高度的优先级后，给imageView top，bottomm，前导和尾随约束