How do I replicate the iOS keyboard appearance?

Question

I have made a custom number pad keypad for my iOS app, but want it to more closely mirror the appearance of the standard keyboard. I am looking for advice on how to make a

Answer 1

If you want to do it mostly in IB, then the following can be done:

• Size
• Colours
• Background Color
• Font
• Text Color
• Shadow (to UILabel's not UITextArea)
• Spacing
• AutoSizing

There is a cool PSD vector kit for all types of iOS elements that should help:

http://www.smashingmagazine.com/2008/11/26/iphone-psd-vector-kit/

Anyway, to the rest of the answers:

Size

Take a screenshot of the buttons and determine the size in Photoshop, or you can use CMD+i on the image file to see the pixel dimensions. Remember to use CMD+Shift+4 and then drag (and then Space to make the screenshot).

Colours

Use the DigitalColor Meter app that's preinstalled on the Mac, it's pretty cool for all kinds of functions.

Background Color for UIButton

The actual UIButton will have a background color of [UIColor clear], however, for the whole keyboard background, it would be best to create something similar in Photoshop and again using color pickers to get the right gradients. Then you could drag this into IB as a background image.

Font

Again, have a look at fonts/try Helvetica

Text Color

[UIColor black]

Shadow:

Programmatically:

[text setShadowOffset:(0,1)]; // One option
[text setShadowOffset:(0,-1); // Another option
[text setShadowColor:[UIColor whiteColor]];

But, you can also set the shadow in the IB inspector for a UILabel.

Button highlight

Look at the UIButton reference http://developer.apple.com/library/ios/#documentation/UIKit/Reference/UIButton_Class/UIButton/UIButton.html

Spacing & Rotation

If your using IB, then you could just drag on the buttons to whatever location.. IB has some autosizing options that determine where the buttons are spaced according to the TOP, LEFT, RIGHT and BOTTOM. You can also set if they are stretchable or not.