Swift: UIView not resizing to fit content - ios

Question

I am building an app in which I have a list of Reviews. They look like the following screenshot
For some reason, I am failing to make the UIView (Gray box from the top light gray line to the bottom one) resize correctly. The white text inside it (Actual review) is longer than 1 line and should not get cut off, only when reaching a maximum of say 5 lines. The thing is, it works when I don't set width and height constraints for the user image you see on the left side. Removing those will make the view resize correctly, but it will completely distort the image. The image top and botton anchors seem to be glued to the anchors in its horizontal stackview, which again are stuck to the UIView's top and botton anchors with constants, as it should. But nowhere do I say that the UIView should always have the size of the image. I don't get why it wont go bigger than the image.
Here is a screenshot of my structure with the constraints, hope it is clear enough:
NSLayoutConstraint.activate([
//Main horizontal stackview (one Rating is the name of the UIView)
hStack.leadingAnchor.constraint(equalTo: oneRating.leadingAnchor, constant: 23),
hStack.trailingAnchor.constraint(equalTo: oneRating.trailingAnchor, constant: -18),
hStack.topAnchor.constraint(equalTo: oneRating.topAnchor, constant: 15),
hStack.bottomAnchor.constraint(equalTo: oneRating.bottomAnchor, constant: -13),
reviewerImage.heightAnchor.constraint(equalToConstant: 80),
reviewerImage.widthAnchor.constraint(equalToConstant: 80),
//Limit the size of the Review Text to make sure its always at the same spot
v2Stack.widthAnchor.constraint(equalToConstant: 220.0),
])
//Verified checkmark constraints
if isUserVerified == true {
reviewerVerified.bottomAnchor.constraint(equalTo: reviewerImage.bottomAnchor).isActive = true
reviewerVerified.trailingAnchor.constraint(equalTo: reviewerImage.trailingAnchor, constant: -2).isActive = true
}
I know it is hard to help like this but I have tried to fix this for a few days and no matter what I do, I can't get it to work.
EDIT:
As per request, here is the code I have to add the ImageView to my UIView().
//Add Image
let reviewerImage = UIImageView()
reviewerImage.contentMode = .scaleAspectFill
reviewerImage.layer.cornerRadius = 40 //= 1/2 of width, because we hard coded the size
reviewerImage.image = UIImage(named: "person-icon") //Placeholder. Download image here
reviewerImage.translatesAutoresizingMaskIntoConstraints = false
VStack1.addArrangedSubview(reviewerImage)

Answer 1

