Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Determine UILabel height for centering when using adjustFontSizeToFitWidth

I have the following cell design where the numeric label shrinks and the "Overall" label is directly underneath.

enter image description here

I have properly set the adjustFontSizeToFitWidth and minimumFontSize properties. The font is resizing correctly. However, anchoring the numeric label to the bottom is challenging. Particularly when the font shrinks the gap between the two labels widens and does not appear vertically centered.

I have tried sizeToFit, sizeThatFits, and using the font's pointSize. All unsuccessfully.

I am aware of sizeWithFont:minFontSize:actualFontSize:forWidth:lineBreakMode:, but don't understand why I would need it in combination with adjustFontSizeToFitWidth.

like image 880
Jason McCreary Avatar asked Feb 14 '13 15:02

Jason McCreary


1 Answers

Ah, so you want to position the UILabels in the middle of the container view (both horizontally and vertically)?

I have rephrased my answer so it will make more sense to future readers.

My code is assuming that you have the 3 IBOutlets set up:

UIView *containerView; //Your nice view containing the two textfields.
UILabel *points; //The label containing the number.
UILabel *overall; //The textfield containing the text 'overall'.

You could simply set the frame of the labels after assigning the text and calling the sizeToFit.

  1. This first line positions the UILabel points, the only change being that the y coordinate is half of containerView subtract half of the height of itself.

    points.frame = CGRectMake(points.frame.origin.x, (containerView.frame.size.height / 2) - (points.frame.size.height / 2), points.frame.size.width, points.frame.size.height);
    
  2. To position the overall accordingly - say there is a distance of say 6 between the number and overall labels:

    int space = 6;
    
    overall.frame = CGRectMake(overall.frame.origin.x, points.frame.origin.y + points.frame.size.height + space, overall.frame.size.width, overall.frame.size.height);
    
  3. Having read your comments, I think you are after this solution. If you want both UILabels to appear in the middle; subtract (overall.frame.size.height / 2) + (space / 2) from the y value of points like so (with the code of number 2 beneath it):

    int space = 6;
    points.frame = CGRectMake(points.frame.origin.x, ((containerView.frame.size.height / 2) - (points.frame.size.height / 2)) - ((overall.frame.size.height / 2) + (space / 2)), points.frame.size.width, points.frame.size.height);
    overall.frame = CGRectMake(overall.frame.origin.x, points.frame.origin.y + points.frame.size.height + space, overall.frame.size.width, overall.frame.size.height);
    

The final point will produce an output like this image. As you can see the blue line is half of the whole image, and intersects the black rectangle (which is snuggly around the two labels) at its middle point. I hope this is what you were after.

image depicting effect

like image 179
Patrick Avatar answered Sep 30 '22 16:09

Patrick