CODEWITHSUNDEEP
iosobjective-cuilabelautolayout
Brandon
Brandon

Reputation: 113

Where is this vertical spacing coming from in UILabelView?

I'm creating an iOS view that displays various static text elements. The xib looks like this:

enter image description here

It uses four labels for the title, timestamp, body, and footer. Every view is anchored to the sibling view above it vertically and anchored to the left/right of the parent view. All labels have a fixed height except the body which has a >= height and the number of lines set to 0 with "word wrap" as the line wrapping style. The parent view is a UIScrollView.

On the iPhone it looks like fine:

iPhone beginning of scroll iPhone end of scroll

However on the iPad it looks like this:

iPad beginning of scroll iPad end of scroll

Huh? Where is all that extra vertical space in the body label coming from? The xib and its view controller are identical between iPhone and iPad (there is no custom iPad code at the moment). I've found that the vertical space is directly related to how many line-wraps the label renders. If no lines wrap, no extra vertical space. If only a few lines wrap, there's a little extra vertical space. If nearly every line wraps, well, that's what it looks like.

First of all any ideas on why UILabel is behaving this way?

Second of all, if I can't make it stop doing this how can I work around it?

I've already tried a few things. If I call [bodyLabel sizeToFit] within -viewDidLayoutSubViews then it fixes the label but doesn't fix the layout of any of the sibling views (e.g. the Footer label is stuck way at the bottom of the screen instead of pulled up to just under the body). Any attempts to get the entire view to re-layout its children after calling sizeToFit is ignored. I've also tried sizing the UILabel by calculating height based on font, which results in the same behavior as -sizeToFit (albeit with more code).

Replacing the Body UILabel with a UITextView instead doesn't give me the weird vertical spacing issues but I need to calculate the height of the UITextView manually (using font calculations) and something about resizing the UITextView within the parent UIScrollView makes it so the UIScrollView simply refuses to scroll (as if it doesn't know its contents are too big for its bounds).

So at the moment I'm stuck. Even just an explanation of why UILabel behaves this way on the iPad layout would be helpful.

Upvotes: 5

Views: 1621

Answers (2)

chasew
chasew

Reputation: 8828

In case anyone else runs into this same issue using autolayout... I may have been able to solve the same issue by creating a constraint as Coche suggests, but I realized I had a preferredMaxLayoutWidth that was too small set on the uilabel. Once I set an accurate preferredMaxLayoutWidth (the actual width of the label) the spacing on top and bottom disappeared.

Upvotes: 4

CoderPug
CoderPug

Reputation: 918

The main problem is that the method for auto resizing the text inside your Label is failing because in iPad your Label doesn't have a set width from the beginning, it is calculated on run time and that's the source of that mess. On iPhone, as your Label has a set width (on IB) there is no troubles.

There are two ways for solving the problem:

  1. Having two storyboards : one for iPhone and one for iPad

    Doing this will make that your Label knows its width since the beginning and it will just works as on iPhone. enter image description here

  2. Having just one Storyboard for both iPhone and iPad

    You can go around the problem by calculating the size that best fits its text and with that result add a height constraint by code to the Label. For calculating the desiredSize you can calculate the width with this formula: Current View's width - (Leading space + Trailing Space). Here is my code

CGSize desiredSize = [_bodyLabel sizeThatFits:CGSizeMake(self.view.frame.size.width-40, 10)];
NSString *visualContraint = [NSString stringWithFormat:@"V:[_bodyLabel(%.0f)]",desiredSize.height];
[_bodyLabel addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:visualContraint
                                                                   options:NSLayoutFormatDirectionLeadingToTrailing
                                                                   metrics:nil
                                                                     views:NSDictionaryOfVariableBindings(_bodyLabel)]];

enter image description here

Upvotes: 3

Related Questions