iPhone: Mimic Cocoa UIKit in Webkit

   Posted November 20, 2008 by David Kirk in Apple iPhone

Using webkit in iPhone / iPod touch application development is a common practice. However, jumping from cocoa to webkit and back can be confusing to the user. Here are a couple of simple hints for theming webkit to look like Cocoa’s UIKit framework.

Specifically, what I am emulating here is a UITableView.

So here’s an example from one of our upcoming applications. We are using webkit here to give us additional flexibility. However, we wanted to maintain the Cocoa UIKit feel:

iphone webkit example

Background:

The iphone application gray/white striped background is ubiquitous. Feel free to steal it from here:
iphone background image

To repeat this background in webkit, use something like this:

body {background-image: url('iphone_back.png');background-repeat: repeat; -webkit-user-select: none; -webkit-text-size-adjust: none; margin: 0;}

Embossed Header Text:

The iphone frequently uses embossed header text on this gray stripped background. Using safari’s text-shadow, this is pretty easily replicated. I called this the header class. Wrap your text in a class with the following css:

.header {font-weight: bold; font-size: large; color: #4c566c; text-shadow: 0px 1.5px 0px white;}

Rounded Boxes

Of course, rounded boxes are everywhere in the iPhone GUI. Here I have called my divs curve. Safari’s -webkit-border-radius is a great tool for this. Here is an example of css that will provide this effect.

#curve {-webkit-border-radius: .5em;border: 1px solid gray;margin:5px; padding:5px 0px 5px 0px; background-color: #fff}

If there is interest, I’ll post more examples later. Please feel free to share your own in the comments below.

 

About David Kirk

David Kirk is one of the original founders of tech-recipes and is currently serving as editor-in-chief. Not only has he been crafting tutorials for over ten years, but in his other life he also enjoys taking care of critically ill patients as an ICU physician.
View more articles by David Kirk

The Conversation

Follow the reactions below and share your own thoughts.