Why does AutoLayout render one way before rotation and another after rotation?

Question

Created Jun ’15

Replies 2

Boosts 0

Participants 2

[In the past I've been able to put screenshots in my posts, but it looks like that's gone. I'll replace them with an appropriate emoticon: 😟]

Hi, I am trying to use AutoLayout inside a UITableViewCell with Objective-C. I am not using a nib/xib/storyboard. I create my views in code.

Here's my UITableViewCell:

@implementation SettlementTableViewCell
- (instancetype) initWithReuseIdentifier:(NSString *)reuseIdentifier {
    self = [super initWithStyle:UITableViewCellStyleDefault reuseIdentifier:reuseIdentifier];
    if (!self) return nil;

    [self setSelectionStyle:UITableViewCellSelectionStyleNone];

    _order = [[UILabel alloc] init];
    [_order setTranslatesAutoresizingMaskIntoConstraints:NO];
    [_order setFont:[UIFont preferredFontForTextStyle:UIFontTextStyleHeadline]];
    [[self contentView] addSubview:_order];

    _amount = [[UILabel alloc] init];
    [_amount setTranslatesAutoresizingMaskIntoConstraints:NO];
    [_amount setFont:[UIFont preferredFontForTextStyle:UIFontTextStyleHeadline]];
    [_amount setTextAlignment:NSTextAlignmentRight];
    [[self contentView] addSubview:_amount];

    _pickupDate = [[UILabel alloc] init];
    [_pickupDate setTranslatesAutoresizingMaskIntoConstraints:NO];
    [_pickupDate setFont:[UIFont preferredFontForTextStyle:UIFontTextStyleSubheadline]];
    [[self contentView] addSubview:_pickupDate];

    _pickupLocation = [[UILabel alloc] init];
    [_pickupLocation setTranslatesAutoresizingMaskIntoConstraints:NO];
    [_pickupLocation setFont:[UIFont preferredFontForTextStyle:UIFontTextStyleSubheadline]];
    [_pickupLocation setAdjustsFontSizeToFitWidth:YES];
    [_pickupLocation setTextAlignment:NSTextAlignmentRight];
    [[self contentView] addSubview:_pickupLocation];

    _deliveryDate = [[UILabel alloc] init];
    [_deliveryDate setTranslatesAutoresizingMaskIntoConstraints:NO];
    [_deliveryDate setFont:[UIFont preferredFontForTextStyle:UIFontTextStyleSubheadline]];
    [[self contentView] addSubview:_deliveryDate];

    _deliveryLocation = [[UILabel alloc] init];
    [_deliveryLocation setTranslatesAutoresizingMaskIntoConstraints:NO];
    [_deliveryLocation setFont:[UIFont preferredFontForTextStyle:UIFontTextStyleSubheadline]];
    [_deliveryLocation setAdjustsFontSizeToFitWidth:YES];
    [_deliveryLocation setTextAlignment:NSTextAlignmentRight];
    [[self contentView] addSubview:_deliveryLocation];

    [self setNeedsUpdateConstraints];
    return self;
}
- (void) updateConstraints {
    [super updateConstraints];

    UIEdgeInsets padding = UIEdgeInsetsMake(5, 20, -5, -20);

    [[self contentView] addConstraint:[NSLayoutConstraint constraintWithItem:_order attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationLessThanOrEqual
                                                                      toItem:[self contentView] attribute:NSLayoutAttributeLeft multiplier:1 constant:padding.left]];
    [[self contentView] addConstraint:[NSLayoutConstraint constraintWithItem:_order attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual
                                                                      toItem:[self contentView] attribute:NSLayoutAttributeTop multiplier:1 constant:padding.top]];

    [[self contentView] addConstraint:[NSLayoutConstraint constraintWithItem:_amount attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual
                                                                      toItem:[self contentView] attribute:NSLayoutAttributeTop multiplier:1 constant:padding.top]];
    [[self contentView] addConstraint:[NSLayoutConstraint constraintWithItem:_amount attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual
                                                                      toItem:[self contentView] attribute:NSLayoutAttributeRight multiplier:1 constant:padding.right]];

    [[self contentView] addConstraint:[NSLayoutConstraint constraintWithItem:_pickupDate attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual
                                                                      toItem:[self contentView] attribute:NSLayoutAttributeLeft multiplier:1 constant:padding.left]];
    [[self contentView] addConstraint:[NSLayoutConstraint constraintWithItem:_pickupDate attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual
                                                                      toItem:_order attribute:NSLayoutAttributeBottom multiplier:1 constant:padding.top]];

    [[self contentView] addConstraint:[NSLayoutConstraint constraintWithItem:_pickupLocation attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual
                                                                      toItem:_pickupDate attribute:NSLayoutAttributeTop multiplier:1 constant:0]];
    [[self contentView] addConstraint:[NSLayoutConstraint constraintWithItem:_pickupLocation attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationGreaterThanOrEqual
                                                                      toItem:_pickupDate attribute:NSLayoutAttributeRight multiplier:1.0 constant:2]];
    [[self contentView] addConstraint:[NSLayoutConstraint constraintWithItem:_pickupLocation attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual
                                                                      toItem:[self contentView] attribute:NSLayoutAttributeRight multiplier:1 constant:padding.right]];

    [[self contentView] addConstraint:[NSLayoutConstraint constraintWithItem:_deliveryDate attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual
                                                                      toItem:[self contentView] attribute:NSLayoutAttributeLeft multiplier:1 constant:padding.left]];
    [[self contentView] addConstraint:[NSLayoutConstraint constraintWithItem:_deliveryDate attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual
                                                                      toItem:_pickupDate attribute:NSLayoutAttributeBottom multiplier:1 constant:0]];
    [[self contentView] addConstraint:[NSLayoutConstraint constraintWithItem:_deliveryDate attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual
                                                                      toItem:[self contentView] attribute:NSLayoutAttributeBottom multiplier:1 constant:padding.bottom]];

    [[self contentView] addConstraint:[NSLayoutConstraint constraintWithItem:_deliveryLocation attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual
                                                                      toItem:_deliveryDate attribute:NSLayoutAttributeTop multiplier:1 constant:0]];
    [[self contentView] addConstraint:[NSLayoutConstraint constraintWithItem:_deliveryLocation attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual
                                                                      toItem:[self contentView] attribute:NSLayoutAttributeBottom multiplier:1 constant:padding.bottom]];
    [[self contentView] addConstraint:[NSLayoutConstraint constraintWithItem:_deliveryLocation attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationGreaterThanOrEqual
                                                                      toItem:_deliveryDate attribute:NSLayoutAttributeRight multiplier:1.0 constant:2]];
    [[self contentView] addConstraint:[NSLayoutConstraint constraintWithItem:_deliveryLocation attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual
                                                                      toItem:[self contentView] attribute:NSLayoutAttributeRight multiplier:1 constant:padding.right]];
}
@end

Here's my UIViewController:

@interface Settlement : NSObject
@property (nonatomic, strong) NSString *orderId;
@property (nonatomic, strong) NSString *amount;
@property (nonatomic, strong) NSString *pickupDate;
@property (nonatomic, strong) NSString *deliveryDate;
@property (nonatomic, strong) NSString *pickupLocation;
@property (nonatomic, strong) NSString *deliveryLocation;
@end

@implementation Settlement
@end

@interface SettlementsViewController () <UITableViewDelegate, UITableViewDataSource>
@property (nonatomic, strong) NSMutableArray *rows;
@property (nonatomic, strong) UITableView *tableView;
@end

@implementation SettlementsViewController
- (instancetype) init {
    self = [super init];
    if (!self) return nil;

    [self setTitle:@"Settlements"];

    _rows = [[NSMutableArray alloc] initWithCapacity:5];

    Settlement *set = [[Settlement alloc] init];
    [set setOrderId:@"01234567"];
    [set setAmount:@"$9999.99"];
    [set setPickupDate:@"02/23/2015 0800"];
    [set setDeliveryDate:@"02/25/2015 1100"];
    [set setPickupLocation:@"Point Field Landing on the Severn, MD"];
    [set setDeliveryLocation:@"Winchester-on-the-Severn, MD"];
    [_rows addObject:set];

    set = [[Settlement alloc] init];
    [set setOrderId:@"0006181"];
    [set setAmount:@"$3.42"];
    [set setPickupDate:@"12/26/2013 1040"];
    [set setDeliveryDate:@"02/13/2014 0800"];
    [set setPickupLocation:@"Irondale, AL"];
    [set setDeliveryLocation:@"Lithonia, GA"];
    [_rows addObject:set];

    set = [[Settlement alloc] init];
    [set setOrderId:@"0002586"];
    [set setAmount:@"$1.66"];
    [set setPickupDate:@"09/27/2012 1350"];
    [set setDeliveryDate:@"02/09/2013 1115"];
    [set setPickupLocation:@"Decatur, AL"];
    [set setDeliveryLocation:@"Birmingham, AL"];
    [_rows addObject:set];

    set = [[Settlement alloc] init];
    [set setOrderId:@"0002586"];
    [set setAmount:@"$41.22"];
    [set setPickupDate:@"11/08/2013 1608"];
    [set setDeliveryDate:@"11/11/2013 0000"];
    [set setPickupLocation:@"Birmingham, AL"];
    [set setDeliveryLocation:@"Simi Valley, CA"];
    [_rows addObject:set];

    set = [[Settlement alloc] init];
    [set setOrderId:@"0002586"];
    [set setAmount:@"$41.22"];
    [set setPickupDate:@"11/08/2013 1608"];
    [set setDeliveryDate:@"11/11/2013 0000"];
    [set setPickupLocation:@"Birmingham, AL"];
    [set setDeliveryLocation:@"Simi Valley, CA"];
    [_rows addObject:set];

    return self;
}
- (void) loadView {
    [super loadView];

    _tableView = [[UITableView alloc] initWithFrame:self.view.bounds style:UITableViewStyleGrouped];
    [_tableView setAutoresizingMask:UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth];
    [_tableView setDelegate:self];
    [_tableView setDataSource:self];
    [_tableView setEstimatedRowHeight:72.0f];
    [_tableView setRowHeight:UITableViewAutomaticDimension];
    [[self view] addSubview:_tableView];
}
- (NSInteger) tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { return _rows.count; }

- (UITableViewCell *) tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    SettlementTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell"];
    if (!cell) cell = [[SettlementTableViewCell alloc] initWithReuseIdentifier:@"cell"];

    Settlement *settlement = [_rows objectAtIndex:indexPath.row];
    [[cell order] setText:[settlement orderId]];
    [[cell amount] setText:[settlement amount]];
    [[cell pickupDate] setText:[settlement pickupDate]];
    [[cell deliveryDate] setText:[settlement deliveryDate]];
    [[cell pickupLocation] setText:[settlement pickupLocation]];
    [[cell deliveryLocation] setText:[settlement deliveryLocation]];

    return cell;
}
@end

