iOS design tips and tricks

I have been doing some iOS development again lately, and I am writing some posts about what I have learned. The previous post covered some general tips, this one is going to be about design/interface tips for some common iOS classes.

This article is for people who played around in XCode and objectiveC already, and are familiar with the basic iOS UIView and related classes.

Thanks!

The project these tips are applied to are my language classes for iPhone and iPad, such as Spanish Class, French Class and German Class. If you want to thank me for this article, please download a free version, and send me your feedback or give it a 4 or 5 star rating if you like the app.

Tip 1 – UIView: drawing an image as a background

Although you can not set an image as the background of a UIView in an interface builder xib file, it is easy to load the image as a color and assign it as the backgroundcolor to a view:

We are changing the x values of the origin of the frames of the two views within the button, making the image start at x coordinate 10 within the UIButton, and putting the label next to it, with only 5 pixels in between.

The key thing to realize here is that every view – UIView and subclasses like UITableView, UIButton,… – are positioned on the screen the same way: they have a frame, with an origin with an x and an y coordinate and a size with a width and a length. Changing their values is easy, and not considered bad practice.
Unlike as for Android, where you want to use relative layouts to accomodate for the wide range of possible screen sizes and shapes, playing with these values is common practice on iOS, since you know everything about the screensize. There are only 4 possible resolutions anyway: landscape and portrait, both for iPhone and iPad.

Note: One more thing about UIButtons that beats me is why Apple didnt provide an easy way to change the coloring of the basic white button. You need to use either the white button, use an image(which means firing up Adobe Illustrator) or some complicated way of putting a view on top of the image and masking it. Apple, please add plain recoloring of buttons!

Tip 3 – UITableView: clearing the background of a table

In the exercises screens, I wanted to present the questions on a schoolboard interface, as if the questions and possible answers were written on the schoolboard. The list of possible answers is wrapped in a UITableView, so it is easy to change the number of answers(they used to be presented as a UIPicker, but that just looked awful, and there is no way to achieve the below effect with a picker anyway).

To do this, I had to manually clear the background of the tableview, which I implemented as an Objective-C category:

The first two lines can be set in a xib file, by unchecking “opaque” and by setting the color of the UITableView to “clearColor”. The last line cannot be done in a xib file though and is necessary as well. Not only the backgroundColor needs to be set to transparant, the backgroundView of the UITableView needs to be set to nil as well.

Tip 4 – UITableview: showing cells with dynamic height

When doing iOS development, you will want to tamper with the height of cells sooner or later. The UITableViewCells do not adjust their height automatically, and when the cell spans a few sentences, you cannot set the height in advance, because you just dont know it.

Tip 7 – UIAlertView: recoloring the alert

To recolor the basic blue UIAlertView, you need to subclass it and override layoutSubViews. Again, I do not get why Apple did not build this feature into XCode, since it seems to me something a lot of developers want to do.