以编程方式围绕图像填充

Question

I need to create a component which displays an image with a label in swift.

I created a class which extends UIStackView and placed an ImageView and a UILabel and it works.

Problem : the result is ugly, I need to add some padding around the UIImage . I tried to include the image in a UIView that is bigger than the UIImage but it make the image disappear! At runtime, this warning message is displayed :

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)>

So, for a reason I don't understand, the image automatically gets a constraint width = 0 which discards the constraint width = 40

Here is the code:

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

• You should set translatesAutoresizingMaskIntoConstraints to false to avoid conflicts with Auto Layout ones.
• The position of your imgView in paddedView is ambiguous. It would be better to constraint edges of imgView to paddedView instead of direct setting imgView size.
• As @Luzo mentioned you need to change stack view alignment because it's .fill by default.

Here is the code

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

Set imgView , paddedView and label translatesAutoresizingMaskIntoConstraints property to false

--- Aslo

give the imageView top , bottomm , leading and trailing constraints after lowering priority of width and height