The problem is that when I first load the screen, the two date fields are crunched by the very long city names. When I rotate to landscape, there's plenty of room and everything looks fine. When I rotate back to portrait, the layout is different. It's actually now what I wanted it to look like in the first place. The dates are correct and the city fields' fonts are adjusted to fit in the remaining space.

Boost

Answer 1

TommieC OP

Jun ’15

You have serveral options. If any of these attributes look unfamiliar you can temporarily add a like control to a storyboard and by clicking on the appropriate field in the storyboard, you will be able to see the underlying view property by opening the attributes utility.

Options:

You could set the minimum font scaling to move down the font size.
You could look at changing the priority of your various constraints to less than 1000, so that one or more of the constraints will adjust to the available space (note: do not set any of these constraints to 1000 in code or an error will occur when you attempt to change it to 999 for example) - This will allow your constraints to adjust.
You could attempt to rebuild the functionality of Size Classes in code to allow the constraints to have different states depending on screen size and device orientation

Nota Bene

I am not sure if your use of building the entire UI is by choice or system restriction but I want to note for all others that use of storyboard, autolayout, and size classes in code is creating many times the amount of work required to do the task. If possible use the storyboard.

Having said that, if you have no choice but to use code for this then I think option 1 is the easiest to implement. You might want to adjust the initial sizing and spacing such that your controls are laid out in a way that makes user selection and input easiest. You could take a hybrid approach and stack the controls vertically in portrait and horizontally when the device is rotated (you would have to invalidate the contraints and reconstruct them in that case, during the view transitions).

0

Answer 2

Frameworks Engineer OP

Apple

Jun ’15

You have a few problems here:

1) You are implementing -updateConstraints but each time its called you add more and more constraints without ever removing any. This is likely to cause instability in the system

2) You are adding these constraints in -updateConstraints in the first place – just add them at creation (inside your -init method). -updateConstraints is for cases where you can save work due to needing to add or modify lots of constraints, not for the general case of adding constraints to views.

3) Inequality constraints (LessThanOrEqual and GreaterThanOrEqual) are really useful, but also can be hard to get right as they allow a lot of ambiguity in the system.

Finally, I would highly recommend that if you plan to make use of Auto Layout that you watch the Mysteries of Auto Layout sessions from this year's WWDC

Mysteries of Auto Layout, Part 1

Mysteries of Auto Layout, Part 2

0