I am using a storyboard as launch screen.
It has a full size UIImageView for artwork and a language dependent UILabel rendered over it.
I do have .png files for all possible iPhone screen sizes (iPad not necessary).
The artwork contains a circle that looks distorted when I use the same image for iPhone 4s and iPhone 5.
Approach 1
In the LaunchScreen.storyboard, I add an UIImageView for all iPhones and use an imageSet, that is defined in Assets.xcassets.
When I do this, the image#2x of the image set is used for iPhone 4s and for iPhone 5 5s. One of both looks bad, because iPhone 4s and 5 have different heights.
I am not aware that I can use size classes in the storyboard to distinguish between iPhone 4s and iPhone 5. Or can I?
Approach 2
create a launch image set in Assets.xcassets, which can hold all necessary image sizes.
I can't select this launch image set in the UIImageView as image.
Question
In a full size UIImageView in a LaunchScreen.storyboard: how do I display different pngs for
iPhone 4 + 4s 640 x 960 pixels
iPhone 5 + 5s 640 x 1136 pixels
iPhone 6 + 6s 750 x 1334 pixels
iPhone 6 plus + 6s plus 1242 x 2208 pixels (portrait and landscape)
The main problem appears to distinguish between 4 + 4s and 5 + 5s.
a circle that looks distorted when I use the same image for iPhone 4s and iPhone 5.
The problem is with the content mode of the image view. Use a content mode that does not stretch the image out of its aspect ratio.
Related
I'm trying to build an app using SpriteKit for iPhone 5,6, and 6 plus. I have created a background image for each resolution:
image-1.png // of size 1136 x 640, for iPhone 5
image-1#x2.png // of size 1334 x 750, for iPhone 6
image-1#x3.png // of size 2208 x 1242, for iPhone 6 plus
In Xcode 7, when I run my code on the simulator for iPhone 6 and 6 plus the correct and corresponding image is automatically picked. But when I run the code for iPhone 5 the iPhone 6 image is picked (image-1#x2.png) and not the correct image (image-1.png). Why?
In SKScene.didMoveToView() I set the scene size to the view's frame size:
self.size = view.frame.size
When I add the image to the scene I do:
self.addChild(SKSpriteNode(imageNamed:"image-1"))
If I use "image-1.png", I get the same result.
There is no such place specially for iPhone 5 and 6. they both take #2x images. So in both device it will pick #2x images.
You need to set programmatically or on based condition.
Refer to my old question : Images.xcassets taking wrong image for the iPhone 6?
iPhone 4 and iPhone 6, when using image cassettes in a xib, use the same #2x image. Is it possible to use different images for each and not use scaled mode for windows 6/6+? I am trying to use a full screen image for each and the iPhone 6 image doesn't scale down correctly, and the iPhone 4 image doesn't scale up correctly.
For the launch image you can use the assets folder with the device specific launch images.
Here you can set the Retina HD 4.7 Launchscreen for the iPhone 6
1x = 320 x 480
2x = 640 x 960 - iPhone 4
Retina 4 = 640 x 1136 - iPhone 5
Retina HD 4.7 = 750 x 1334 - iPhone 6
Retina HD 5.5 = 1242 x 2208 - iPhone 6+
EDIT
Go to the General Settings Of your project and check your settings make sure you have selected the assets folder. Remove the Launch Screen File text.
I've a little confusion and facing a little problem regarding #2x images in iOS as according to Human Interface Guidelines HIG, the #2x For iPhone 6: 750 x 1334 (#2x) for portrait but same #2x for iPhone 4S has size of 640x1136.
HIG
When I placed #2x image named as MyTestImage#2x.png of size 750 x 1134, it was fine for iPhone 6 but not for iPhone 4S, but if I put MyTestImage#2x.png of size 640x1136 then its fine for iPhone 4S but not for iPhone 6.
I also placed 640x1136 as Retina 4 2x named as MyTestImage-568h#2x.png but its also not working for me.
Whats I'm conflicting? What should be the actual image sizes of #2x for iPhone 4S and iPhone 6 if I talk about a full screen image.
And also what should be the correct retina display image size.
EDIT 1:
My question is different as I want to know the difference between #2x and -568h#2x retina display regarding both screens. Also, any optimal solution for this which can avoid image redundancies.
What size of image I need to have if I want to use it as background to full screen?
1.png 320 - 568 points non retina
1#2x.png 640 - 1126 points retina
Am I right? Or what size are correct?
You could use the size of the splash screen images for your views too, making your app iOS 7 forward compatible.
For iPhone 5 and iPod touch (5th generation):
640 x 1136 pixels
For other iPhone and iPod touch devices:
640 x 960 pixels (retina)
320 x 480 pixels (standard resolution)
It depends on what device you're targeting. If you looking at just the iPhone 5/5s then you're spot on. If you're also taking into account everything below the iPhone 5, then you will also need
320x480 (non retina)
640x960 (retina)
So it just depends on the devices you're supporting. There are loads of resources on the net about these things. Also bear in mind that the background size will be different depending on what components you use, such as navigation bars and tab bars. And also if you're supporting iOS 7 then the status bar is transparent, where as on iOS 6 and below, you don't need to provide the background for that (so the above dimensions are actually correct for iOS 7 but not exactly right for iOS 6)
The problem is that the launch image I have set up isn't showing up I speculate its because its dimension are for portrait but since its landscape based it isn't showing up and I have set up all my launch images correctly on the asset catalog now the thing is I don't know if I'm supposed to set it up as portrait under Deployment info and later then coding for it to once it has completely launched and loaded to stay in landscape and not rotate to portrait I notice that on my asset catalog I don't have an image with the dimensions 320x480 it never asked me for it you know how it has slots well in my project it never gave me one pertaining such dimensions (320x480) it only had two slots for iPhone portrait which were "#2x" (640x960) and "R4" (640 x1136)
Update
I tried changing the dimension from 640x960 to 960x640 but I got an error as soon as I added to the catalog because those weren't the right dimensions
More Details : apple doc
portrait only available in xcode for launch image but you can customize your image. create image landscape mode the portrait size through attached to xcode. it's works perfectly and display image as landscape
Create launch images in different sizes for different devices. Launch images for all devices must include the status bar region. Create launch images in the following sizes:
For iPhone 5 and iPod touch (5th generation):
640 x 1136 pixels
For other iPhone and iPod touch devices:
640 x 960 pixels
320 x 480 pixels (standard resolution)
If at all you still want to view the splash screen in landscape mode you have to design the image in such a way as we cannot change the behavior of the splash screen.
Instead of designing the image as 640x960, design it as 960x640 and your problem will get solved.
Edit:
This is sample splash image in portrait dimension but designed in landscape view
All the best.
The iPhone only uses ONE launch image -- portrait
only the iPad supports orientations during launch
what many do:
have no launch image
make sure applicationDidFinishLaunching returns as soon as possible(!)
show your own splash screen view
do your real loading only THEN
I was going to comment on #Warrior's answer but StackOverflow won't let me.
You shouldn't need to specify an iPhone 5 optimised image (I haven't for my app and it works), although if this is a new app I would recommend it.
Are you running it on an iOS 7 device?
I have noticed that Xcode allows you to add a 1x and 2x image specific to iOS 5 & 6 devices.
Otherwise all I can suggest is checking your dimensions (it must be a portrait sized image 640x960px) and be placed in the '2x' slot) and also make sure your info plist is pointing to the correct location.
Then as others have suggested, all you need to do to get a landscape image is have artwork that is rotated 90 degrees when your image is portrait.
The screen size and Icon size for iOS.
ICONS (iPhone and iPad)
29 x 29pt (1x and 2x)
40 x 40pt (1x and 2x)
50 x 50pt (1x and 2x)
57 x 57pt (1x and 2x)
60 x 60pt (2x)
72 x 72pt (1x and 2x)
76 x 76pt (1x and 2x)
NOTE: 2x is double the size of 1x images
SCREEN SIZE
iPhone 4s and earlier (3.5 inch)
320 x 480 pts
Retina
640 x 960 pts
iPhone 5 (4 inch)
320 x 568 pts
retina
640 x 1136 pixels
iPad protrait
768 x 1004
retina
1536 x 2008
iPad Landscape
1024 x 748
retina
2048 x 1496
OTHER IMAGE SLICING
All image slicing requires both 1x and 2x to work perfectly for retina and non retina displays.
NOTE: 2x is double the size of 1x images.
Normally you add both a portrait and landscape image to the asset catalog and the device chooses which one to use based on the current device orientation.
If your app only supports landscape then you only need to provide a landscape image, as long as you set the "Device Orientation" in your info plist to be "Landscape Left" and "Landscape Right" ONLY.
In that case, the user will always be presented with a landscape launch image and this will indicate to them that they need to rotate their device.
- Anthony