iPhone - Should I create 2 diffrent sizes images for Retina & Not retina display dedive?

Question

This my first time develop app's.

According the Apple iOS Human interface guidelines, it says that UIBarButtonItem image sizes are Approximately 20 x 20 & Approximately 40 x 40.

I know that 20x20 is for previous version device of iPhone4, and 40 x 40 is for iPhone4's Retina display.

Now I created an UIBarbuttonItem, my image size is 40x40, Setting image scale to 2.

It's runs perfectly on iPhone Simulator & iPhone4 Simulator, both simulator's image looks clear and beautiful.

I want to ask if is right? Do I need to create an 20x20 image for iPhone3&3GS? Or Just one size of image, 40x40, and set scale to "2.0"?

Thanks!

Answer 1

You should create two images:

1. 20x20 with name, for example, image.png
2. 40x40 with name image@2x.png

In your code you should set that image using method [UIImage imageNamed:@"image"];. That method will automatically choose appropriate image:

1. for non-retina displays it will be image.png
2. for retina displays it will be image@2x.png

Be patient, you don't need to scale any image by yourself.

Also you can run simulator for retina displays. Just open iOS Simulator and navigate to Hardware -> Device -> iPhone (retina).