You will need to add a few more sizing constraints, but...
The "trick" is to embed your "reviewer image view" in a clear "container" view. Then constrain the image view to the Top of that container.
Here is some sample code that gets close to your layout:
class JanView: UIView {
let reviewerImageView: UIImageView = {
let v = UIImageView()
return v
}()
let starImageView: UIImageView = {
let v = UIImageView()
return v
}()
let chevronImageView: UIImageView = {
let v = UIImageView()
return v
}()
let nameLabel: UILabel = {
let v = UILabel()
return v
}()
let locLabel: UILabel = {
let v = UILabel()
return v
}()
let reviewTextLabel: UILabel = {
let v = UILabel()
v.numberOfLines = 5
return v
}()
let publishedLabel: UILabel = {
let v = UILabel()
return v
}()
let starValueLabel: UILabel = {
let v = UILabel()
v.textAlignment = .center
return v
}()
override init(frame: CGRect) {
super.init(frame: frame)
commonInit()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
commonInit()
}
func commonInit() -> Void {
backgroundColor = .darkGray
let outerHStack: UIStackView = {
let v = UIStackView()
v.spacing = 10
return v
}()
let labelsVStack: UIStackView = {
let v = UIStackView()
v.axis = .vertical
v.spacing = 0
return v
}()
let starsAndChevronVStack: UIStackView = {
let v = UIStackView()
v.axis = .vertical
v.spacing = 0
return v
}()
let starsHStack: UIStackView = {
let v = UIStackView()
v.spacing = 0
v.alignment = .center
return v
}()
// review image container
let reviewerImageContainer: UIView = {
let v = UIView()
return v
}()
[nameLabel, reviewTextLabel].forEach { v in
v.textColor = .white
}
[locLabel, publishedLabel].forEach { v in
v.textColor = .lightGray
}
starValueLabel.textColor = .systemYellow
outerHStack.translatesAutoresizingMaskIntoConstraints = false
addSubview(outerHStack)
[nameLabel, locLabel, reviewTextLabel, publishedLabel].forEach { v in
labelsVStack.addArrangedSubview(v)
}
[starValueLabel, starImageView].forEach { v in
starsHStack.addArrangedSubview(v)
}
[starsHStack, chevronImageView].forEach { v in
starsAndChevronVStack.addArrangedSubview(v)
}
[reviewerImageContainer, labelsVStack, starsAndChevronVStack].forEach { v in
outerHStack.addArrangedSubview(v)
}
// add reviewer image view to container
reviewerImageContainer.addSubview(reviewerImageView)
reviewerImageView.translatesAutoresizingMaskIntoConstraints = false
// specific properties
reviewerImageView.contentMode = .scaleAspectFill
reviewerImageView.layer.cornerRadius = 40
reviewerImageView.layer.masksToBounds = true
let cfg = UIImage.SymbolConfiguration(pointSize: 12.0, weight: .bold)
if let img = UIImage(systemName: "star.fill", withConfiguration: cfg) {
starImageView.image = img
}
starImageView.tintColor = .systemYellow
starImageView.contentMode = .center
starValueLabel.text = "4"
if let img = UIImage(systemName: "chevron.right", withConfiguration: cfg) {
chevronImageView.image = img
}
chevronImageView.tintColor = .lightGray
chevronImageView.contentMode = .center
nameLabel.text = "Name Here"
locLabel.text = "Location Here"
reviewTextLabel.text = "Review Text Here"
publishedLabel.text = "Published Info Here"
let g = self
// to get the 2nd vertical stack view to fit (horizontally) to its content
let sacWidth = starsAndChevronVStack.widthAnchor.constraint(equalToConstant: 10.0)
sacWidth.priority = .defaultHigh
let vPadding: CGFloat = 12
let hPadding: CGFloat = 10
NSLayoutConstraint.activate([
outerHStack.topAnchor.constraint(equalTo: g.topAnchor, constant: vPadding),
outerHStack.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: hPadding),
outerHStack.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: -hPadding),
outerHStack.bottomAnchor.constraint(equalTo: g.bottomAnchor, constant: -vPadding),
reviewerImageView.widthAnchor.constraint(equalToConstant: 80.0),
reviewerImageView.heightAnchor.constraint(equalTo: reviewerImageView.widthAnchor),
// align the reviewer image view with the top of the container view
reviewerImageView.topAnchor.constraint(equalTo: reviewerImageContainer.topAnchor),
reviewerImageView.leadingAnchor.constraint(equalTo: reviewerImageContainer.leadingAnchor),
reviewerImageView.trailingAnchor.constraint(equalTo: reviewerImageContainer.trailingAnchor),
// give the stars value label a width, so it doesn't vary by text
// "5" is wider than "1" (or it may be "" ?)
starValueLabel.widthAnchor.constraint(equalToConstant: 16.0),
// make the star image view square
starImageView.widthAnchor.constraint(equalTo: starImageView.heightAnchor),
// make the stars HStack height equal to the stars label height
starsHStack.heightAnchor.constraint(equalTo: starValueLabel.heightAnchor),
sacWidth,
])
}
}
and an example controller:
class ReviewVC: UIViewController {
let scrollView: UIScrollView = {
let v = UIScrollView()
return v
}()
let reviewsStack: UIStackView = {
let v = UIStackView()
v.axis = .vertical
v.spacing = 0
return v
}()
override func viewDidLoad() {
super.viewDidLoad()
[reviewsStack, scrollView].forEach { v in
v.translatesAutoresizingMaskIntoConstraints = false
}
scrollView.addSubview(reviewsStack)
view.addSubview(scrollView)
let g = view.safeAreaLayoutGuide
let contentG = scrollView.contentLayoutGuide
let frameG = scrollView.frameLayoutGuide
NSLayoutConstraint.activate([
scrollView.topAnchor.constraint(equalTo: g.topAnchor, constant: 0.0),
scrollView.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 0.0),
scrollView.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: 0.0),
scrollView.bottomAnchor.constraint(equalTo: g.bottomAnchor, constant: 0.0),
reviewsStack.topAnchor.constraint(equalTo: contentG.topAnchor, constant: 0.0),
reviewsStack.leadingAnchor.constraint(equalTo: contentG.leadingAnchor, constant: 0.0),
reviewsStack.trailingAnchor.constraint(equalTo: contentG.trailingAnchor, constant: 0.0),
reviewsStack.bottomAnchor.constraint(equalTo: contentG.bottomAnchor, constant: 0.0),
reviewsStack.widthAnchor.constraint(equalTo: frameG.widthAnchor, constant: 0.0),
])
let sampleLocs: [String] = [
"Koblenz, Germany",
"Westerwald, Germany",
"Bonn, Germany",
"Saarbrüken, Germany",
]
let sampleRevs: [String] = [
"For some reason, I am failing to make the UIView (Gray box from the top light gray line to the bottom one) resize correctly.",
"A Single Line",
"The white text inside it (Actual review) is longer than 1 line and should not get cut off, only when reaching a maximum of say 5 lines.",
"The thing is, it works when I don't set width and height constraints for the user image you see on the left side. Removing those will make the view resize correctly, but it will completely distort the image.",
"Another Single Line",
"The image top and botton anchors seem to be glued to the anchors in its horizontal stackview, which again are stuck to the UIView's top and botton anchors with constants, as it should.",
]
let sampleStars: [String] = [
"5", "4", "3", "2", "1",
]
for i in 0..<sampleRevs.count {
let v = JanView()
v.nameLabel.text = "Clara R."
v.locLabel.text = sampleLocs[i % sampleLocs.count]
v.reviewTextLabel.text = sampleRevs[i]
v.publishedLabel.text = "Published less than 24h ago"
v.starValueLabel.text = sampleStars[i % sampleStars.count]
if let img = UIImage(named: "prof") {
v.reviewerImageView.image = img
}
reviewsStack.addArrangedSubview(v)
let sepView = UIView()
sepView.backgroundColor = .lightGray
sepView.heightAnchor.constraint(equalToConstant: 1.0).isActive = true
reviewsStack.addArrangedSubview(sepView)
}
}
}
Here is how it ends up looking: