Get Updates By E-mail 

Article Written By:
Johann Dowa

UILabel Subclass – Align The Text How You Want!

  •  
  •  
  •  
  •  
  •  

I received a question in the last few days from an iPhone developer who was having difficulty aligning the text in a UILabel properly.  The problem was that they needed the UILabel to accomodate multiple lines, but also needed to dynamically adjust the text, and the problem was that whenever there is only one line of text the vertical alignment was always centered. 

I found a subclass in an older thread on the apple forums here: http://discussions.apple.com/thread.jspa?threadID=1759957

This what’s in the class:

<font color="darkgreen">// Label2.h</font><br />
<font color="darkgreen">// (c) 2009 Ivan Misuno, www.cuberoom.biz</font><br />
&nbsp;<br />
#<font color="navy"><b>import</b></font> &lt;UIKit/UIKit.h&gt;<br />
&nbsp;<br />
typedef <font color="navy"><b>enum</b></font><br />
<font color="navy">{</font><br />
VerticalAlignmentTop = 0, <font color="darkgreen">// default</font><br />
VerticalAlignmentMiddle,<br />
VerticalAlignmentBottom,<br />
<font color="navy">}</font> VerticalAlignment;<br />
&nbsp;<br />
@<font color="navy"><b>interface</b></font> Label2 : UILabel<br />
<font color="navy">{</font><br />
@<font color="navy"><b>private</b></font><br />
VerticalAlignment _verticalAlignment;<br />
<font color="navy">}</font><br />
&nbsp;<br />
@property (nonatomic) VerticalAlignment verticalAlignment;<br />
&nbsp;<br />
@end<br />
<br />

<font color="darkgreen">// Label2.mm</font><br />
<font color="darkgreen">// (c) 2009 Ivan Misuno, www.cuberoom.biz</font><br />
&nbsp;<br />
#<font color="navy"><b>import</b></font> <font color="red">&quot;Label2.h&quot;</font><br />
&nbsp;<br />
@implementation Label2<br />
&nbsp;<br />
-(id)initWithFrame:(CGRect)frame<br />
<font color="navy">{</font><br />
self = [<font color="navy"><b>super</b></font> initWithFrame:frame];<br />
<font color="navy"><b>if</b></font> (!self) <font color="navy"><b>return</b></font> nil;<br />
&nbsp;<br />
_verticalAlignment = VerticalAlignmentTop;<br />
<br />
<font color="navy"><b>return</b></font> self;<br />
<font color="navy">}</font><br />
&nbsp;<br />
-(<font color="navy"><b>void</b></font>)dealloc<br />
<font color="navy">{</font><br />
[<font color="navy"><b>super</b></font> dealloc];<br />
<font color="navy">}</font><br />
&nbsp;<br />
-(VerticalAlignment) verticalAlignment<br />
<font color="navy">{</font><br />
<font color="navy"><b>return</b></font> _verticalAlignment;<br />
<font color="navy">}</font><br />
-(<font color="navy"><b>void</b></font>) setVerticalAlignment:(VerticalAlignment)value<br />
<font color="navy">{</font><br />
_verticalAlignment = value;<br />
[self setNeedsDisplay];<br />
<font color="navy">}</font><br />
&nbsp;<br />
<font color="darkgreen">// align text block according to vertical alignment settings</font><br />
-(CGRect)textRectForBounds:(CGRect)bounds limitedToNumberOfLines:(NSInteger)numberOfLines<br />
<font color="navy">{</font><br />
CGRect rect = [<font color="navy"><b>super</b></font> textRectForBounds:bounds limitedToNumberOfLines:numberOfLines];<br />
CGRect result;<br />
<font color="navy"><b>switch</b></font> (_verticalAlignment)<br />
<font color="navy">{</font><br />
<font color="navy"><b>case</b></font> VerticalAlignmentTop:<br />
result = CGRectMake(bounds.origin.x, bounds.origin.y, rect.size.width, rect.size.height);<br />
<font color="navy"><b>break</b></font>;<br />
<font color="navy"><b>case</b></font> VerticalAlignmentMiddle:<br />
result = CGRectMake(bounds.origin.x, bounds.origin.y + (bounds.size.height - rect.size.height) / 2, rect.size.width, rect.size.height);<br />
<font color="navy"><b>break</b></font>;<br />
<font color="navy"><b>case</b></font> VerticalAlignmentBottom:<br />
result = CGRectMake(bounds.origin.x, bounds.origin.y + (bounds.size.height - rect.size.height), rect.size.width, rect.size.height);<br />
<font color="navy"><b>break</b></font>;<br />
<font color="navy"><b>default</b></font>:<br />
result = bounds;<br />
<font color="navy"><b>break</b></font>;<br />
<font color="navy">}</font><br />
<font color="navy"><b>return</b></font> result;<br />
<font color="navy">}</font><br />
&nbsp;<br />
-(<font color="navy"><b>void</b></font>)drawTextInRect:(CGRect)rect<br />
<font color="navy">{</font><br />
CGRect r = [self textRectForBounds:rect limitedToNumberOfLines:self.numberOfLines];<br />
[<font color="navy"><b>super</b></font> drawTextInRect:r];<br />
<font color="navy">}</font><br />
<br />
@end<br />

To use this class simply use Label2 wherever you would normally use UILabel, and with the setVerticalAlignment method you can set the alignment to the top, middle, or bottom with the VerticalAlignmentTop, VerticalAlignmentMiddle, or VerticalAlignmentBottom attributes. Very Handy!

 


  •  
  •  
  •  
  •  
  •  

Submit A Resource

Have you created a useful tutorial, library or tool for iOS development that you would like to get in front of our 300,000+ monthly page views from iOS developers?

You can submit the url here.

The resources we feel will appeal to our readers the most will be posted on the front page.

Comments