I have this iPhone app targeted to iOS 7.
I have created an entry on .xcassets called mainImage that is device specific for iPhones. So xcode presents me with 4 slots I have to fill with images. that has these images: 1x, 2x, Retina 4 2x and 3x.
I have filled each slot with the following images in order:
1x = 320 x 480 pixels image
2x = 750 x 1334 pixels image
Retina 4 2x = 640 x 960 pixels image
3x = 1242 x 2208 pixels image
Then I have a viewController on storyboard that is adjusted with the iPhone 6 size and the imageView there is adjusted to load just "mainImage".
The image shown there is the iPhone 4 2x stretched, not the correct one. It should be showing the 750x1334 image.
If the imageView is adjusted with "mainImage", wasn't it supposed to load the correct image for the viewController size?
I run that on iPhone 6 and indeed the image shown is the iPhone 4 image stretched.
Anyway to fix that?
It does not work like that. You can have separate images for different screen densities, not for different screen sizes. You have to add a separate entry for each screen size and select the image yourself. Launch image is the only asset that works automatically with different screen sizes.
How to specify size for iPhone 6/7 customised edge-to-edge image?
Follow this guidelines for each iDevice:
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html#//apple_ref/doc/uid/TP40006556-CH27-SW1
In fact there is one more limitation/bug on xcassets, beyond the impossibility to localize it to different languages, that is the ability to load a different image or better the correct to iPhone 6. Apple did not realized that the way xcassets work now will not load the correct image if you care using full screen images.
The solution for that is not to use xcassets, create the images you need and a class to call the correct image based on the screen size/needs.
Related
I need bigger button & image sizes for iPad devices compared to iPhone. Before Size classes, I used to have images ending as #2x~ipad to have different version for iPad. However, it is not clear if the same approach is applicable when using Size classes and Trait collections, or there is a better approach? Also, is iPad Pro 12.9 inch #3x or #2x? I see conflicting responses, but if it is #2x, how do we have bigger image size for iPad Pro?
You are confusing Size with Resolution.
If you have a UIImageView at 150 x 150 points, and you have MyPic.png + MyPic#2x.png + MyPic#3x.png, the image view's frame will always be 150 x 150 points, but UIKit will automatically select the proper resolution image for the device. See https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/image-size-and-resolution/
If you want different size frames for your buttons and images, based on device / view size, use Trait Variations, or code, or percentage-based constraints.
Again, if you have MyPic.png + MyPic#2x.png + MyPic#3x.png files of the same image, the appropriate resolution image will be used, regardless of frame size.
There is a lot of flexibility when working with images by using Asset Catalogs. For example:
You can add different resolution images for 1x 2x and 3x... you can add image sets specific to iPhone / iPad / etc.
EDIT
Additional example. Asset is named "RoundSwift256x256". I have 3 resolutions for iPhone, 2 resolutions for iPad (no iPads use #3x) - using different colors to make it very obvious.
In Storyboard, I added an imageView, set its image to RoundSwift256x256. then set the Assistant Editor to Preview and selected iPhone 8 and iPad Pro 9.7". As you see, it uses my iPhone image for iPhone, and my iPad image for iPad.
I have the UIImageView pinned to all the borders of the LaunchScreen.storyboard:
I am using Assets.xcassets for providing the image to the UIImageView:
I would like that launchscreen's image to be shown properly on iPhone 5, 5S, 6, 6S, 7.
I am not sure what sizes I should make for the Image.
Thanks!
First approach:
You can use LaunchImage in your assets catalog to add images for every screen resolution you support. Also you can check screen resolution for all devices here.
After you add your images select them here:
Your target -> General -> App Icons and Launch Images section -> Launch Images Source
Second approach:
If for some reason you don't want to use static images and prefer to have LaunchScreen.storyboard with UIImageView, you can just add the biggest resolution for each scale (1x, 2x, 3x):
1x -> iPhone 4: 320x480
You don't need this image if you don't support iOS 7 and lower.
2x -> iPhone 6/6s: 750 x 1334
Yes, you have other devices with different resolution:
5/5s (640 x 1136) - image will be downscaled
4s (640x960) - use Aspect Fill content mode for your image view and it will crop top and bottom
3x -> iPhone 6 plus: 1242 x 2208
I'm a bit confused here. If, say, I want to set an image as background (full screen) for my ios app (iphone), what are the sizes for the image I have to make? I googled and found no clear answer yet.
Using image assets gives no explanation either. I tried creating new image set, it just shows 3 slots for 1x, 2x, and 3x. How the xcode differentiate between what image to use for iphone 5 and iphone 6 (different ratio)?
EDIT
I seem to be unclear about my question. If the image for iphone 5 and 6 is the same, doesn't the aspect ratio differ? It will be stretched on one device or vice versa on the other and I don't want that. Back before the iphone 6, I just create image .png, #2x.png, and -568h#2x.png with the size 320x480, 640x960, and 640×1136. So my question is, for iphone 6 and 6+, what is the naming and size for my images?
If, say, I want to set an image as background (full screen) for my ios app (iphone), what are the sizes for the image I have to make?
You can use [UIScreen mainScreen].bounds's width & height to setup your view frame.
it just shows 3 slots for 1x, 2x, and 3x
They're not used for handling ratio of displaying, just for display solution (retina or not). You can just use xxx.png in your code, and it'll choose to use xxx#2x.png or xxx#3x.png appropriately.
How the xcode differentiate between what image to use for iphone 5 and iphone 6 (different ratio)?
UIImageView has an instance method called -setContentMode:, you can use UIViewContentModeScaleAspectFill mode for displaying in different devices w/ different ratio, i.e., some parts will be cut off.
This link should give you an overview of the differences between the 1x, 2x and the 3x image assets which we get once we create a new image asset.
http://9to5mac.com/2014/08/29/support-for-3x-image-assets-found-in-latest-ios-8-beta-ahead-of-larger-display-iphone-6/
Also when you create a new image asset, you can select image for specific devices such as (iPhone and iPad), if you are only developing for certain devices.
Select the devices as "Device Specific" from the Image Set Shown on the right side of the image.
As for you question, iPhone 5 and iPhone 6, xcode will take the same image assets i.e. 2x, for iPhone 6 Plus it takes the 3x image.
App Icon and Launch Image
Now for the App icon and the Launch image, this following link will guide you through.
http://www.iphonelife.com/blog/31369/unleash-your-inner-app-developer-managing-images-xcode-5-asset-catalogs
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html
for the launch image there are different options available, such as you can individually set images for the landscape and portrait images for different devices.
The designers on a project I am responsible for developing (one of my first iOS projects) designed the app using a Photoshop canvas set at 1242x2208 pixels, which is the number of pixels that the iPhone 6+ uses. I've scoured the internet and am just getting more and more confused by all the conversions for 1x, 2x, 3x and to further the confusion, apple downsizes to 1080x1920.
Anyways, how do I cut the assets correctly for #1x, #2x, #3x? When I crop the element I want, I save it out at 3x. But what do I divide by to get the 2x and 1x versions?
Here's secondary question and a hypothetical situation: There is a button that is designed to be the full width of the screen in portrait, so the designer made it 1242x100. If I save it out at 3x, then scale it down for 2 and 1x, will this button fit all the different screen sizes all the way down to iPhone 4/4s, which has a smaller pixel dimension and different aspect ratio?
Confused, any help appreciated!
Example:
If you original artwork is 960px by 1704px, just save you image including "#3x"
image#3x.png // (960 x 1704)
Then you have to resize it to 640x1136 and save including "2x"
image#2x.png // (640x1136)
And then you have to resize it to 320x568 and save as 1x
image.png // (320x568)
Indeed the Retina sizes are confusing, but this is what auto resize is used for in Xcode.
But The API which Apple give us, chooses the #3, #2 and 1 sizes by itself. There isn't anything that the developer/designer needs to do but provide all three images. An example is:
ObjC:
+ (NSImage *)imageNamed:(NSString *)name]
Swift:
init?(named name: String) -> NSImage
Would just use the name of the image without the # etc... So, myImageName#3x.png myImageName#2x.png myImageName.png would just be referred to as "myImageName"
The API handles the rest :)
I have had the same problem. What I did was, after cutting all images for iPhone 6+(#3x), I just resized the PSD to iPhone 5's width which is 640px, (height would be 1138 px if you keep aspect ratio) and cut #2x images. For the 1x images, again resized to 320px width.
Just, iPhone 6+, iPhone 6 and iPhone 5 have almost same aspect ratio.
Good Luck!
I simply want to display a title page to a game. I want to use pre-rendered images. It needs to work with all iPhones and iPads. So far I am using these assets as screenshot below
I have used these sizes:
In 1x place image with resolution of 320 x 480.
In 2x place image with resolution of 640 x 960.
In Retina 4 2x place image with resolution of 640 x 1136.
In 3x place image with resolution of 1242 x 2207.
Only the iPhone 4 and 5's show correctly. Both 6 and 6Plus are completely wrong.
for iPad:
1x image of 760*1024
2x image of 1536*2048
Only the iPad 2 displays correct. The Air and Retina are completely wrong.
I have read through all the documentation I can find both on here and searching for hours on Google. I am unsure what simple thing I must be overlooking. Am I trying to do something that is not possible? I am only testing on the simulator and thinking it could be an issue with that?
Also I may have a misunderstanding then as I was under the impression that #3x was for iPhone 6 and 6+. If not, what are #3x for?
For some reason Image Sets in Asset Catalogs do not include a size for iPhone 6 or iPhone 6+, so when using a full screen image you may need to handle it manually via code.
What I'm doing (and it's not pretty but it works), is to include another Image Set for iPhone 6 (I all it imageName_47), and another one for iPhone 6+ (I call it imageName_55). Then in code, detect the screen size and swap the image to the best size. You'll only need the #2x version for the _47 one, and the #3x version for the _55 one.