How to specify the size for iPhone 6/7 for an individual image from edge to edge?

Question

Let's say I want the linked image to occupy the entire width of the screen in the iPhone application - for example, a banner. I would create my_banner.png with a width of 320px , [e-mail] with a width of 640px and [e-mail] for iPhone 6 plus with a width of 1242px . But the resolution of the iPhone 6 is 750×1334 pixels. However, it shares the @2x suffix with the iPhone 4 and 5 with a width of 640px .

What is the recommended method or a good way to specify an image file optimized for 750px width for iPhone 6? It seems like this can't be done in the asset catalog ? Should this be done programmatically? Is there any other suffix that can be used for iPhone 6?

(Image extracted from http://www.iphoneresolution.com )

Answer 1

It seems to me that many of these answers want to decide how to limit the View image, where I think you are loading the correct media file? I would come up with my future extensible solution, something like this:

"UIImage + DeviceSpecificMedia.h" - (category on UIImage)

Interface:

 #import <UIKit/UIKit.h> typedef NS_ENUM(NSInteger, thisDeviceClass) { thisDeviceClass_iPhone, thisDeviceClass_iPhoneRetina, thisDeviceClass_iPhone5, thisDeviceClass_iPhone6, thisDeviceClass_iPhone6plus, // we can add new devices when we become aware of them thisDeviceClass_iPad, thisDeviceClass_iPadRetina, thisDeviceClass_unknown }; thisDeviceClass currentDeviceClass(); @interface UIImage (DeviceSpecificMedia) + (instancetype )imageForDeviceWithName:(NSString *)fileName; @end 

Implementation:

 #import "UIImage+DeviceSpecificMedia.h" thisDeviceClass currentDeviceClass() { CGFloat greaterPixelDimension = (CGFloat) fmaxf(((float)[[UIScreen mainScreen]bounds].size.height), ((float)[[UIScreen mainScreen]bounds].size.width)); switch ((NSInteger)greaterPixelDimension) { case 480: return (( [[UIScreen mainScreen]scale] > 1.0) ? thisDeviceClass_iPhoneRetina : thisDeviceClass_iPhone ); break; case 568: return thisDeviceClass_iPhone5; break; case 667: return thisDeviceClass_iPhone6; break; case 736: return thisDeviceClass_iPhone6plus; break; case 1024: return (( [[UIScreen mainScreen]scale] > 1.0) ? thisDeviceClass_iPadRetina : thisDeviceClass_iPad ); break; default: return thisDeviceClass_unknown; break; } } @implementation UIImage (deviceSpecificMedia) + (NSString *)magicSuffixForDevice { switch (currentDeviceClass()) { case thisDeviceClass_iPhone: return @""; break; case thisDeviceClass_iPhoneRetina: return @"@2x"; break; case thisDeviceClass_iPhone5: return @"-568h@2x"; break; case thisDeviceClass_iPhone6: return @"-667h@2x"; //or some other arbitrary string.. break; case thisDeviceClass_iPhone6plus: return @"-736h@3x"; break; case thisDeviceClass_iPad: return @"~ipad"; break; case thisDeviceClass_iPadRetina: return @"~ipad@2x"; break; case thisDeviceClass_unknown: default: return @""; break; } } + (instancetype )imageForDeviceWithName:(NSString *)fileName { UIImage *result = nil; NSString *nameWithSuffix = [fileName stringByAppendingString:[UIImage magicSuffixForDevice]]; result = [UIImage imageNamed:nameWithSuffix]; if (!result) { result = [UIImage imageNamed:fileName]; } return result; } @end 

Answer 2

I use the following trick as some things really work:

• Asset catalog for specific devices
• Specify images for 1x , 2x based on 320x640
• Specify images for 4 2x and 3x based on 320x568 (iPhone 5)
• Create a new set of images for the iPhone 6 (since this is the only device that creates problems with snapping to the edges)
• Provide only 2x images for iPhone 6 in full resolution (750x1334)

Declare a constant

 #define IS_IPHONE_6 [[UIScreen mainScreen]nativeBounds].size.width == 750.0 ? true : false 

and use it as follows:

 UIImage *image = [UIImage imageNamed:@"Default_Image_Name"]; if(IS_IPHONE_^) { image = [UIImage imageNamed:@"Iphone6_Image_Name"]; } 

this may not be the prettiest solution, but it works, at least until the apple provides a better API for snapping to the edges.

Answer 3

Auto Layout is supposed to help in this situation.

Now tell me @Nicklas Berglund, what would you do if the device rotates? Suppose now you are in landscape mode. How would you fill a horizontal space that is no longer in the images?

Just food for thought. An auto market that should take care of your screen, no matter what orientation or device you use for your application.

Perhaps Apple should start targeting devices in the future?

Let's get back to your question .. The solution is to replace your @ 2x images with 750 pixel wide images and then auto-layout. Oh yes, that is the hard part.

If you just add constraints to fit them, it will compress it horizontally when displayed on a 4-inch screen, but you can use multipliers to scale the image accordingly. Here's how you can do it:

 [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[imageFooterView]|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(imageFooterView)]]; [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[imageFooterView]|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(imageFooterView)]]; float aspectRatio = imageFooterView.frame.size.height/imageFooterView.frame.size.width; [imageFooterView addConstraint:[NSLayoutConstraint constraintWithItem:imageFooterView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:imageFooterView attribute:NSLayoutAttributeWidth multiplier:aspectRatio constant:0.0f]]; 

Answer 4

