Get Updates By E-mail 

user interface

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!

 


  •  
  •  
  •  
  •  
  •  

iPhone Vector Art For User Interfaces And More

  •  
  •  
  •  
  •  
  •  

I’ve been asked a few times if I had any iPhone vector art for creating user interfaces, and custom toolbars because of some posts that I made when first starting this website.  There are many vector art collections, and here is what I use, especially if they are trying to design an interface to use with a Javascript based toolkit like Phonegap.  I’m no artist, but this is generally what I point people to who are looking to create an iPhone interface, especially those without macs.

All the artwork listed below.

Some user interface iPhone vector art created for Photoshop:

Iphone interface PSD file
http://320480.com/

Geoff Teehan iPhone GUI PSD
http://www.teehanlax.com/blog/?p=447

iPhone PSD Vector Kit
http://www.smashingmagazine.com/2008/11/26/iphone-psd-vector-kit/

Stencils Are Here:

Numerous design stencils including the iPhone from Yahoo:
http://developer.yahoo.com/ypatterns/about/stencils/

iPhone Stencil Graffletopia
http://graffletopia.com/stencils/413

Toolbar Art:

Glyphish – Toolbar
http://glyphish.com/

This is a great resource for all sorts of clip art, available in all forms.

Open Clip Art Library
http://openclipart.org/

This is a decent freeware editor that supports the SVG format, and runs on Mac, Windows, and Linux.

Inkscape Vector Art Library
http://www.inkscape.org

My recommended app for creating iPhone interfaces and using this iPhone vector art is OmniGraffle, because it’s got such a low learning curve, but of course Photoshop, Adobe Illustrator or Fireworks also work well.

 


  •  
  •  
  •  
  •  
  •