Loupe

iOS : faire un splashscreen multi-résolutions, multi-densités de pixels et éventuellement étendu.

Dans un précédent article, je vous expliquais comment faire un splashscreen multi-résolutions, multi-densités de pixels et éventuellement étendu sur Android et je viens de me rendre compte qu'il manque la version iOS de cette démarche.

Nous verrons que la mise en place est beaucoup plus simple et rapide et passe par l'utilisation d'Xcode.

TL;DR;

On créé un Storyboard que l'on configure comme Splashscreen. Dans ce Storyboard, on place notre logo centré à l'aide de contraintes.

Création et configuration du Storyboard

La création du Storyboard se passe via le menu d'ajout d'élément de Visual Studio, on choisit la catégorie iOS :

Capture d’écran 2018-06-20 à 17.05.17.png

On ira ensuite, choisir ce Storyboard nouvellement créé dans le fichier info.plist, soit en éditant le code, soit via l'interface graphique. Le nom à renseigner correspond bien sûr au Storyboard précédemment créé.

<key>UILaunchStoryboardName</key>
<string>LaunchScreen</string>
<key>UIRequiredDeviceCapabilities</key>

Capture d’écran 2018-06-20 à 17.08.23.png

Création du Splashscreen dans le Storyboard

La suite du processus est très visuelle et se déroule dans X Code :

  1. On sélectionne la vue du ViewController et on lui applique la couleur d'accentuation comme fond. Ici cela sera la couleur tendance de l'année, l'ultra-violet.
  2. On ajoute un élément Image dans la vue.
  3. On lui applique des contraintes de taille pour que celle du logo soit appliquée.
  4. On lui applique des contraintes d'alignement pour le centrer.
  5. Et c'est tout !

Ajout des contraintes de taille 

On sélectionne l'élément et on clique sur le bouton en forme TIE Fighter dans la barre du bas. Dans la fenêtre qui s'ouvre, on sélectionne Width, Height, on met les bonnes valeurs et on valide pour appliquer les contraintes.

Capture d’écran 2018-06-20 à 17.19.12.png

Ajout des contraintes d'alignement

Toujours avec l'élément sélectionné, on sélectionne l'icône d'alignement dans le bas d'écran puis on coche les deux dernières options de centrage en ayant renseigné 0 comme valeur.

Capture d’écran 2018-05-25 à 08.38.33.png

Vue finale

Une fois ceci réalisé, vous devriez avoir cette vue et hiérarchie dans Xcode. Il ne reste plus qu'à sauvegarder et lancer l'exécution.

Capture d’écran 2018-06-20 à 17.25.43.png

Quelques limitations

L'idée étant de charger très vite ce Storyboard au lancement de l'app, il y a quelques limitations à respecter :

  • Uniquement des composants basiques : images, label, mais pas de WebView par exemple.
  • Uniquement des composants standard, pas de vue "customs".
  • L'utilisation de ViewController complexe (comme le SplitView) n'est pas possible.
  • Impossible de lancer du code sur les hooks classiques tel que viewDidLoad car la hiérarchie des vues ne sera pas encore chargée.

Happy coding !

Photo de profil

Ces billets pourraient aussi vous intéresser

Vous nous direz ?!

Commentaires

comments powered by Disqus