Vertical Text Alignment for UILabel?

Question

Level 1

29 points

Vertical Text Alignment for UILabel?

For UILabel on the iPhone, there is a property for horizontal text alignment which is textAlignment. But when I have a label that can hold 2 lines (numberOfLines = 2), when the text in the label is only one line, that line centers itself in the entire frame (that can hold two lines), when there are two lines, they both fit fine.

What I'd like to happen is if there is one line in a label that holds two, for the line NOT to be in the middle of the frame but to be pushed to the top of the frame as if there were a second line. In other languages (HTML that I can think of offhand) there is such thing as a verticalTextAlignment with options like top, center, bottom.

So, what am I missing here to make just one line of a UILabel to go to the top of its frame and not center itself in the middle of the frame?

Thanks for any direction.

MacBook Pro, Mac OS X (10.4.10)

Posted on Oct 20, 2008 12:55 PM

Reply

Answer 1

Dec 10, 2009 3:12 AM in response to HarrisIphone

How can i use the class?
Sample please

Into the .m
#import "VerticallyAlignedLabel.h"

//Name of my uilabel is currField
CGRect newFrame = currField.frame;
VerticallyAlignedLabel *verticalUILabel = [[VerticallyAlignedLabel alloc] init];
[verticalUILabel drawTextInRect:newFrame];
[verticalUILabel setVerticalAlignment:VerticalAlignmentTop];

// This don't work
Please help me.

Reply

Answer 2

Dec 24, 2009 5:58 AM in response to DonnieM51

Thank you ivan and brucepdx for this classes! It do a great job for me 🙂

For paolo.andrea just use this classe as a UILabel Classe. Something like that (not tested):
VerticallyAlignedLabel *verticalUILabel = [VerticallyAlignedLabel alloc] init;
verticalUILabel.text = @"my text";
[self.view addSubview: verticalUILabel];
[verticalUILabel release];

Reply

Answer 3

Dec 24, 2009 4:06 PM in response to DonnieM51

Hi,

how do I get the horizontal alignment to work for this?

Label2 *myLabel = [[Label2 alloc] initWithFrame:CGRectMake (30,100,200,50);
myLabel.textAlignment=UITextAlignmentRight;

the set textAligment doesn't work, how do I make it use the super?

if I use

UILabel *testLabel=[[UILabel alloc]initWithFrame:CGRectMake(30,100,200,50)];
testLabel.textAlignment=UITextAlignmentRight;

it works fine.

Thanks for all your food,

-

Reply

Answer 4

Apr 2, 2010 1:57 PM in response to DonnieM51

If you call the sizeToFit task, the label will shrink to the required size leaving no headroom. This option may not have been available when this thread started, but it's working well for me.

http://developer.apple.com/iPhone/library/documentation/UIKit/Reference/UIViewClass/UIView/UIView.html#//appleref/occ/instm/UIView/sizeToFit

Reply

Answer 5

Apr 3, 2010 4:18 AM in response to Jonathan Milenko

SypherF430, BTW you don't need to create Label's subclass like "Label2", the Obj-C's category is the feature just for similar tasks. It's allowed to write directly in your class implementation file:

@interface UILabel (PrivateMethods)
-(void) alignTextTop;
-(void) alignTextBottom;
@end

...

@implementation UILabel (PrivateMethods)

-(void) alignTextTop
{
CGSize textSize = [self.text sizeWithFont:self.font constrainedToSize:self.bounds.size];

CGRect newRect = self.frame;
newRect.size.height = textSize.height;
self.frame = newRect;
}

-(void) alignTextBottom
{
CGSize textSize = [self.text sizeWithFont:self.font constrainedToSize:self.bounds.size];

CGRect newRect = self.frame;
newRect.origin.y += (newRect.size.height - textSize.height);
newRect.size.height = textSize.height;
self.frame = newRect;
}

@end

Reply

Answer 6

Apr 30, 2010 2:40 AM in response to brucepdx

Hello,

I quite new to obj-c and would greatly appreciate if someone would explain me how to use this custom class of UILabel

Reply

Answer 7

Aug 24, 2010 4:30 PM in response to HarrisIphone

Works great. Thank you.

I wish this was a built-in property of labels.

Reply

Answer 8

Sep 1, 2010 2:57 PM in response to DonnieM51

Thx Ivan for sharing, works great!

Reply

Answer 9

Rajesh.T

Level 1

0 points

Oct 28, 2010 12:02 AM in response to brucepdx

brucepdx, Thanks for your class.

I need this vertical Alignment in my Custom Cell designed through IB. My questoin is how can I connect this new modified UILabel ("UILabel_VA" that's what I named the class) through IB.

Reply

Answer 10

nop73

Level 1

4 points

Feb 9, 2011 1:20 AM in response to brucepdx

Awesome brucepdx and Ivan. I'm using bruce's version and it works like a charm.

Reply

Answer 11

Piero87

Level 1

8 points

Apr 9, 2011 3:29 AM in response to DonnieM51

I don't understand how use the ivan classes, please help me, i have do this:

i write the file classes Label2.h Label2.m in the project, then i create a IBOutlet UILabel myLabel in my .h file and i connect it with interface builder, now what i have to do in the .m file to use the ivan class?...please please help!

Reply

Answer 12

Jun 14, 2011 11:29 AM in response to DonnieM51

This topic was awesome. Starting to feel like the iPhone developer community is building. TY ivan and brucepdx.

Reply

Answer 13

Jun 17, 2011 3:57 AM in response to Clive Paterson

Hi Clive, did you able to use this class successfully? I am trying to use it but it doesn't make any difference. I tried following two way but no difference. The text still appears horizontally!

1.

VerticallyAlignedLabel *verticalUILabel = [[VerticallyAlignedLabelalloc] initWithFrame:CGRectMake(0, 370, 50, 100)];

verticalUILabel.text = @"10:15";

[self.view addSubview: verticalUILabel];

[verticalUILabel release];

2. Created label in .H file

IBOutletVerticallyAlignedLabel *myLable; => Changed custom class for this label to VerticallyAlignedLabel

On ViedDidLoad => myLable.text = @"10:15"

Still horizontally 😟

Am I missing something? FYI, I want my text appear in iPhone's left bottom corner like the image attached.

Reply

Answer 14

Jun 17, 2011 7:19 AM in response to AppleChap

For me following works absolutely fine to set verticle alignment and also you can simply change the angle to handle orientation change events.

    CGAffineTransform transform=CGAffineTransformMakeRotation(-300);    mylabel.transform=transform;

Reply

Answer 15

Jul 29, 2012 8:28 PM in response to DonnieM51

Amazing that 4 years later, there still is no vertical alignment in UILabels. Thanks much.

Reply