Editor’s Note: You’ve seen the slick supercool
gradient UITableView backgrounds, and this is how to make them quick and
easy. Thanks to Brett Romero of Cygen for this tutorial,
ManiacDev.Com’s first submitted tutorial. If you’ve created a quality,
original tutorial that you think iPhone developers might want to read
about please e-mail webmaster@maniacdev.com.
- Johann Dowa, ManiacDev.Com
This demonstration provides an example of how to spice up your
UITableView rows for a more polished look. In addition to seeing how
easy it can be to design a nice graphic for your iPhone app, you get a
start to finish implementation.
This video was embedded using the YouTuber plugin by Roy Tanck. Adobe Flash Player is required to view the video.
The finished product is shown below.
Rather than sticking with stock components included in Interface
Builder, this demonstration shows a simple technique that gives your app
a more professional look. As a developer, it can be difficult to create
nice looking graphics for your app. Hiring a designer can quickly
exceed the budget. However, creating some nice looking graphics is
certainly achievable as a beginning designer. In addition to picking up
some new great skills, a polished off UI can lend more creditability to
your app and provide an overall better user experience.
In the demo, Photoshop Elements is used, which is 80 bucks at
adobe.com with a mail-in rebate. To get started, create a new image with
these values:
- Width: 80 pixels
- Height: 40 pixels
- Background Contents: Transparent
Select a foreground color from the toolbar, as shown below:
Now select the gradient button, as shown below:
With the gradient selected, swipe from bottom to top on your image.
This should produce a gradient color. Now choose File and “Save for
Web”. You’ve just created the image we’ll use in our tableview. Let’s
switch over to Xcode and implement the image.
In Xcode, we start by creating a navigation based application.
Once the application has been created, add the newly created image by
right clicking the Resources folder then “Add” and “Existing Files”, as
shown below:
The following code snippet creates two views. Both are then added to
the cell’s view. Because the label, which is a view, is added as the
last view, we need to ensure its background is transparent (clearColor).
Otherwise, it will cover part or all (depending on the size we set) of
our background image. Thinking about what this stack of layers will look
like, below is a screenshot of the same scenario in Interface Builder:
From the screenshot, you can see the cell’s view owns the imageview
and label. Although closer to the bottom, the label is actually top most
to the user, hence the reason we need its background to clear.
Let’s take a look at the implementation in Xcode, which is all done in the UITableView delegate method cellForRowAtIndexPath:.
UIImage *image = [UIImage imageNamed:@"gradientcolor.png"];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
imageView.contentMode = UIViewContentModeScaleToFill;
cell.backgroundView = imageView;
[imageView release];
UILabel *label = [[UILabel alloc] init];
label.text = @"testing colors";
label.frame = cell.bounds;
label.backgroundColor = [UIColor clearColor];
label.textAlignment = UITextAlignmentCenter;
[cell addSubview:label];
return cell;
In the above snippet, we create an image object using the image we
added to our app bundle. Next, we create a UIImageView object with the
newly created image. The image view will be assigned to our cell’s
background view. The backgroundView will retain an instance of the
imageView. Therefore, we release our instance, as follows:
[imageView release];
If we had not released our instance, we’d have two instances of the
imageView in memory and thus a memory leak. Moving on down in the code,
we create an instance of a label. We set the label’s size to cover the
entire cell. The label’s background is set to clear or transparent so it
doesn’t hide the cell’s background image. Our assigned text is centered
and finally, we add the label to the cell’s view, making it the top
most view in the cell.