I built an iPhone app whose background image fit nicely for iPhone screens, but when I run at iPad, this image stretch horizontally (as the iPad screen is more squared than the iPhone).
Is there a way for me to choose which background image is going to be loaded?
I know that I can use UIDevice.current.userInterfaceIdiom == .phone and
UIDevice.current.userInterfaceIdiom == .pad to check which device I'm in but how can I choose the correct image if Launch Screen doesn't accept code attached to it?
The easiest way to do this that I can think of is to have two devices in your image set of located in your Assest.xcassets. Then assign different images as you like in the two devices, iPhone and iPad, like so:
Then here's the preview when you run the app on the iPhone (left), and on the iPad (right). Two different images in each kind of device.
In your LaunchScreen.storyboard file, you likely have a UIImageView that contains your image. When you click on that image view, you will see details of the view in right slider view. Set the view's content mode to "center" and you will be all set. You can also use "aspect fit" or "aspect fill" if center doesn't work.
Related
I use to have a launch screen image for every screen size, and the image differs from iPhone to iPad.
The image also is optimized to look perfect on any screen, because the launch screen USED TO have the possibility to put image for each size.
But Now that it is deprecated. We have to use LaunchScreen.storyboard and I don't know how to achieve the same thing with it!
How can I use this "good for nothing" storyboard to show different image for every device out there (iPhone, iPad, Portrait, Landscape). And why isn't this documented at Apple's ?
Thank you.
I need to set a different background image for iPad for both Landscape & Portrait mode in LaunchScreen.storyboard. I am unable to do that using size-classes as both of them have Regular-Regular size classes. Is there any way to do so? I have other UIKit elements in the LaunchScreen.storyboard as well. like another Imageview and Labels.
you can follow this answer
You can use a single Storyboard to load different Launch images for
iPad and iPhone. In your LaunchScreen.storyboard, go to the Attributes
Inspector of the ImageView where you set the image. Set launch image
for iPhone in Image field. There is a plus sign near the "Image"
field. Click on it and change the Height from Compact to Regular and
click Add Variation. Another field is created as wR hR. Add the launch
image for iPad there. Thats it. Now it loads launch image based on
your device.
I am using lauchscreen.storyboard for splashscreen in my iOS application. I have added splashscreen image in the storyboard. When app is lauchning, portrait splashscreen is coming correctly. But, when opening app in landscape mode, blue color appears in both right and left side of the splashscreen.
I tried setting different splashscreen image by adding variation. But, this storyboard takes any one portrait or landscape image only.
Let me know how to set two images in storyboard, one for portrait and one for landscape or the best practice to set splashscreen for both portrait and landscape orientation. I couldn't find any solution for this in the web though it seems to be a simple problem.
Setting the same launch image for both orientations:
Add an image to your LaunchScreen.storyboard's main controller's view and constraint all edges to superview (not safe Area)
Note: to change a constraint that is referencing SafeArea you can double click it on the inspector and change the respective item. Here are some screenshots for reference
Set the image's content mode to something that scales appropriately (scale to fill or aspect fill for example)
The setup should look like this (you can enable the previews on the right by clicking the assistance editor and switch from Automatic to Preview):
Setting different launch image depending on orientation:
Click on the + button next to your image
Add a customization for regular width & compact height
Your setup should look like this:
Update: What about the iPad?
Unfortunately, it seems that (at least up to Xcode10.1) is not possible to customize your launchscreen the same way for iPad, for a couple of reasons. The main one is that iPads are Regular x Regular for both portrait & landscape. The other reason is that you cannot use custom classes in your LaunchScreen.storyboard. Because if you could, you could subclass UIImageView and override the traitCollection with something like this (essentially would be treating the iPad as an iPhone sizeclass-wise):
override public var traitCollection: UITraitCollection {
if UIDevice.current.userInterfaceIdiom == .pad && UIDevice.current.orientation.isPortrait {
return UITraitCollection(traitsFrom:[UITraitCollection(horizontalSizeClass: .compact), UITraitCollection(verticalSizeClass: .regular)])
}
return super.traitCollection
}
By the way, you can still use code like the above in the rest of the application for your windows/views if you want to solve similar problems.
I know that this is not what you were looking for in the answer, but I am afraid that (for now), you'll have to use static images in your Assets for handling iPad.
By default use portrait, Add variation to your image for landscape version with these selections.
Update your landscape picture here.
personally, I also recommend you to use AutoLayouts.
Run the app.
Example - Results -
how to set two images in storyboard?
iOS has sizeClass for almost anything you can see. You can choose image, color, etc for any situation you need based on size of the main window of your application (Not only orientation of the device)
It's more convenient. Because maybe the device is in landscape mode but it's in split screen of iPad 🤷🏻♂️. So let OS decides what is best match for the size situation.
- Size Classes in interface builder
[
- Working example:
Make use of Vary for traits as shown ion screenshots. I have tried this and has worked for me.
As LaunchScreen I want to have an exact image of the start page that appears right after the launch.
Therefore, I made screenshots of all resolutions of the start page, both portrait and landscape. Then I removed all fonts because I generate two variants of the app in different languages and the texts (e.g. in the buttons) are different. The launch screens should fit both variants.
In Images.xcassets I added LaunchImage and assigned all positions with the correct resolutions (for both, iPhone and iPad).
LaunchScreen.storyboard has an ImageView in the ViewController with the image name LaunchImage.
Result:
1 All launch images displayed are scaled even though the correct resolutions are available.
Only the portrait images are used, also for landscape, and therefore scaled and distorted.
on iPads only iPhone images are displayed, portrait version also in landscape, scaled accordingly.
On some devices (e.g. iPhone X), only a white or black screen is displayed at launch (portrait and landscape).
Under no circumstances will the correct launch screen be displayed.
On the image you see all relevant areas and the list of all used launch images.
What did I do wrong or miss?
Supplement:
I just followed another tip and deactivated "Clears Graphic Context" in UIImageView and changed the display to "Aspect Fit".
Result: The portrait launch image is still used in the iPad, but is no longer scaled and is now centered.
So the most important question now is why an iPhone portrait launch image is used for iPad in both directions.
If you are using a LaunchImage, you should set that image in the Target settings. Go to your target and under the General tab, set the Launch Images Source value to the image you have in your asset catalog:
Also delete the text LaunchScreen in the Launch Screen File field.
NOTE: This question is NOT related to launch image storyboards.
INFO: BG Buddy is a landscape only app. The launch screen uses images in a launchImage.xcassets file.
The launch image transitions to a UIViewController containing a full screen UIImageView with the same BG Buddy Background image as used in the launch image, and some textual UIButtons. This gives the impression that the buttons appear on top of the background image after a short time when the app has loaded.
Here is how the BG Buddy Background image set has been set up since the app’s release. Transitions from Launch Image to UIViewController work perfectly on iPad, iPhones 5,6,7,8 and 6,7,8 Plus.
The iPhone X and the iPhone Plus both seem to use the iPhone 3x image slot but both have very different dimensions. I’ve opened up the other size classes slots and tried to find a place with much confusion and no success. NOTE: All iPhones apart from the iPhone Plus use compact width/compact height size classes when in landscape. The iPhone Plus uses regular width/ compact height in landscape orientation.
So how do you set up 'image set' files to match launchImage files for all devices?
At the moment I can either have a good iPhone X transition or a good iPhone Plus transition but not both.
Is my only option to try to detect if it’s an iPhone X (or iPhone Plus) and swap the images programatically?
So here's the solution for a landscape only app. Hopefully it will help a little for portrait orientations too. Landscape bespoke launch images should be placed as shown with these width/height class settings.
Use the launchImage.xcassets screenshot at the top of the question to set up your launchImage.xcassets.