Question

我需要创建一个组件，在swift中显示带有标签的图像。

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

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

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和标签 translatesAutoresizingMaskIntoConstraints 属性设置为 false

--- Aslo

在降低宽度和高度优先级后给出imageView top，bottomm，leading和trailing约束

以编程方式填充图像

2 个答案: