Get Updates By E-mail 

alignment

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!

 


  •  
  •  
  •  
  •  
  •