CODEWITHSUNDEEP
iphoneios
MusiGenesis
MusiGenesis

Reputation: 75296

Should the dimensions (height/width) of the retina images (@2X) always be multiples of two?

I've gotten some graphics files for buttons etc. from the designer. Most of the retina files have one or both dimensions odd, like 29 x 30 or 79 x 61, and then the dimensions of the corresponding non-retina files will be 15 x 15 or 39 x 31, for example. The dimensions of the UIImageView s that hold each image exactly match the size of the non-retina files they hold, so on a non-retina phone there is no distortion and everything looks fine.

On a retina phone, these images (icons and such) only look fine when the images happen to be even dimensions (like 30 x 30 or 46 x 80); when there's an odd dimension to the image, it gets distorted slightly.

Should the pixel dimensions of a retina image always be twice the size of the non-retina dimensions, and of the dimensions of the frame that displays it?

Upvotes: 3

Views: 2959

Answers (3)

JiaYow
JiaYow

Reputation: 5227

As the name (@2X) implies, it is indeed assumed that the retina-version is exactly twice the size of the non-retina version. Otherwise, as you have seen, there might be distortions.

On a side note, this has only indirectly to do with the displaying frame, e.g. think of scrollviews.

Ask your designer to always design the UI (not necessarily the components themselves) for the non-retina version first, and then just double up the sizes for the retina version. This way, you won't run into distortion-problems. If he designs for retina-first and then scales all components back to half their sizes, he will likely end up with odd dimensions.

Oh, and give your designer this link:

http://www.smashingmagazine.com/2010/11/17/designing-for-iphone-4-retina-display-techniques-and-workflow/

Upvotes: 3

jackslash
jackslash

Reputation: 8570

It would appear so.

When you create a view which is 30 points by 30 points on a regular display the backing store (the data that gets drawn on the screen) will be created 30 pixels by 30 pixels.

On a retina display that backing store is simply multiplied by a scale factor. Currently that scale factor is 2 for iPhone 4 and iPhone 4s. This means that the backing stores on retina displays will always be a multiple of 2.

Your 30 point by 30 point view would have a 60 pixel by 60 pixel backing store. If your images aren't drawn properly for retina displays it would seem that the @2x image needs to be the full size of the backing store, and hence exactly double the size of the view in points.

Upvotes: 1

fscheidl
fscheidl

Reputation: 2301

Yes, image files that have @2x appended should be exactly double the size of the 'non'-retina image. Thus should only have even dimensions.

Upvotes: 1

Related Questions