Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

iOS UIView with an Image and Text with Dynamic Height

DZone's Guide to

iOS UIView with an Image and Text with Dynamic Height

· Java Zone
Free Resource

What every Java engineer should know about microservices: Reactive Microservices Architecture.  Brought to you in partnership with Lightbend.

Last week I struggled with this rather basic problem of adjusting the height of a UIView dynamically.

TL;DR: the solution was to align the bottom edge with a control with the view.

image

We use a custom UIView with a fixed height of 120px to display a separator, an image and text on its right. We also use FLKAutoLayout, which is where all these nice alignment methods come from.

    - (void)displayText:(NSString *)text andImage:(NSString *)imageUrl
    {
        UIView *separator = [[UIView alloc] init];
        separator.backgroundColor = [UIColor colorWithWhite: 0xe5/255.f alpha:1];
        [self addSubview:separator];
        [separator constrainHeight:@"1"];
        [separator constrainWidthToView:self predicate:nil];
        [separator alignCenterXWithView:self predicate:nil];
     
        ARAspectRatioImageView *imageView = [[ARAspectRatioImageView alloc] init];
        NSURL *imageUrl = [NSURL URLWithString:url];
        [imageView setImageWithURL:imageUrl];
        [self addSubview:imageView];
        [imageView alignTopEdgeWithView:self predicate:@"20"];
        [imageView alignLeadingEdgeWithView:self predicate:@"20"];
        [imageView constrainWidth:@"80"];
        [imageView setContentMode:UIViewContentModeScaleAspectFit];
       
        UILabel *labelView = [[UILabel alloc] init];
        labelView.text = text;
        [self addSubview:labelView];
        [labelView alignTopEdgeWithView:imageView predicate:@"0"];
        [labelView alignAttribute:NSLayoutAttributeLeading
                      toAttribute:NSLayoutAttributeTrailing
                           ofView:imageView predicate:@"20"];
        [labelView alignTrailingEdgeWithView:self predicate:@"-20"];
    }
     
    - (CGSize)intrinsicContentSize
    {
        return CGSizeMake(UIViewNoIntrinsicMetric, 120);
    }

This is obviously problematic for tall images and cropping art is a major offense. How do we dynamically calculate the height of the view based on the image and/or text height? Since the image is loaded dynamically, are we going to have to write some pretty involved code to wait until its height is known? Do we need to auto-size the label and calculate its height after it wraps over multiple lines?

The answer is that we don’t need to do any of this. With auto-layout we need to attach the image and the text to the bottom of the containing view.

    [self alignBottomEdgeWithView:labelView predicate:@"10"];
    [self alignBottomEdgeWithView:imageView predicate:@"10"];

With this constraint auto-layout seems to be smart enough to pick the tallest control to calculate the height of the view.

image

Microservices for Java, explained. Revitalize your legacy systems (and your career) with Reactive Microservices Architecture, a free O'Reilly book. Brought to you in partnership with Lightbend.

Topics:

Published at DZone with permission of Daniel Doubrovkine. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}