CODEWITHSUNDEEP
iosxcodeimageresolution
Discoveringmypath
Discoveringmypath

Reputation: 1077

How to implement images for different resolutions

I want to use resolution as a means to implement images for an iOS app.

iOS has the following resolutions for modern day devices:

iphone 5/SE: 640x1136
iphone 6/7: 750x1334
iphone 6/7+: 1242x2208
ipad mini/air: 1536x2048
ipad pro: 2048x2732


The app that I'm building is Landscape only, so I'm looking at creating 5 images for every image, to match the necessary resolutions.

I struggle in how do I implement this within xcode using Image Sets. I can create 1 image set, and have it have a 3 slots for iphone, and also 3 slots for ipad. However, this only satisfies 3 of the 5 images that I want to create:

The iphone 6/7 @2x, iphone 6/7+ @3x, and the ipad pro at 2x.

Is there a way to implement additional slots for iphone 5 and the smaller Ipads?

I haven't been able to find a way, so I imagine that I would have to use a second Image Set, to add the 2 missing resolutions images. This would then require me to within code, have the viewcontroller, load different images based on the resolution of the device.

I'm okay with this additional requirement. My question would be is this the correct way of implementing this strategy? How would you implement this? And what might be some better strategies?


Notes: What I'm trying to avoid is limiting the number of constraints needed to get the views to look the way that I want. I started on an App, and I was using 2 images based on aspect ratio, and I think this is great, but the iphone 4 was throwing everything off. Then I learned that maybe I shouldn't worry about iphone 4 as it is outdated. So I'm either going to develop the UI from scratch using the 2 images method or attempt this 5 image method using resolution.

I'm a new developer so thank you for any assistance, sorry if I'm too verbose, I hope that this can help others as well, and I find that verbose is definitely the best way to be when learning. Thank you for any information!!!

Upvotes: 0

Views: 339

Answers (2)

Ivan Nesterenko
Ivan Nesterenko

Reputation: 969

While you can't add additional slots to .xcassets you can implement size classes in your .storyboard files. This is an easy approach to design unique interface for every device. Using it you can design nice interface for iPhone 4 (however, it is outdated as you pointed in OP).

Upvotes: 1

Luis Mejías
Luis Mejías

Reputation: 301

I'm not sure what kind of images do you wanna use, but guessing that are just background images with gradient or plain colors, I think you can do this:

a) Create an image set including the highest resolution, the middle and the lowest one, maybe something like this: 1x: 640x1136 , 2x:1242x2208 and 3x: 2048x2732

b) Then use that image set using this code that assure that the image is correctly resized to the view:

UIGraphicsBeginImageContext(self.theView.frame.size);
[[UIImage imageNamed:@"backgroundImageSet"] drawInRect:self.view.bounds];
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
self.theView = [UIColor colorWithPatternImage:image];

Hope this helps!

Upvotes: 0

Related Questions