Programatically creating a UIView with multiple Labels

Question

Xcode Interface Builder issue
Personally I do not like the way that interface builder works in Xcode. In this example I am trying to create a fairly complex view controller. On the viewDidLoad of the view controller I show a custom alert view (as such). It is not actually an alert view but more of a view that shows the user some information. I have a dimmed background view and a view on top of this. If I try to create this in interface builder it gets overly complicated as you cannot select the views in the background and move them etc without dropping subviews into the wrong views and so on...

Scenario
What I am trying to do is create a View which holds some labels and a button. The view controller has a difficulty property based on this it will have different text in the labels/amount of labels.
I.e. Easy -- 3 labels
Hard -- 4 labels

I create the dimmedView and alert(styled)View like this:

// Setup the dimmedView
UIView *dimmedView = [[UIView alloc] initWithFrame:self.view.frame];
dimmedView.backgroundColor = [UIColor colorWithWhite:0 alpha:0.6];

// Setup the startingAlertView
UIView *startingAlertView = [[UIView alloc] init];
startingAlertView.backgroundColor = [UIColor whiteColor];

I then create the three/four labels based on some logic and add the necassary labels to the startingAlertView based on logic also.

The issue that is obvious is that at no point a frame for the view is set. This means that it is returning 0,0,0,0. What I would like to happen is the view to take the required height based on the labels added.

I am building for IOS7 and using Auto Layout. Should I be setting up constraints which would then adjust the relevant heights and locations in the view possibly?

Answer 1

I am building for IOS7 and using Auto Layout. Should I be setting up constraints which would then adjust the relevant heights and locations in the view possibly?

Yes. you don't use initWithFrame: under auto layout, or rather, you can, but the frame is ignored. Create your dimming view with a frame of CGRectZero, setting translatesAutoresizingMasksToConstraints to NO, add it to your main view and create constraints pinning it to all edges of the superview.

Then, add your alert view, again with a frame of zero and the translates... property set to NO. Create constraints to centre this view in your dimming view. This view will get its size from its subviews, since labels have an intrinsic size.

Add your labels as subviews of this view, with frame of zero and translates... set to NO. Depending on their content you may wish to set preferred max layout width or a width constraint.

Create constraints pinning your labels to the left and right edges of the superview, and lining your labels up in a vertical 'stack'. In each case you could add padding to give your alert a bit of a border.

This can look like a large amount of code, so you may want to read the articles I've written on visual format for auto layout and creating constraints in code, with the associated autolayout convenience category to make your life easier.

Answer 2

If you're going to the auto layout route, then you can add constraints that will keep the proper space between each label, and the proper space between the top and bottom of the view with the first and last labels. However, if you're not doing this in Interface Builder, you might as well skip using auto layout also, because it's fairly simple to just adjust the height of the view as you add labels.

You would start by setting the height of the view to the size of the top and bottom spaces that you want to have around the labels. Then each time you add a label, add to it the height of the label plus the height of the space you're putting between labels.

You could also wait until you've added all of the labels that you want, then set the height to the bottom label's y position plus its height plus the bottom space you want to have around the labels.

Answer 3

Yes, using autolayout you can get the bounds from the parent view.

Here is a quick example, notice that we are not using frame, and using CGRectZero for our UILabels, the positioning comes from updateConstraints instead. I am using Visual Format Language to layout the labels which I recommend if you are doing it programatically.

Here we are making the labels the width of the parent view and then just stacked on top of each other.

#import "View.h"

@implementation View{
    UILabel *_label1;
    UILabel *_label2;
    UILabel *_label3;
}

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        _label1 = [[UILabel alloc] initWithFrame:CGRectZero];
        _label1.translatesAutoresizingMaskIntoConstraints = NO;
        _label1.text = @"LABEL 1";

        _label2 = [[UILabel alloc] initWithFrame:CGRectZero];
        _label2.translatesAutoresizingMaskIntoConstraints = NO;
        _label2.text = @"LABEL 2";

        _label3 = [[UILabel alloc] initWithFrame:CGRectZero];
        _label3.translatesAutoresizingMaskIntoConstraints = NO;
        _label3.text = @"LABEL 3";

        [self addSubview:_label1];
        [self addSubview:_label2];
        [self addSubview:_label3];
    }


    [self updateConstraintsIfNeeded];

    return self;
}

-(void)updateConstraints
{
    [super updateConstraints];

    NSDictionary *_viewsDictionary = NSDictionaryOfVariableBindings(_label1,_label2,_label3);


    // Set the contraintsto span the entire width of the super view
    NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[_label1]-|"
                                                                   options:0
                                                                   metrics:nil
                                                                     views:_viewsDictionary];

    [self addConstraints:constraints];

    constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[_label2]-|"
                                                                   options:0
                                                                   metrics:nil
                                                                     views:_viewsDictionary];
    [self addConstraints:constraints];

    constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[_label3]-|"
                                                                   options:0
                                                                   metrics:nil
                                                                     views:_viewsDictionary];

    [self addConstraints:constraints];


    // Last setup the vertical contraints other wise they will end up in a random place
    constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-[_label1]-[_label2]-[_label3]"
                                                                   options:0
                                                                   metrics:nil
                                                                     views:_viewsDictionary];
    [self addConstraints:constraints];
}

/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect
{
    // Drawing code
}
*/

@end