Bottom Aligning UILabels

Sometimes we feel a need to bottom align UILabels. Especially when two labels have varying font size.
I tried to make a simple UILabel category for that purpose.
Let us see what happens when we add UILabels of different font sizes adjoining each other.
The code for adding two labels before aligning their bottoms will be:

    UILabel* name = [[UILabel alloc]initWithFrame:CGRectMake(20, 20, 150, 30)];
	[name setText:@"Title1Font25"];
	[name setFont:[UIFont systemFontOfSize:25]];
	[name setBackgroundColor:[UIColor clearColor]];
    [name sizeToFit];
	[self.view addSubview:name];

    UILabel* name1 = [[UILabel alloc]initWithFrame:CGRectMake(name.frame.origin.x + name.frame.size.width, 20, 150, 30)];
	[name1 setText:@"Title2Font20"];
	[name1 setFont:[UIFont systemFontOfSize:20]];
	[name1 setBackgroundColor:[UIColor clearColor]];
    [name1 sizeToFit];
	[self.view addSubview:name1];

These labels will look like this:

UILabels-before-bottom-aligning

UILabels before bottom aligning

Adding this extra line after the above code:

[name1 setFrame:CGRectMake(name1.frame.origin.x, [name1 topAfterBottomAligningWithLabel:name], name1.frame.size.width, name1.frame.size.height)];

The labels after bottom aligning will look like:

UILabels after bottom aligning

UILabels after bottom aligning(Guide for reference)

The UILabel category for bottom aligning UILabels can be found at UILabel(BottomAlign)

For a better understanding of UIFont and what are ascenders and descenders there’s a nice description here.

About these ads
By akshay1188

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s