Xcode : How To Adjust Components Height and Weight in Pixel?

Question

today is my first day on using Xcode and I've successfully created my first single-view application.

I have no background on Objective-C before, but I did lot of HTML + CSS in the past. So, when I design my first view, I created first on PSD then I cut it piece by piece for text field background, button image, etc.

but what I found today is quite interesting...

I have a PNG image 483 x 82 pixel, but when I'm using it as text field background, I see on Size Inspector window it has 240 x 40. I don't know how Xcode measure this, but I believe it's not in pixel. And surprisingly, it's the exact same size as I see on PSD file.

my question is, how to have same width and height for any Xcode components in pixel?

thank you...

PS : here's the screenshot of my button and its size :

and here's what I have on my Xcode, see that on right side inspector tab, I must have 240 and 40 for width and height, instead of 483 and 82 pixel :

if I put the real pixel (483x82) on that inspector tab, the button will be very big on iPad screen.

Answer 1

First, some general background regarding non-retina and retina images in iOS:

• iPhone 3GS and older, iPad 1, iPad 2, and iPad mini (to name a few) use non-retina images. That is, the image you provide will be displayed at the same width and height in pixels.

• iPhone 4+ and "the new iPad" (iPad 3) use retina images. That is, the image you provide should be twice the width and height in pixels as you'd liked displayed on screen.

This leads to the concept of points in iOS apps:

1 point = 1 pixel on non-retina devices or 2 pixels on retina devices.

Whenever you're setting sizes in Interface Builder (IB), you're actually setting point sizes, not pixels.

Further, you should always provide two images for the non-retina and retina versions. You denote the retina version by naming it the same as the non-retina version and then appending @2x.

E.g.

my_awesome_image.png    // non-retina image
[email protected]  // retina image

By doing this, the operating system will automatically select the correct image for you on retina devices.

Now that we're clear(er) on this concept, here's what you're actually doing in IB:

You've set the width and height of the image view as 240 pt x 40 pt, and by default, image view's contentMode property is set to UIViewContentModeScaleToFill (hence, it's happy resizing your specified image to fill the size you've told it... so the image will display as 480px by 80px on retina devices- but keep in mind, this appears "as the same size" due to said 2x pixel density- and 240px by 40px on non-retina devices).

When you're setting up an image view, you typically need to do the following:

1. Include both retina and non-retina images in your project
2. Set the point size of the image view to whatever you want it to be
3. Set the contentMode of the image view to whatever you want it to be (you may or may not want to leave as the default)