0

I am a bit confused on managing the different sized images with retina and non-retina displays.

  1. I add a custom button in Storyboard and add some text and then add the backgroundimage, which is a vector done in Illustrator (Width: 630 / Height:130):

    UIImage *img = [UIImage imageNamed:@"iPad1_orange_button.png"];
    [myButton setBackgroundImage:img forState:UIControlStateNormal];
    

the button shows up:

enter image description here

...the button comes out very small.

I have another image with the @2x for retina but that comes out the same size.

My question is how to manage the sizes of the buttons in regards to image size. DO i need to set the size of the button manually?

Also, when i create a button in Illustrator with the same pixel size as the button i use in XCODE and export it as .png, add it to XCODE and drag it into Storyboard it comes out very large.

2
  • What is the width and height of the @2x image?
    – Benjamin
    Aug 31, 2012 at 22:04
  • What is the frame of your button? Set it to the same size as the image.
    – James P
    Aug 31, 2012 at 23:28

3 Answers 3

1

Just a quick clarification:

The storyboard dimensions are NOT in pixels.

An iPhone 4S has 640x960(x,y) @ 326ppi. xCode dimensions are 320by460(x,y). Just take the numbers and convert em to get the appropriate pixel sizes.

IE: If you want a button that that is 100 wide and 100 tall in storyboard you'd to create an image 100*(640/320) px wide and 100*(960/460) px tall (I believe my math is right...).

Depending on what you're building for you'd need different images to cater to the different devices.

On another note, the term retina display doesn't designate a clear-cut standard of px by px. If I recall correctly it's a term Apple coined that basically means that a screen has enough px that the human eye (hence retina) would not be able to see the jaggies.

Similar to Intel's coining of the term Ultrabook; no REAL spec floor/ceiling just a marketing ploy.

1
  • HA! I like the line about the Ultrabooks! Sep 1, 2012 at 1:19
0

Think of dimensions and what you would consider a pixel to be a "density independent pixel". You are always working in the original size when it comes to position and size but it is up to the operating system to handle the different resolutions for you. For now we have the original size and Retina which is X2 the density but this could change. You never need to manually change the resolution for the given device.

0

This is simple:

  • make the button frame the size of the normal res image
  • when you load the image with UIImage imageNamed: do it like this

UIImage *img = [UIImage imageNamed:@"iPad1_orange_button"];

*Note I removed the file extension (.png) - this instructs UIImage to select the resolution appropriate version, the regular or the @2x. iOS will show the 2x version of the image in the same frame size as the normal res image. Pretty simple.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.