Ios image size guide for different iphones

Question

I am just confused about the image sizes that I need to use for buttons, image views etc. I want to adjust images for all iphones. What should be ratio between the screen height/width and different iphones.

Like i have a button. I have created in following way-

 UIButton *takePicButton = [UIButton buttonWithType:UIButtonTypeCustom];
takePicButton.frame = CGRectMake(0, SCREEN_HEIGHT-UI_ITEM_HEIGHT, SCREEN_WIDTH, UI_ITEM_HEIGHT);
[takePicButton setBackgroundImage:[UIImage imageNamed:@"take_photo.png"] forState:UIControlStateNormal];
[self.view addSubview:takePicButton];
[takePicButton addTarget:self action:@selector(takePicture:) forControlEvents:UIControlEventTouchUpInside];

for this button what size of images I need to add on xcode to support iPhone 4 - iPhone 7.

Thanks in advance.

Answer 1

Here is description about how image can set in iPhone:

•   1x images are for the original iPhone through the 3GS - 'standard' resolution devices (3.5" screens)


•   2x images are for the iPhone 4 and 4S (3.5" Retina screens) and are also used for the iPhone 5, 5s,6,6s,7

•   3x images are for the new iPhone 6+,7+ (5.5" super-Retina [3x] screen)


You have to keep three different types of image into your Assets.xcassets and just provide image name at where you want to display it. It will automatically take relevant image and display it.

You can check attached screenshots. You just have to write “bgImag” and it will take relevant image from assist. About image ration, just create image for highest resolution of iPhone (i.e iPhone 6+), and just use iConify to get rest of image assest.

Answer 2

Try this, u can ask for two sizes. One is SCREEN_WIDTH * 2, UI_ITEM_HEIGHT * 2, the other is SCREEN_WIDTH * 3, UI_ITEM_HEIGHT * 3.Then put two sizes pics in your Images.xcassets named xxx@2x, xxx@3x.

Answer 3

I want to adjust images for all iPhones.

The easy way to do that is to use layout constraints. Your code tries to do what the constraints system would, given an appropriate set of constraints, but it's less flexible because it doesn't provide for changing geometry such as when the user rotates the device.

What should be ratio between the screen height/width and different iphones[?]

Different devices have different aspect ratios. There are lots of web sites (like this one) that list the screen sizes. When possible, though, it's best not to make any assumptions about screen size. New devices may be introduced with different aspect ratios, and even a single device may appear to have different screen sizes depending on how the user chooses to use it -- things like rotation and split screen affect the size and shape of the screen real estate that your device gets to use.

for this button what size of images I need to add on xcode to support iPhone 4 - iPhone 7[?]

We can't say without knowing what your UI_ITEM_HEIGHT constant is or what relative proportions you want for your button, but you should be able to calculate that yourself if you know the various screen sizes. You can use the reference I linked above, or this one, or one of the many others out there.

Answer 4

Read guide line for 1x, 2x, 3x

Answer 5

You should simply use:

UIImage *imButton = [UIImage imageNamed:@"image.png"];

[YOURBUTTON setImage:imButton forState:UIControlStateNormal];

Xcode will automatically use the available image with scales ex: @2x or @3x

From my example your images would be:

image.png (20x20 px),
[email protected], (40x40 px)
[email protected], (60x60 px)

respectively.

Quoting from apple:

Image Size and Resolution

iOS uses a coordinate system to place content onscreen. This coordinate system is based on measurements in points, which map to pixels in the display. On a standard-resolution screen, one point (1/72 of an inch) is equal to one pixel. High-resolution screens have a higher pixel density. Because there are more pixels in the same amount of physical space, there are more pixels per point. As a result, high-resolution displays require images with more pixels.

Refer here

Answer 6

Guys You can try below code:

 if (IS_IPHONE4) {
        imgHeight.constant = 150;
    }
    else if (IS_IPAD) {
        imgHeight.constant = 300;
    }
    else if (IS_IPHONE5) {
        imgHeight.constant = 170;
    }
    else {
        imgHeight.constant = 200;
    } 

Thanks.