How to properly add an UIImageView inside an UIStackView

Question

My UIImageView is loaded with a picture with a high resolution. When I add the UIImageView to the UIStackView, the stack view will grow up to 1900x1200 dimension. The UIImageView contentMode is set to Aspect Fill.

What can I do so that the image remains with its current dimension (130x130) after adding it to the stack view ?

[self addConstraint:[NSLayoutConstraint constraintWithItem:myUIImageVIew attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.f constant:130]]; [self addConstraint:[NSLayoutConstraint constraintWithItem:myUIImageVIew attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.f constant:130]]; — Larry Pickles, Aug 15 '15 at 18:12

score 25 · Accepted Answer · answered Sep 28 '15 at 04:41

25

I hope you got your question answered by now, but if not here you go:

Simply add a height and width constraint to your UIImageView before putting it in your stack view. Make them both 130 and you should be good to go.

answered Sep 28 '15 at 04:41

Rob Norback

6,401
2
34
38

Hi i was wondering why we had to add constraints to the UIIMageView before placing inside a stack view. Isnt the stackView supposed take care of constraints for us? – Just a coder Dec 23 '15 at 23:39
1

It helps with positioning constraints, and does its job very well. But it would be a very restrictive construct if everything had to be the same height and width inside the stack view. It can set height and width automatically for you, but if you want finer control, height and width constraints are the way to go. – Rob Norback Dec 25 '15 at 19:18
So simple, awesome. I was struggling with UIImageView inside stackView and didn't think about constraints on it before actually putting it in stack view. Thanks! – Bastek Dec 07 '16 at 15:33
I don't make it like this, because this way the UIStackView collapses to fit the UIImageView, if we have another element in the same stack without constraints, they will also collapse let's say you also have a label... in the horizontal UIStackView the height will adjust to the UIImageview if its smaller... cropping the label. what I usually do to fix this is to create a UIView container for the imageview. If the stack is horizontal, I set the imageview width and center equal to the container if vertical I set the height and center – João Serra Apr 19 '22 at 14:50

pronebird · Answer 2 · 2015-11-10T18:07:31.623

I was able to overcome this by settings aspect ratio for image view. My UIImageView is not directly added to UIStackView, instead wrapped in plain UIView. This way I can avoid interfering directly with any constraints that UIStackView creates for each added subview.

Example using PureLayout:

#import <math.h>
#import <float.h>

@interface StackImageView : UIView

@property (nonatomic) UIImageView *imageView;
@property (nonatomic) NSLayoutConstraint *aspectFitConstraint;

@end

@implementation StackImageView

// skip initialization for sanity
// - (instancetype)initWithFrame:...

- (void)setup {
    self.imageView = [[UIImageView alloc] initForAutoLayout];
    self.imageView.contentMode = UIViewContentModeScaleAspectFit;

    [self addSubview:self.imageView];

    // pin image view to superview edges
    [self.imageView autoPinEdgesToSuperviewEdges];
}

- (void)setImage:(UIImage *)image {
    CGSize size = image.size;
    CGFloat aspectRatio = 0;

    // update image
    self.imageView.image = image;

    if(fabs(size.height) >= FLT_EPSILON) {
        aspectRatio = size.width / size.height;
    }

    // Remove previously set constraint
    if(self.aspectFitConstraint) {
        [self.imageView removeConstraint:self.aspectFitConstraint];
        self.aspectFitConstraint = nil;
    }

    // Using PureLayout library
    // you may achieve the same using NSLayoutConstraint
    // by setting width-to-height constraint with
    // calculated aspect ratio as multiplier value
    self.aspectFitConstraint =
    [self.imageView autoMatchDimension:ALDimensionWidth  
                           toDimension:ALDimensionHeight 
                                ofView:self.imageView
                        withMultiplier:aspectRatio 
                              relation:NSLayoutRelationEqual];
}

@end

score -3 · Answer 3 · answered Apr 12 '19 at 07:36

-3

set

clipToBounds = true

You can achieve this by Interface builder by checking the option for Image view or you can add code as

imageView.clipToBounds = true

answered Apr 12 '19 at 07:36

Mukul More

554
2
5
18

How to properly add an UIImageView inside an UIStackView

3 Answers3