Image grows even if content/compression is set to 1

问题

This is what I want to create programmatically:

So that is a UIView, and inside it there is a UIImageView and a UILabel. Some notes:

• The image should always be 1:1
• The image's height should be the same as the height of the label
• If the text in the label gets wider, the view should go wider as well.
• The view's height should adapt to the label's height, so I did not have set any height constraint of the UIView.
• See this github project for an example what I want: https://github.com/Jasperav/constrains

This is my code, you can copy paste this but make sure you set a other string for the UIImageView's image:

class View2: UIView{
    override init(frame: CGRect) {
        super.init(frame: frame)
        load()

    }

required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
    load()
}

func load(){
    let overlappingView = UIView()
    overlappingView.translatesAutoresizingMaskIntoConstraints = false
    self.addSubview(overlappingView)

    let label = UILabel()
    label.translatesAutoresizingMaskIntoConstraints = false
    label.text = "0"
    label.textColor = .white
    label.setContentCompressionResistancePriority(UILayoutPriority(rawValue: 751), for: .horizontal)
    label.setContentCompressionResistancePriority(UILayoutPriority(rawValue: 999), for: .vertical)
    label.setContentHuggingPriority(UILayoutPriority(rawValue: 999), for: .vertical)
    label.setContentHuggingPriority(UILayoutPriority(rawValue: 999), for: .horizontal)

    let image = UIImageView()
    image.image = UIImage(named: "Test")
    image.translatesAutoresizingMaskIntoConstraints = false
    image.setContentCompressionResistancePriority(UILayoutPriority(rawValue: 1), for: .horizontal)
    image.setContentCompressionResistancePriority(UILayoutPriority(rawValue: 1), for: .vertical)
    image.setContentHuggingPriority(UILayoutPriority(rawValue: 1), for: .vertical)
    image.setContentHuggingPriority(UILayoutPriority(rawValue: 1), for: .horizontal)

    overlappingView.addSubview(label)
    overlappingView.addSubview(image)

    overlappingView.centerXAnchor.constraint(equalTo: self.centerXAnchor).isActive = true
    overlappingView.centerYAnchor.constraint(equalTo: self.centerYAnchor, constant: -2).isActive = true
    overlappingView.widthAnchor.constraint(greaterThanOrEqualTo: self.widthAnchor, multiplier: 0.6).isActive = true

    label.topAnchor.constraint(equalTo: overlappingView.topAnchor, constant: 5).isActive = true
    label.bottomAnchor.constraint(equalTo: overlappingView.bottomAnchor, constant: -5).isActive = true
    label.trailingAnchor.constraint(equalTo: overlappingView.trailingAnchor, constant: -5).isActive = true
    label.heightAnchor.constraint(equalTo: image.heightAnchor, multiplier: 1).isActive = true

    image.centerYAnchor.constraint(equalTo: overlappingView.centerYAnchor).isActive = true
    image.leadingAnchor.constraint(equalTo: overlappingView.leadingAnchor, constant: 2).isActive = true
    image.widthAnchor.constraint(equalTo: image.heightAnchor, multiplier: 1).isActive = true
    image.trailingAnchor.constraint(equalTo: label.trailingAnchor, constant: -10).isActive = true

    }
}

With this code, I see the image taking up the whole screen's height in 1:1 size. Why does it not respect the labels height? I have the same constrains in the interface builder, why does it not work in code?

Thank you.

回答1:

Hi I play a little with your code and I fix it.I add some colors so you can easily see difference. If you have more questions I will help you again.

class View2: UIView{
    override init(frame: CGRect) {
        super.init(frame: frame)
        load()

    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        load()
    }

    func load(){
        self.backgroundColor = .green
        let overlappingView = UIView()
        overlappingView.backgroundColor = .red
        overlappingView.translatesAutoresizingMaskIntoConstraints = false
        self.addSubview(overlappingView)

        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        label.text = "0"
        label.textColor = .black


        let image = UIImageView(frame:CGRect(x: 10, y: 10, width: 10, height: 10))
        image.image = UIImage(named: "btn_back")
        image.tintColor = .black
        image.backgroundColor = .blue
        image.translatesAutoresizingMaskIntoConstraints = false
        image.setContentCompressionResistancePriority(1, for: .horizontal)


        overlappingView.addSubview(label)
        overlappingView.addSubview(image)

        label.sizeToFit()

        overlappingView.centerXAnchor.constraint(equalTo: self.centerXAnchor).isActive = true
        overlappingView.centerYAnchor.constraint(equalTo: self.centerYAnchor, constant: -2).isActive = true
        overlappingView.widthAnchor.constraint(equalTo: self.widthAnchor, multiplier: 1.0).isActive = true
        overlappingView.heightAnchor.constraint(equalToConstant: label.frame.height + 10).isActive = true

        label.topAnchor.constraint(equalTo: overlappingView.topAnchor, constant: 5).isActive = true
        label.bottomAnchor.constraint(equalTo: overlappingView.bottomAnchor, constant: -5).isActive = true
        label.trailingAnchor.constraint(equalTo: overlappingView.trailingAnchor, constant: -5).isActive = true
        label.heightAnchor.constraint(equalTo: image.heightAnchor, multiplier: 1).isActive = true


        image.centerYAnchor.constraint(equalTo: overlappingView.centerYAnchor).isActive = true
        image.leadingAnchor.constraint(equalTo: overlappingView.leadingAnchor, constant: 2).isActive = true
        image.widthAnchor.constraint(equalTo: image.heightAnchor, multiplier: 1).isActive = true
        image.trailingAnchor.constraint(equalTo: label.leadingAnchor, constant: -10).isActive = true


    }
}

来源：https://stackoverflow.com/questions/46239053/image-grows-even-if-content-compression-is-set-to-1