3

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 standard UIButton look and act like the standard keyboard buttons.

Specifically, I need to figure out the following for the iPad and would like to do as much as possible in an xib or storyboard.

  • The size of the buttons
  • The color of the keyboard background (or even better, how can I determine this myself?)
  • The background color of the button
  • The font and color of the text in the button
  • How do I add the shadow under the button?
  • How do I have the button highlight with the grey color instead of blue?
  • The spacing between the buttons
  • How do I keep the "group" of buttons centered as a whole when changing the orientation? (all of the resizing options anchor it to a side and not to each other)

Do the standard buttons use images, or do they modify standard UIButton's? Or more appropriately, which is better for us to do?

UPDATE:
I have created a project for the number pad which is a complete working example. However, I have not spent much time on the actual appearance, which is what this question was mainly about. I have posted it on Github and made it an open source project (covered by the MIT licence, so commercial use is allowed as well). Hopefully other people will find it useful, and hopefully others will feel inclined to help make it better and look more like the native keyboard. The Github repository is at:

https://github.com/lnafziger/Numberpad

lnafziger
  • 25,760
  • 8
  • 60
  • 101
  • For various reasons, the LGPL is (probably) not compatible with App Store applications. There's a discussion here which I think covers everything: http://stackoverflow.com/questions/459833/which-open-source-licenses-are-compatible-with-the-iphone-and-app-store – Steven Fisher Nov 29 '12 at 03:41
  • @StevenFisher: Thanks for the heads up, I'll take a look at that and change the license if needed. I want this to be available to the community! :) – lnafziger Nov 29 '12 at 04:04

1 Answers1

6

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.

Domness
  • 7,585
  • 8
  • 40
  • 50
  • Thanks, maybe I wasn't clear about my problem with the spacing & rotation: Since this is a keypad, I have a group of buttons evenly spaced 4 rows high and 4 rows wide with equal spacing between all buttons. When I rotate, I want the group to stay exactly the same (size, spacing, etc) and only recenter left to right so that the group as a whole remains centered on the screen. Unfortunately if I use any of the available autosizing options the group will shift to one side or the other and not remain centered. Any suggestions on how to fix this? – lnafziger Apr 23 '12 at 03:10
  • Put them in a UIView and remove all autosizing options? – Domness Apr 23 '12 at 12:50
  • But then it won't recenter on rotation.... Although, maybe I can put them all in another view, have it auto resize and not resize sub views... I'll give that a try. – lnafziger Apr 23 '12 at 16:51
  • Okay, I had to put it in a second view and set the mode of that view to center and turn all of the autosizing options off. Thanks for the help. – lnafziger Apr 23 '12 at 17:47
  • Yeh, that's what I meant by putting them in a UIView. Well hopefully it's alright now then. And.. if you don't mind selecting my answer (if it fixed it). – Domness Apr 24 '12 at 12:13
  • Obviously there was a lot to this answer and it's a great starting point but there is still some left to verify/fix. (For instance, the Shadow section of your answer is not what I was looking for since I was asking about the button shadow and not the text shadow.) I'll go ahead and accept it though and post my own answer as I figure out the exact values for the rest so that it can help others in the future. – lnafziger Apr 24 '12 at 14:44
  • Yeh, please do post your answers when you find them, I'll be interested to see how you get it all working. – Domness Apr 24 '12 at 19:35