Comment résoudre les problèmes d'interface utilisateur de l'iPhone en mode Zoom en raison de l'écran de lancement

Nov 29 2022
Contexte Il y a une semaine, nous avons identifié un problème étrange où notre application iOS Naukri se comportait de manière inattendue en mode Zoom sur certains appareils. L'interface utilisateur se déformait et s'éteignait de manière aléatoire dans la barre de navigation supérieure et la barre d'onglets inférieure.
Photo par Agence Olloweb sur Unsplash

Arrière plan

Il y a une semaine, nous avons identifié un problème étrange où notre application iOS Naukri se comportait de manière inattendue en mode Zoom sur certains appareils.

L'interface utilisateur se déformait et s'éteignait de manière aléatoire dans la barre de navigation supérieure et la barre d'onglets inférieure.

Problème

Après avoir parcouru plusieurs solutions et articles sur l'état de zoom, nous avons observé que lorsque l'état de zoom est activé, l'application commence à s'afficher en mode mis à l'échelle et comme notre écran de lancement n'était pas optimisé pour les écrans plus grands, nous rencontrions des problèmes d'interface utilisateur.

Qu'est-ce que l'écran de lancement ?

Il apparaît lorsque l'application est lancée pour la première fois et donne l'impression que votre application est rapide et réactive. Une fois votre application chargée, elle sera remplacée par le premier écran de votre application.

Lorsque nous avons vérifié la logique d'implémentation de l'image de lancement dans notre projet, nous avons appris que les différentes tailles d'images de lancement ont été ajoutées dans notre fichier xcassets.

Nous avons pensé à les supprimer et à ajouter différentes images juste pour essayer quelques choses, puis nous avons observé que l'ajout d'un écran de lancement à partir de xcassets était obsolète.

La solution

Ainsi, après avoir parcouru la documentation d'Apple, nous avons appris les bonnes façons d'ajouter un écran de lancement dans votre application iOS.

https://developer.apple.com/documentation/xcode/specifying-your-apps-launch-screen/

Comment ajouter un écran de lancement ?

Avant Xcode 6, la seule option que nous avions était de fournir des images statiques dans un catalogue de ressources. Plus tard avec iOS 8, Xcode nous a permis de remplacer l'image statique par un fichier storyboard. Avec le temps et les nouvelles mises à jour, plusieurs options et fonctionnalités ont été ajoutées pour l'écran de lancement.

Pour Xcode 12 et supérieur, il existe deux façons d'accéder à l'écran de lancement :

  1. Utilisation d'un storyboard (par défaut), ajouté lorsque vous créez un nouveau projet
  2. Utilisation d'une plistconfiguration

À l'aide d'une plistconfiguration, vous pouvez définir :

  • Une image
  • Si l'image de lancement doit respecter les encarts de zone de sécurité
  • Une couleur de fond
  • Visibilité de la barre de navigation
  • Visibilité de la barre d'onglets
  • Visibilité de la barre d'outils
  • Configuration de l'écran de lancement par schéma d'URL
  1. Dans les paramètres de votre cible, sélectionnez l'onglet Infos.
  2. Dans la section Propriétés de la cible iOS personnalisée, développez la touche Écran de lancement.
  3. Cliquez sur le bouton Ajouter (+), saisissez UILaunchScreenet appuyez sur Retour pour ajouter la touche d'écran de lancement à la liste des propriétés. Si la UILaunchScreenclé est déjà présente, vous pouvez ignorer cette étape.
  4. Sélectionnez la UILaunchScreenclé, cliquez sur le bouton Ajouter (+) et ajoutez des clés supplémentaires pour spécifier les options de configuration de votre écran de lancement.

Utilisation d'un fichier storyboard

Si vous créez votre application iOS à partir d'un modèle de storyboard, Xcode ajoute un fichier d'écran de lancement par défaut, appelé LaunchScreen.storyboard, à votre projet. Modifier LaunchScreen.storyboardpour configurer votre écran de lancement.

Si votre projet ne contient pas de fichier d'écran de lancement par défaut, ajoutez un fichier d'écran de lancement et définissez le fichier d'écran de lancement pour la cible dans l'éditeur de projet.

  1. Choisissez Fichier > Nouveau > Fichier.
  2. Sous Interface utilisateur, sélectionnez Écran de lancement, puis cliquez sur Suivant.
  3. Donnez un nom au fichier d'écran de lancement, choisissez un emplacement, sélectionnez la cible à laquelle vous souhaitez ajouter le fichier, puis cliquez sur Créer.
  4. Dans les paramètres de votre cible, sélectionnez l'onglet Général et recherchez la section "Icônes d'application et images de lancement".
  5. Dans le menu contextuel Lancer le fichier d'écran, choisissez le nouveau fichier d'écran de lancement.

Les écrans de lancement sont fortement mis en cache dans iOS pour améliorer les performances. Donc, à des fins de développement et de test, vous devez supprimer votre application et redémarrer l'appareil (ou le simulateur).

Vous pouvez également ajouter sleep(5) dans didFinishLaunchingWithOptions lors du développement de votre écran de lancement, un délai peut être utile pour examiner plus en détail votre conception implémentée.

Merci beaucoup d'avoir lu...!

Références:

https://developer.apple.com/documentation/xcode/specifying-your-apps-launch-screen/