Aspect Ratio of Background Image for iPhone X - ios

I have an app which has image asset with 3 size images #1, #2, #3 as a background image.
I implement launch screen into my project to make app seen as fullscreen on iPhone X. As you know, launch screen asset has size for iPhone X so launch screen looks okay.
However, my background image doesn't look good because #3s' aspect ratio is for plus devices not iPhone X.
Where should I add a proper size image?
EDIT: My question is not about launch screen Image. It is about an background image that I use on regular ViewController

Rather than use an image as your launch screen, you should try using a launch storyboard.
This could contain a single view controller that contains a UIImageView, with contentMode = .aspectFill. This will clip some of the image on either side, but this might be acceptable to you.

It is not a best approach but I solve it by creating another image asset and put iPhone X background image to its #3 area. Then In code I check If It is iPhone X screen, If yes I use image asset with x background, If other use default image asset.
- (void) setBackgroundImage{
// Load launch image
NSString *launchImageName;
if ([UIScreen mainScreen].bounds.size.height == 812){
launchImageName = #"PublicBackground_X"; // iPhone X
}
else {
launchImageName = #"PublicBackground"; // Other iPhones
}
UIImage *image = [UIImage imageNamed:launchImageName];
[self.backgroundImage setImage: image];
}
EDIT:
I don't know why I get bad reputation. None of other solutions worked for me. Clipping an Image shouldn't be acceptable If u have right resolution

Related

Ios image size guide for different iphones

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.
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.
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.
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.
Read guide line for 1x, 2x, 3x
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),
image#2x.png, (40x40 px)
image#3x.png, (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
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.

What size has a background image to have?

