Professional Documents
Culture Documents
09.04.2010, 14:56
Home
About
ProjectsWithLove.com
Search
Search
Sponsors
Archive
! 2010 (16) " 2009 (56) ! December 2009 (5) ! November 2009 (5) ! October 2009 (5) ! September 2009 (6) ! August 2009 (5) ! July 2009 (5) ! June 2009 (4) ! May 2009 (4) " April 2009 (4) Easy custom UITableView drawing What does it mean when you assign [super init] to ... Showing a "Loading..." message over the iPhone ke... 8 Confusing Objective-C Warnings and Errors ! March 2009 (5) ! February 2009 (4) ! January 2009 (4) ! 2008 (47)
Left: a default UITableView with three rows. Right: the same table view after customization.
Categories
AppKit (25) C++ (5) Cocoa Touch (21) Core Data (10) CoreAnimation (5) CoreAudio (3) CoreGraphics (4) Foundation (37) fun hacks (10) graphics (2) numerical methods (2) object-oriented design (15) Objective-C (27) performance tests (5) self promotion (6) Snow Leopard (4) Standard C (14) testing (5) UIKit (18) WebKit (2) Xcode (15)
About the second point: it is okay to customize UITableViewCell but you shouldn't really use it for drawing. The UITableViewCell class is more of a controller class it handles behaviors and layout, not drawing. You can customize UITableViewCell to load a specific contentView (and do the custom drawing there). That last point (that you should always use dequeueReusableCellWithIdentifier: ) is only peripherally related to drawing but it will significantly slow your drawing down if you avoid the normal cell queuing architecture.
http://cocoawithlove.com/2009/04/easy-custom-uitableview-drawing.html
Page 1 of 5
09.04.2010, 14:56
Sponsors
The Mac Developer Network: Podcasts, Videos & Tutorials for Mac, iPhone & iPad Developers.
Syndication Feeds
Subscribe to this blog
Implementation
With all custom drawing handled by UIImageView , that still leaves some work to do. You must handle all layout and configuring of views.
This method handles the configuration of the tableView (setting the backgroundColor , rowHeight and sets an image behind the table) but also creates its own layout for the table header. The layout of the header here is for the table's header view. You can include a custom header for every table section by implementing the UITableViewDelegate method tableView:viewForHeaderInSection: . There are equivalent properties and methods for the table and section footers. It is possible to handle this type of layout in Interface Builder and load the XIB files for this type of layout. Sadly though, on the iPhone, reading loading lots of views from XIB files is slow (I suspect this is due to slow reading from the Flash memory) and doesn't always allow configuration of every property. For this reason, I normally sketch my views in Interface Builder and then manually recreate the same thing in code. That's what I've done here: picking coordinates for the headerLabel that looks balanced in the view.
Cell backgrounds
The cell background needs to incorporate the tops and bottoms of table "sections". For this reason, the backgroundView and selectedBackgroundView normally need to be set on a row-by-row basis. In your tableView:cellForRowAtIndexPath: method where you are configuring the cell for a given row, this code will handle that behavior:
http://cocoawithlove.com/2009/04/easy-custom-uitableview-drawing.html
Page 2 of 5
09.04.2010, 14:56
U IIm ag e *r ow Ba ck gr ou n d; U IIm ag e *s el ec ti on Ba c kg r o u nd ; N SIn te ge r se ct io nR ow s = [ a Ta b l eV i e w n u mb e r Of R o ws I n Se c t io n : [ i n d e x P a t h s e c t i o n ] ] ; N SIn te ge r ro w = [i nd e xP a t h r o w ]; i f ( ro w == 0 & & ro w = = s e c ti o n Ro w s - 1 ) { ro wB ac kg ro un d = [ UI I m a ge i ma g e Na m e d: @ " to p A nd B o tt o m Ro w . p n g " ] ; se le ct io nB ac kg ro u nd = [U I I ma g e i m a ge N a me d : @" t o pA n d Bo t t o m R o w S e l e c t e d . p n g " ] ; } e lse i f (r ow = = 0) { ro wB ac kg ro un d = [ UI I m a ge i ma g e Na m e d: @ " to p R ow . p ng " ] ; se le ct io nB ac kg ro u nd = [U I I ma g e i m a ge N a me d : @" t o pR o w Se l e c t e d . p n g " ] ; } e lse i f (r ow = = se ct i on R o w s - 1) { ro wB ac kg ro un d = [ UI I m a ge i ma g e Na m e d: @ " bo t t om R o w. p n g" ] ; se le ct io nB ac kg ro u nd = [U I I ma g e i m a ge N a me d : @" b o tt o m Ro w S e l e c t e d . p n g " ] ; } e lse { ro wB ac kg ro un d = [ UI I m a ge i ma g e Na m e d: @ " mi d d le R o w. p n g" ] ; se le ct io nB ac kg ro u nd = [U I I ma g e i m a ge N a me d : @" m i dd l e Ro w S e l e c t e d . p n g " ] ; } ( (UI Im ag eV ie w *) ce ll . ba c k g ro u n dV i e w) . i ma g e = r ow B a ck g r ou n d ; ( (UI Im ag eV ie w *) ce ll . se l e c te d B ac k g ro u n dV i e w) . i ma g e = s el e c t i o n B a c k g r o u n d ;
In my mind, it seems like there should be a more efficient way to do this. I hold out the possibility that there is. This code spends most of its time working out where the label should be placed. It needs to go right of the image, left of the accessoryView , middle of the row but above the "Some other information." label.
Other adornments
The accessoryView is just a UIImageView . The cell.image is set as a property. These are extremely simple additions but they make the table cells far more impactful.
Conclusion
You can download the EasyCustomTable project as a zip file (60kb). The code includes a #define at the top that allows you to toggle the custom drawing on and off. None of this is particularly revolutionary (it is all in the iPhone documentation) but it is still easy to miss the properties and methods that make it easy. This does require custom images. If you've never drawn anything, now is a good time to learn inkscape (it's free and very good for the price). You could also use Adobe Illustrator but if you
http://cocoawithlove.com/2009/04/easy-custom-uitableview-drawing.html
Page 3 of 5
09.04.2010, 14:56
Posted by Matt Gallagher Tuesday, April 28, 2009 Filed in categories: Cocoa Touch, UIKit
Andy Interesting article. I agree that the best way to customise appearance on iPhone is to use prerendered images. FWIW I layout my table cells in Interface Builder, as it's by far the easiest way to get the correct layout. The nib only gets loaded once, so performance is not an issue in my experience. 28 aprilie 2009, 11:48:10 GMT+03:00 Like Reply akosma absolutely brilliant post! and also thanks for linking to nib2objc :) I developed it primarily to create custom UITableViewCells, as a matter of fact. 28 aprilie 2009, 13:42:37 GMT+03:00 Like Reply Bryan I definitely support using IB for laying out table cells. It's a little bit more of an abstraction but it makes changing the layout much easier. Also, I've noticed that custom section headers can really slow down performance and eat up memory if used improperly. For some reason they seem to be recomposed after every pixel move. 28 aprilie 2009, 14:04:35 GMT+03:00 Like Reply Fabian Subclassing UITableViewCell to customize drawing Why should that be bad? In my opinion this is essential in iPhone programming. You definately have to explain that a bit more in detail ;) 28 aprilie 2009, 14:51:57 GMT+03:00 Like Reply Matt Gallagher You should customize one of the 5 subviews I listed instead. UITableViewCell is really just a container for those subviews. If you subclass it directly, you will lose out on special behaviors that UITableViewCell achieves by manipulating its subviews. 28 aprilie 2009, 15:14:39 GMT+03:00 Like Reply Fabian Of course it's just a container. But your subclass can add subviews to the contentview, ... UITableViewCell is made for subclassing it. How'd you manage rearranging subviews without a custom subclass? You can subclass UITableViewCell without adding more main subviews. You can still add them to the contentview or set the image, ... I just don't get the point... 28 aprilie 2009, 15:26:50 GMT+03:00 Like Reply Guest Could not agree more with you in this case. I add views where I draw graphs etc. and looks fine to me. It just gives me the full flexibility 29 aprilie 2009, 23:23:37 GMT+03:00 Like Reply Fagian You definately need to use a spell checker 3 noiembrie 2009, 06:40:00 GMT+02:00 Like Reply Programming Enthusiast *definitely 10 noiembrie 2009, 23:38:25 GMT+02:00 Like Reply Liked by Guest Guest Guest 9 Guests Peter Easy custom NSTableView drawing - with love? Can anyone point me to a similar article dealing with custom NSTableView drawing? Of course i would prefer to read it at Cocoa with Love.. 28 aprilie 2009, 17:39:33 GMT+03:00 Like Reply jsd I subclass UITableViewCell for the very common case of needing to load the cell's image from the web. You absolutely want to do this asynchronously and it's dead easy with a custom UITableViewCell. Also recycling cells from your own cache is crucial in this case, otherwise you will have to load the images over and over again. I can never get the reusable cell mechanism to work properly anyway.
http://cocoawithlove.com/2009/04/easy-custom-uitableview-drawing.html
Page 4 of 5
09.04.2010, 14:56
< Prev
Next >
Social Networking by
Leave a comment
Basic HTML formatting tags (<a>, <b>, <i>, and <pre>) are permitted in comments.
Newer Post
Home
Older Post
All content Matt Gallagher, all rights reserved. Email: matt@projectswithlove.com Code samples may be freely used in any programming project, commercial or otherwise, at your risk. See About for more.
http://cocoawithlove.com/2009/04/easy-custom-uitableview-drawing.html
Page 5 of 5