Question

I want to create UILabel and some other elements with code. UILabel size can change depending on the text, so I must move other elements accordingly. How can I do that most effectively? I try to access bounds property, but strangely, it is null:

CGRect textRect = CGRectMake(20, 20, 280, 50);
label = [[UILabel alloc] initWithFrame:textRect];
label.text = someString;
label.lineBreakMode = UILineBreakModeWordWrap;
label.numberOfLines = 0;    
[superView addSubview: label];
NSLog(@"bounds: %@", label.bounds);

prints out “bounds: (null)”

The label itself renders just fine in the expected coordinates.

Answer 1

The bounds property is a CGRect. A CGRect is not an Objective-C object, so you can’t print it directly using %@. You need to convert it to a string first using NSStringFromCGRect:

NSLog(@"bounds: %@", NSStringFromCGRect(label.bounds));

The best way to handle laying out the UILabel and the elements around it is by creating a custom UIView subclass to contain the label and other elements, and overriding its layoutSubviews method to do the layout.

For example, let’s say we want to have the label and an image view, and we want the image view to be flush against the bottom edge of the label. We can create a UIView subclass named ContainerView:

@interface ContainerView : UIView

@property (nonatomic, strong) UILabel *label;
@property (nonatomic, strong) UIImageView *imageView;

@end

We can use this as the superview of the label and an image view. We’ll rely on the ContainerView to lay out the label and the image, so we don’t need to specify their frames. We’ll also rely on the ContainerView to add the label and the image view as subviews.

ContainerView *superView = [[ContainerView alloc] initWithFrame:someRect];

UILabel *label = [[UILabel alloc] initWithFrame:CGRectZero];
label.text = someString;
label.lineBreakMode = UILineBreakModeWordWrap;
label.numberOfLines = 0;
superView.label = label;

UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"someImage"]];
superView.imageView = imageView;

[self.view addSubview:superView];

Here’s how we implement ContainerView (assuming we’re using ARC):

@implementation ContainerView

@synthesize label = _label;
@synthesize imageView = _imageView;

We’ll override ContainerView’s ‘label’ setter to add the label as a subview:

- (void)setLabel:(UILabel *)label {
    if (_label) {
         [_label removeFromSuperview];
    }
    _label = label;
    if (_label) {
        [self addSubview:label];
    }
}

We do the same for the ‘imageView’ setter:

- (void)setImageView:(UIImageView *)imageView {
    if (_imageView) {
         [_imageView removeFromSuperview];
    }
    _imageView = imageView;
    if (_imageView) {
        [self addSubview:imageView];
    }
}

The interesting part is the layoutSubviews method. The system sends the layoutSubviews message to a view at various times, including after it gets new subviews and when its size changes.

- (void)layoutSubviews {
    [super layoutSubviews];

    // Put the label's upper left corner at (20, 20) and make it as wide as I am,
    // minus a 20 point margin on each side.
    self.label.frame = CGRectMake(20, 20, self.bounds.size.width - 40, 10000);
    // Tell the label to make itself exactly large enough to fit its text.  This will
    // shrink its height.
    [self.label sizeToFit];

    // Now put the image view flush against the bottom edge of the label.
    CGSize imageSize = self.imageView.image.size;
    self.imageView.frame = CGRectMake(20, CGRectGetMaxY(self.label.frame),
        imageSize.width, imageSize.height);
}