I also could not find a way to do this, since I had a background image that was ideally the size of the Resource Catalog on every device except iPhone 6. My fix (I did this in SpriteKit)?

 if (bgNode.size.width != self.frame.size.width) { bgNode.texture = [SKTexture textureWithImageNamed:@"i6bg.png"]; [bgNode runAction:[SKAction scaleXTo:self.frame.size.width/bgNode.size.width y:self.frame.size.width/bgNode.size.height duration:.1]]; } 

bgNode - a background image that is pulled by the device. If this is an iPhone 6, it will not fit the screen, so the width of the background image will not be the same as the width of the screen. When the device is recognized as iPhone 6, I change the texture to the R4 texture (@ 2x for the retina) and scale it to the correct size.

I tried to do the same with the regular @ 2x image, but the scaled image looked very bad (it was too stretched and noticeable). When scaling the R4 texture, the width / height proportions are slightly better, and therefore the change is not even noticeable. Hope this gives you some insight into what you can do before Apple adds the iPhone 6 Asset.

Answer 5

Hope this solves all your problems with a custom edge image. Xcode 6 - xcassets for universal image support

Make sure that if you use automatic layout, then check that the PIN code is set to zero for all edges, and that the restrictions for the field are not checked.

You can also visit these links for launcher screen images:
http://www.paintcodeapp.com/news/iphone-6-screens-demystified
http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

Answer 6

I raised the same issue with Apple’s technical support, and they confirm that for a full-screen image this cannot be done in the asset catalog: “There is currently no way for the Asset Catalog to upload device-specific images. To support device-specific images, you You will need to implement your own code to determine the screen size and select the appropriate image. You can request a raise using the following link. Be sure to explain your use case. for this feature. "

Answer 7

I checked the naming convention of the startup image generated from the asset catalog through Xcode 6, and the landscape version for iPhone 6+, for example, had: LaunchImage-Landscape-736h @ 3x .png

Based on this, I assume that the following desert .png file will be used for retina devices:

• Desert @ 2x : iPhone 4s (320 x 420)
• desert-568h @ 2x : iPhones 5, 5C and 5S (320 x 568)
• desert-667h @ 2x : iPhone 6 (375 x 667)
• desert-736h @ 3x : iPhone 6+ (414 x 736)
• desert @ 2x ~ ipad : iPad (1024 x 768)

Answer 8

In this case, there is no built-in support for Assets, so I think it would be better to do this manually, since working with undocumented file names can easily break in the future.

Answer 9

Just measure the dimensions of the device and call up the desired image. those. do it programmatically

So, in your appdelegate there are global

 deviceHeight = self.window.frame.size.height; deviceWidth = self.window.frame.size.width; 

which you can call repeatedly. Then check them out and call up the corresponding image

 if (deviceWidth == 640){ image = IPHONE4IMAGE; deviceString = @"iPhone4"; } else... 

Answer 10

In my case, I was interested in making my subclass of the base view class the same background image as my startup image.

NOTE. This approach will not work unless it is your specific requirement.

In addition, even when I tried to create a background image that was the correct size for iPhone 6 (750x1334), loading this image as a template image into the background color for the presentation ended up making the image undesirably smaller.

This answer gave me the code I need to find a good solution for me.

Here's the code I got so that the image of my launch UIViewController background image of the UIViewController (or vice versa):

 - (void)viewDidLoad { [super viewDidLoad]; UIImage *background = [UIImage imageNamed:[self splashImageName]]; UIColor *backgroundColor = [UIColor colorWithPatternImage:background]; self.view.backgroundColor = backgroundColor; } - (NSString *)splashImageName { UIInterfaceOrientation orientation = [[UIApplication sharedApplication] statusBarOrientation]; CGSize viewSize = self.view.bounds.size; NSString *viewOrientation = @"Portrait"; if (UIDeviceOrientationIsLandscape(orientation)) { viewSize = CGSizeMake(viewSize.height, viewSize.width); viewOrientation = @"Landscape"; } NSArray *imagesDict = [[[NSBundle mainBundle] infoDictionary] valueForKey:@"UILaunchImages"]; for (NSDictionary *dict in imagesDict) { CGSize imageSize = CGSizeFromString(dict[@"UILaunchImageSize"]); if (CGSizeEqualToSize(imageSize, viewSize) && [viewOrientation isEqualToString:dict[@"UILaunchImageOrientation"]]) return dict[@"UILaunchImageName"]; } return nil; } 

Answer 11

Try this class to programmatically change the name of the image.

 import UIKit class AGTools: NSObject { class func fullWidthImage(imageName: String!) -> String!{ let screenWidth = UIScreen.mainScreen().bounds.size.width switch (screenWidth){ case 320: // scale 2x or 1x return (UIScreen.mainScreen().scale > 1.0) ? "\(imageName)@2x" : imageName case 375: return "\(imageName)-375w@2x" case 414: return "\(imageName)-414w@3x" default: return imageName } } } 

use this method as follows.

 _imgTest.image = UIImage(named: AGTools.fullWidthImage("imageName")) 

Answer 12

FIRST , you need to configure your ImageView to cover the entire screen, Autolayout will help a lot for this task, look at the link below and find how to set restrictions (leading space, trailing space, upper space and lower space) using the storyboard :

http://www.thinkandbuild.it/learn-to-love-auto-layout/

Step

SECOND is the creation of sets of images for specific devices on your image objects (image below) to display different images according to the device.

Check out this information: http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

It explains the differences between the old iPhone, iPhone 6 and iPhone 6 Plus. You can see a comparison of screen sizes at points, displayed pixels, and physical pixels.

What all

Please give feedback if you have any problems.