Using a Custom xib in UISTackView

Question

I'm trying to make my life easier by only building one xib to reuse rather than building three views to put into a stackView

I have created my custom xib file and connected it its own custom class:

The labels, and images are placed by constraints. I want the labels to be able to auto resize, up to three lines, so the height constraints for the labels are >=, as well as the Content View which also can scale in height (>=)

The UserReview code:

class UserReview: UIView {

@IBOutlet weak var userImage: UIImageView!
@IBOutlet weak var username: UILabel!
@IBOutlet weak var userRating: UILabel!
@IBOutlet weak var reviewText: UILabel!
@IBOutlet weak var prosText: UILabel!
@IBOutlet weak var consText: UILabel!

class func instanceFromNib() -> UIView {
    return UINib(nibName: "UserReview", bundle: nil).instantiate(withOwner: nil, options: nil)[0] as! UIView
}

func setUp(review: Review){
        // TODO set userImage
        username.text = review.username!
        // TODO add rating + color
        reviewText.text = review.content!
        if let pros = review.positive_points {
            prosText.text = pros
        } else {
            prosText.text = "No Positive Points"
        }
        if let cons = review.negative_points {
            consText.text = cons
        } else {
            consText.text = "No Negative Points"
        }

    }

}

The StackView where i am trying to add subViews to also has a height constraint of >= 200 (min one card) but does not seem to resize with more cards added. The Alignment is Fill and Distribution: Equal Spacing

I have tried playing around with the constraints and alignment properties for the StackView containing reviews but the closest i can come to is overlapping Views..

The way i create and add views to the stack view:

        let review1 = UserReview.instanceFromNib() as! UserReview
        let review2 = UserReview.instanceFromNib() as! UserReview
        let review3 = UserReview.instanceFromNib() as! UserReview

        self.reviewStack.addArrangedSubview(review1)
        self.reviewStack.addArrangedSubview(review2)
        self.reviewStack.addArrangedSubview(review3)

From what i understand from this stack question The StackView has issues with the view height? I have tried most of the suggested solutions but encountering different issues..

The result i am trying to get:

(The images are gone for some reason, will check that later.)

score 0 · Answer 1 · answered Sep 16 '19 at 10:32

First of all remove height constraint from UIStackView because StackView always expands it's height based on the views inside it.

Set all the 4 sides constraints of StackView to it's superview and set intrinsic size as place holder.

Now add your UIView to stack view in the same manner you are doing it now. Do not set height constraint to any UIView label and the UIView itself. Just make sure yo have set top constraint of top most element and bottom constraint of bottom element. This ways auto layout understand how to increase height of all the elements based on their constraints and content.

For detailed understanding you can follow my answer at https://stackoverflow.com/a/57954517/3339966

Using a Custom xib in UISTackView

1 Answers1