0

Currently, I have a Vertical StackView. Inside that StackView, there are three Horizontal StackViews. In each one of those, there are two UIView's which are loading a XIB Storyboard View that I have created. It looks like this:

enter image description here

In each of those XIB UIViews there is a ImageView and a Label. Currently I am having an issue where the first ImageView in the first UIView is the correct size, but all the other ImageViews following it have been shrunk for some reason. This is what I mean:

enter image description here

What I've found, is that if I uncomment the line of code that sets the image for the "FIRST ITEM"'s ImageView, the "SECOND ITEM" will now be the correct size, and everything after that will be shrunk as seen here:

enter image description here

For some reason, only the ImageView that's been set first will be the correct size and everything after that will be shrunk.

The constraints on the XIB file is as follows:

enter image description here

The Content Mode on the ImageView is "Aspect Fit".

Both the overarching Vertical StackView and each Horizontal StackView has "Distribution" set to "Fill Equally".

I set all the UIView information in the viewDidLoad function like this:

calendarMenuItem.setBackgroundColour(colour: Environment.Colours.navyGreen)
calendarMenuItem.iconImageView.image = UIImage(systemName: "calendar.circle.fill")
calendarMenuItem.headingLabel.text = "FIRST ITEM"

Does anyone know how I can fix it? I'm sorry if I haven't provided enough information because I'm not sure what else to provide. If you need to see more I can update the question.

Thank you.

Julian
  • 98
  • 1
  • 11
  • 1
    Provide details about the setup of the image view in XIB - which constraints, which content mode – Eugene Dudnyk Sep 13 '20 at 03:18
  • Just use a CollectionView. – Muhammed Gül Sep 13 '20 at 15:17
  • @EugeneDudnyk I updated the question. Please let me know if there is anything else I can provide. – Julian Sep 13 '20 at 23:27
  • @MuhammedGul If I can't get this to work, that is an approach I may explore, although I didn't really want to use a UICollectionView – Julian Sep 13 '20 at 23:28
  • this is really easy if you understand how `intrinsicContentSize` of any view works. They can determine their size and stack view or parent view will use that size as default to layout. https://developer.apple.com/documentation/uikit/uiview/1622600-intrinsiccontentsize – Quang Hà Jun 23 '21 at 08:03

2 Answers2

0

It seems like the issue occurred because the ImageView's bottom constraint was being connected to the top of the label. When I instead added the constraint to the bottom of the View, it was fixed.

There is still some sizing issues with the ImageView shrinking way to small on a smaller device like an iPhone 8, but it did fix the issue of only the first View's ImageView being the correct size and all the other ones being smaller. Now they are all the same size.

enter image description here

Julian
  • 98
  • 1
  • 11
0

you can just try to give the image fixed width and height and it will work

Menaim
  • 937
  • 7
  • 28