https://github.com/jjochen/adaptivelaunchscreen
Adaptive iOS launch screen - different images for landscape and portrait (iPad and iPhone)
https://github.com/jjochen/adaptivelaunchscreen
ios storyboard xcode
Last synced: 5 months ago
JSON representation
Adaptive iOS launch screen - different images for landscape and portrait (iPad and iPhone)
- Host: GitHub
- URL: https://github.com/jjochen/adaptivelaunchscreen
- Owner: jjochen
- License: mit
- Created: 2019-04-24T07:17:28.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2020-09-13T08:11:48.000Z (over 5 years ago)
- Last Synced: 2025-07-31T04:45:28.972Z (8 months ago)
- Topics: ios, storyboard, xcode
- Language: Swift
- Size: 64.5 KB
- Stars: 13
- Watchers: 1
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Adaptive iOS launch screen
It's not easy to use a launch screen storyboard that uses different images for iPad in portrait and landscape mode.
For the iPhone this can be solved using height and width classes.
But as iPads have regular height and regular width it's not possible to determine the orientation of the device within the launch screen storyboard.
This iOS project has an adaptive launch screen storyboard using spacer views that position the correct image in the visible area and move the other one off screen.
You can NOT provide different images for different screen sizes (iPhone 4, iPhone X, ...), but if you want **different images for iPhone and iPad** and **different images for portrait and landscape** this solution is for you.
[![Constraints in Interface Builder][1]][1]
The important constraints are
```
PortraitSpacer.width ≤ 5 × view.width
PortraitSpacer.width ≤ 5 × view.height
LandscapeSpacer.width ≥ 5 × view.width
LandscapeSpacer.width ≥ 5 × view.height
PositionSpacer.width = 5 × view.width
```
where `view.width` and `view.height` are the main view's width and height.
The `PortraitSpacer` positions the portrait image at `5 × min(view.width, view.height)`,
the `LandscapeSpacer` positions the landscape image at `5 × max(view.width, view.height)`,
and the `PositionSpacer` has the same width as `PortraitSpacer` in portrait mode and the same width as `LandscapeSpacer` in landscape mode.
We multiply everything with 5 so the two images do not overlap. This works for all devices where the following is true
```
5 × min(view.width, view.height) + max(view.width, view.height) ≤ 5 × max(view.width, view.height)
```
In landscape mode this would mean
```
5 / 4 ≤ view.width / view.height
```
which is the case for all current devices: iPad has the lowest aspect ratio with 4:3 which is still greater than 5:4.
You can then of course configure images per device (iPhone, iPad) in the asset catalog.
[1]: https://i.stack.imgur.com/fXN9X.png