Monthly Archives: July 2011

UITableView example: cliqcliq Colors

Posted on by
Reply

 

Cliqcliq’s Colors is a handy app for creating color palettes.  I like how they’ve customized the table view with simple but effective graphics.

This is the main screen of the app, and seems to be based on a standard UITableView.  Everything under the header bar scrolls, just like you’d expect.

They have simply set the cell backgrounds to simple gradient, and added nice looking icons for a dash of color.  Not a lot of work but it’s nice polish.

I’ll ding them on the garish color choices, and the “user” icon in the top left.  [It takes you to the ubiquitous login page, but I didn't know it was a button till I started to write this article!]

 

 

Here is their settings page.  Oddly enough this page doesn’t scroll, it’s probably just a simple UIView.  It has a nice clean look, with simple gradients.  The text for the switches is legible & easy to understand.  

A minor ding for the highlighting on Login/Signup is a little strange looking, like a group header that wants to be on a UITableView.

 

Getting the most out of UITableView

Posted on by
Reply

You may not know it by name, but UITableView is a view that powers many of the apps you use everyday.  It is a workhorse of iPhone apps, and I’d like to share some apps that have used it well.

Basics

UITableView has two display modes, grouped and plain.  They are so visually dissimilar, that you may be surprised they’re powered by the same class.  A great example of grouped mode is the built-in Settings app:

Notice that each group has a header text (in this case the groups are “General”, “Security”).  Some groups also have explanatory footer text.

The controls on the right-hand side take a little work, but are not difficult to add.  Nice and simple code to do so can be found in this discussion on stackoverflow.com.  You can add switches with UISwitch, buttons with UIButton, sliders with UISlider, and so on.  Some features like the chevron are better handled by changing the accessory style, not by adding your own accessory control.

Here the table view is in ‘plain’ mode, as seen in the AddressBook app.  There are groups here, too (the alphabetical header), as well as a quick-navigation slider on the right.

Getting Fancy

This terrific article covers all the code necessary to go from the “before” on the left, to the “after” on the right.  Really great stuff.