Question

I am trying to figure this out despite reading Apple docs such as the guide for Windows and Views.

My issue is best illustrated by this screen capture:

As you can see the blog post has a picture with variable height (but fixed width = 320px), which may or may not overlap with the view element below it, which is a label.

Similar to what one would do with CSS, I would need the UIImageView to be “display:block”, as well as the label.

So if the image occupies more or less vertical space, the element below would adjust its position accordingly. Is this only done programatically?

I’ve tried to do this hierarchically by placing each in their separate view to no avail.
“Clip subviews” is unticked.

Any advice on the general procedure to get this done, or links to relevant material is greatly appreciated.

---

Controller code (postTextLabel and postPicture are connected IBOutlets)

#import "DetailViewController.h"

@interface DetailViewController ()

- (void)configureView;

@end

@implementation DetailViewController;

@synthesize scroller;

- (void)viewDidLoad
{
    [super viewDidLoad];
    [self configureView];

        CGRect label_frame = CGRectMake(postTextLabel.frame.origin.x,
                                        postPicture.frame.origin.y + postPicture.frame.size.height,
                                        postTextLabel.frame.size.width,
                                        postTextLabel.frame.size.height);

        postTextLabel.frame = label_frame;

}

- (void)configureView
{
    if (self.detailItem) {
        NSDictionary *post           = self.detailItem;
        NSString     *postText       = [post objectForKey:@"post_text"];
        NSString     *postAuthorName = [post objectForKey:@"post_author_name"];

        postTextLabel.numberOfLines = 0;
        postTextLabel.text       = postText;
        postAuthorNameLabel.text = postAuthorName;

        dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
            NSString *pictureUrl = [post objectForKey:@"post_picture"];
            NSData   *data       = [NSData dataWithContentsOfURL:[NSURL URLWithString:pictureUrl]];

            dispatch_async(dispatch_get_main_queue(), ^{
                postPicture.image = [UIImage imageWithData:data];
            });
        });
    }
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
}
@end

Answer 1

Assuming what you’re aiming for is just to have the label snap to the bottom of the image, programmatic is your best approach – I don’t think there’s a way to do it in Interface Builder. If you set up the image and label as IBOutlets named image and label respectively, code like the following should give you what you’re aiming for:

CGRect label_frame = CGRectMake(label.frame.origin.x, image.frame.origin.y + image.frame.size.height, label.frame.size.width, label.frame.size.height);
label.frame = label_frame;

Call this whenever the image is changed and the text should be positioned below it, top edge of the label aligned with the bottom of the image. Remember you may need to alter the scroll view’s contentSize to match if the image/text becomes larger.