Question

I’m developing a universal app using XCode 4.2 on Snow Leopard and wanted to display rounded buttons with png files embedded within. The rounded buttons are from UIGlossyButton classes from cocoacontrols.com. The png files are both retina and non-retina varieties. I set the height and width of the UIButtons to 60, 60 on the iPhone and 120, 120 on the iPad. I’m attaching a screenshot from the iPad simulator (non retina version). I’m kind of worried on the icon sizes. It looks so tiny. I wanted the app to run on iPad 2 and also on Mini as both are non-retina displays. Is this the correct approach to display on a real iPad2 device?. Also, does the rounded button look perfect on iPad? I haven’t paid for the developer license yet and I don’t own a iPad.

The following is the code to draw the rounded UIGlossy button (with references to the rounded button classes):

UIGlossyButton *b;
    b = (UIGlossyButton*) [self.view viewWithTag: 78];
    b.tintColor = [UIColor colorWithRed:0.2 green:0.3 blue:0.7 alpha:1.0];
    [b useWhiteLabel: YES];
    b.buttonBorderWidth = 2.0f;
    b.buttonCornerRadius = 200.0f; //iPad. For iPhone, I'm using 40.0f
    [b setGradientType: kUIGlossyButtonGradientTypeLinearSmoothExtreme];
    [b setExtraShadingType:kUIGlossyButtonExtraShadingTypeRounded];
}

The screenshot is shown below,

Please help.

Answer 1

Are you worried about the small-ness of the buttons, or the small-ness of the greyscale images on top of them?
If you’re worried about the size of the buttons, then changing the buttons’ frames will make them bigger.

If you’re worried about the button images though, do note that a “Retina Display” will not change the size of your images as perceived by the naked eye, it only improves the resolution of the images if an appropriate @2x image is available. Therefore the “size” of the icon image will be the same on both a retina and non-retina display.
That is, if you open the same App on an iPad 1 and an iPad 3, everything will be the same size, but the images on the screen of the iPad 3 will appear smoother due to the increased resolution.

(This is because when you set the size of a UIButton you set it in points, not pixels. Points are designed to be resolution-independent – see the Points Versus Pixels section here.)

Of course, with the iPad Mini, everything will appear slightly smaller anyway – but still in proportion.

Therefore if the icons on the buttons are looking too small, you’ll need to use larger overlay images. If you do, the icons will look larger on all displays, retina and non-retina alike.

As for round buttons looking ‘perfect’, I don’t see anything wrong with the gloss on the buttons as you’ve shown them above, but I would say the icons on them are much too small (and difficult to see grey-on-blue). Therefore, I would use larger icon images. – But that is my personal opinion.

---

Reponse to comment:

@2x images are only used on retina screens (iPad 3+, iPhone 4+). You shouldn’t ever load @2x images directly, the device takes care of that. If the icons only appear small on the iPad, try making copies of the images (both normal and @2x), and scale them up manually (say 1.5x) in Photoshop/Preview/etc. Then, modify your code so that the iPhone loads the images as normal, but the iPad loads these slightly-larger images. So your App bundle could include:

• buttonImage_Tag_iPhone.png — Say 64×64
• [e-mail] — Therefore, 128×128
• larger_button_image_tag_iPad.png — Say 96×96
• [e-mail] — Therefore, 192×192

Then you can use the following code to load the appropriate image:

if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) {
    // Use larger_button_image_tag_iPad.png
}
else {
    // Use buttonImage_Tag_iPhone.png
}

Of course you can name the images whatever you like, I’ve just made them different for the example.