以編程方式圍繞圖像填充

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，前導和尾隨約束