Cygen Product Blog

In the current version (1.3) of ‘When Did It Happen Facts’, the first view presented is the topic view. From here, it isn’t apparent what needs to be done next. Eventually, the user might discover they can flick up and down to move between topics. But how do you reach the timeline view, which is the first image show in iTunes? To reach the timeline, the user actually has to click the brown parchment paper surrounding the topic. Not very intuitive. Upon clicking the parchment paper, an info icon will display. Clicking it reveals the timeline. These steps are shown below.

Step 1: Topic view with info icon (appears after clicking parchment paper)

Step 2: Timeline view

To improve upon this design, the user needs an immediate cue on what to do next. Having the info icon always visible provides this cue. Not only does it draw the eye to its location initially, but it gets the user onto the timeline, which is intuitive enough that the user can drag to a new date. Even if the user doesn’t flick topics on the first view, the slider on the timeline view will allow them to reach new dates. The enhanced topic view is shown below.

You’ll also notice the info icon is moved to the right so it doesn’t pass through the middle of a new topic’s white space as it moves into view.

Another change is that the timeline view will open as the first view. I can’t tell what date a user may want to start on, which is the scenario when opening the app on the topic view. Starting the app on the timeline view will let the user quickly scroll to any date.

You’ll notice a new background is also present. It’s a leathery texture I’m experimenting with. This is part of an overall effort to enhance the UI of ‘When Did It Happens Facts’ to make it more visually appealing. Watch for the new design in version 1.4.

The following demonstration is a preview from sdkIQ for iPhone 1.3.

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. 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.

I you’ve found the demonstration practical and helpful. Please use the contact link from the home page at cygen.com if you have any questions.

Don’t stop at this tutorial! Find more practical iPhone SDK programming examples in sdkIQ for iPhone, now available in the iTunes App Store.