I'm developing a game in Swift (but not sprite kit), and i'm having a lot of trouble to make a background image that look great in every device. I recently understand the concept of the #1x, #2x and #3x images and it's pixels, but i can't find any place that say what size (width and height) an background image must have to look good both in canvas mode, preview mode and in action.
Anyone can help me?
For help, i'm attaching two print screens of a test that i made.
Thanks for the help :)
Image on Xcode 7 canvas
image in preview mode. Notice how he cut the edges
Size Icon For Devices:
UIImageView *imageView = [UIImageView alloc]init];
imageView.frame = CGRectMake(0,0,widthInt,heightInt);
imageView.image = [UIImage ImageWithName:#"nameImage.png"];

Running iPhone app on iPad mini iOS 8 results in wrong icon size in UIActivityViewController

I have an iPhone app (does not support Universal) running on iPad mini iOS 8. But I find the icon size in UIActivityViewController is incorrect. How to solve this?
The issue can be reproduced simply initializing a default UIActivityViewController.
UIActivityViewController *avc = [[UIActivityViewController alloc] initWithActivityItems:#[#"hello"] applicationActivities:nil];
[self presentViewController:avc animated:YES completion:nil];
The incorrect behavior is as below:
https://drive.google.com/file/d/0B2C5utygT1vHSnlGUzRVdU5YSTA/view?usp=sharing
There are 3 things to note here:
image background,
image opaqueness,
image size.
iOS 7
Image background:
Image background should be transparent.
image opaqueness
The "visible part" of the icon should be non transparent aka opaque. Note that any color information won't be preserved:
image size
Because the image won't be scaled by the system if too small/big, you have to provide appropriately sized image. I found image size 120px x 120px to fit perfectly.
Note: this size also takes icon padding into account.
iOS 8
Image background:
Image background should be white to match the system UIAction icons but you can also use an arbitrary color.
image opaqueness
Same as in iOS 7, "visible" part of the icon should be non transparent aka opaque, however in iOS 8 color information will be preserved.
image size
I am using image with size 240px x 240px, but you can apply custom sized image because system will automatically scale-to-fill image if too small/big.
Wrap up
That said, if you want to support both iOS 7 and iOS 8, you have to have 2 versions of custom UIActivity icon image.
For iOS 7 you should use 120px x 120px sized image with transparent background. Note: find the size that best suits your needs.
For iOS 8 you should use custom sized square image with white background and "visible" part of an arbitrary colour.
Code example
#define isAtLeastiOS8 ([[[UIDevice currentDevice] systemVersion] floatValue] >= 8.0)
- (UIImage *)activityImage
{
if (isAtLeastiOS8)
{
return [UIImage imageNamed:#"activity_icon_ios8"];
}
else
{
return [UIImage imageNamed:#"activity_icon"];
}
}
Hope that helps!
Credit goes to #damirstuhec
You might be using the image size that is too big to fit in this area, try using multiple size images with 1x, and 2x and that can fix your problem for example convert the same image into 2 sizes for logo, 30x30 and 60x60 and name them as
30x30 icon goes as -> sampleLogo.png
60x60 icon goes as -> sampleLogo#2x.png
import these in the Images.xcassets under the same name (not two different images) and then try using this.
EDIT :
30x30 and 60x60 are just to give you an idea, also if you Application is compatible with iPhone 6 Plus, then you might also need to use a 3x image that in the given example be 90x90
These images need to have a transparent background and I recommend these sizes:
// iPadShare#2x should be 126 px, iPadShare should be 53 px, iPhoneShare#2x should be 100 px, and iPhoneShare should be 50 px. I found these sizes to work for what I was making.
Hope this will help :)

iOS UIImageView - Top of Image Chopped Off?

I'm new to iOS Development, I'm using a UIImageView to display an image. I've made a 320x480 and a 640x960 image called "red.png" and "red#2x.png".
No matter how I scale or align the UIImageView, the image always chops off half way at the top.
Is there something I'm meant to do to combat this, as I thought those resolutions were correct?
The UIImageView is sized at 320x568 to fill the storyboard.
Thanks :)
My comment above is hard to read, and it's probably an answer:
myImageView.contentMode = UIViewContentModeScaleAspectFit;
Try changing to image name as follows:
self.colourImage.image = [UIImage imageNamed: #"red.png"];
You should not directly specify '#2x' in image names.
It is automatically used if a device supports retina display.
That is why you need to create 2 sets of images; one for non-retina and one for retina (using #2x) and the OS selects the correct one for you.

UIImagePickerController Image returned is bigger than preview on iPhone 4

I'm taking a photo with UIImagePickerController. Everything works fine on iPad and on iPhone 5. The problem comes with an iPhone4: the photo that I get from the picker is "bigger" than what I saw on the screen when I took the photo.
What do I mean with bigger? I mean that at both sides of the photo, and at the bottom, I see parts of the scene that the camera didn't show when I was taking the photo. This is a problem for my app. I need to capture exactly the same scene that the user sees through the camera when he takes the photo. Not a bigger scene. As I said, on iPhone5 and iPad4 everything works fine. I don't understand this different behaviour. How can I solve this?
PD: I'm not applying any transformation to the image on the picker.
-(void)imagePickerController:(UIImagePickerController*)picker didFinishPickingMediaWithInfo:(NSDictionary*)info
{
UIImage* originalImage = [info valueForKey:#"UIImagePickerControllerOriginalImage"];
NSLog(#"Image Size Width %f Height %f",originalImage.size.width,originalImage.size.height);
UIGraphicsBeginImageContext(CGSizeMake(320, 480));
[originalImage drawInRect:CGRectMake(0,0,320,480)];
UIImage* image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
NSLog(#"image Size h %f Width %f",[image size].height, [image size].width);
}
Here you can see that What is original image size and after than you can change size as your wish..
It was a problem with the preview on the iPhone4... the preview on the iPhone4 is 16:9, but the final image is 4:3. On the iPhone5 and the iPad, both the preview and the final image are 4:3.
I didn't realize it before because my overlay was hiding part of the preview on the iPhone4, so I thought the preview was 4:3 too (and I think that the preview with iOS6 is 4:3, I'm not sure, I've got to find an iPhone4 with iOS6).
I made my overlay (a UIToolbar) translucent, and now I get what I want.

Resources