以编程方式填充图像

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

---阿斯洛

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