Lancer des écrans pour les applications Xamarin.iOS

Cet article explique comment créer un écran de lancement d’application pour tous les appareils iOS, à n’importe quelle résolution et orientation, à l’aide d’un seul Storyboard unifié.

Avertissement

Le concepteur iOS a été déconseillé dans Visual Studio 2019 version 16.8 et Visual Studio 2019 pour Mac version 8.8, et supprimé dans Visual Studio 2019 version 16.9 et Visual Studio pour Mac version 8.9. La méthode recommandée pour créer des interfaces utilisateur iOS est directement sur un Mac exécutant Xcode. Pour plus d’informations, consultez Conception d’interfaces utilisateur avec Xcode.

Avant iOS 8, la création d’un écran de lancement pour une application iOS oblige le développeur à fournir une ressource d’image pour chacun des différents facteurs de forme et résolutions d’appareil dans lesquels l’application peut s’exécuter. Depuis la version d’iOS 8, toutefois, il est possible d’utiliser un seul storyboard unifié pour créer un écran de lancement qui semble correct dans tous les cas.

Cette brève procédure pas à pas explique comment créer un écran de lancement avec un storyboard fourni par défaut dans un nouveau projet ou avec un storyboard ajouté manuellement à un projet existant. Il montre ensuite comment utiliser le Concepteur iOS pour ajouter un affichage image et une étiquette au Storyboard, définir des contraintes sur ces vues et vérifier que le Storyboard recherche correct pour différents appareils et orientations.

Gestion des écrans de lancement avec des storyboards

Dans iOS 8 (et versions ultérieures), le développeur peut créer un storyboard unifié spécial pour fournir l’écran de lancement au lieu d’utiliser une ou plusieurs images de lancement statiques. Lors de la création d’un storyboard de lancement dans le Concepteur iOS, utilisez classes de taille et disposition automatique pour définir différentes dispositions pour différents environnements d’affichage. En utilisant les classes de taille et la disposition automatique, le développeur peut créer un seul écran de lancement qui semble correct sur tous les appareils et environnements d’affichage.

Visual Studio pour Mac

1. Dans Visual Studio pour Mac, créez un projet en sélectionnant Nouvelle solution de > fichier, puis en choisissant Application à affichage unique :

   

   • Par défaut, un nouveau projet inclut un fichier LaunchScreen.storyboard qui définit l’interface Launch Screen.
   • Pour ajouter au lieu de cela un storyboard de l’écran de lancement à un projet existant, cliquez avec le bouton droit sur le nom du projet dans le panneau Solution, puis choisissez Ajouter > un nouveau fichier... puis sélectionnez Lancer l’écran :

   

   • Nommez le fichier LaunchScreen ou un autre nom de votre choix.

2. Configurez le projet pour utiliser le Storyboard approprié pour son écran de lancement :

   • Double-cliquez sur le fichier Info.plist dans le Panneau Solution pour l’ouvrir pour modification.
   • Dans la section Lancer des images , vérifiez que l’écran de lancement est défini sur le nom du storyboard approprié :

   

   • Par défaut, un nouveau projet est configuré pour utiliser LaunchScreen.storyboard comme écran de lancement.

3. Ajoutez une image au catalogue de ressources Assets.xcassets afin qu’elle soit disponible sur l’écran de lancement. Pour plus d’informations, consultez la section Ajout d’images à un ensemble d’images de catalogue de ressources du guide d’affichage d’une image .

4. Ouvrez LaunchScreen.storyboard pour modification en double-cliquant dessus dans le Panneau Solution.

5. Choisissez un appareil et une orientation sur lesquels afficher un aperçu du storyboard de l’écran de lancement dans le Concepteur iOS. Ouvrez le panneau de sélection de l’appareil dans la barre d’outils inférieure et sélectionnez i Téléphone 4S et Portrait.

   

   • Notez que la sélection d’un appareil et de l’orientation change uniquement la façon dont le Concepteur iOS affiche un aperçu de la conception. Quelle que soit la sélection effectuée ici, les contraintes nouvellement ajoutées sont appliquées sur tous les appareils et toutes les orientations, sauf si le bouton Modifier les caractéristiques a été utilisé pour spécifier autrement.

6. Définissez la couleur d’arrière-plan de l’affichage principal du contrôleur de vue. Sélectionnez l’affichage en cliquant au milieu du contrôleur de vue et ajustez la couleur d’arrière-plan à l’aide du panneau Propriétés :

   

7. Ajoutez un affichage image à l’écran de lancement et définissez son image source :

   • Faites glisser une vue d’image du panneau Boîte à outils vers le centre de la vue.
   • Une fois l’affichage image sélectionné, dans la section Widget du panneau Propriétés, définissez la propriété Image sur l’ensemble d’images déjà ajouté au catalogue de ressources Assets.xcassets. Repositionnez et dimensionnez l’affichage image en fonction des besoins :

   

8. Ajoutez une étiquette sous l’affichageimage et utilisez le panneau Propriétés pour définir ses attributs :

   

9. Basculez vers le mode d’édition de contrainte à l’aide du bouton droit dans la barre d’outils Contraintes :

   

10. Ajoutez des contraintes à l’affichage d’image, en définissant sa hauteur et sa largeur et en la centreant horizontalement et verticalement :

    

    • Pour plus d’informations sur l’ajout de contraintes, consultez La disposition automatique avec le Concepteur Xamarin pour iOS.

11. Ajoutez des contraintes à l’étiquette, en le centreant horizontalement, en lui donnant une hauteur et une largeur, et en la positionnant verticalement à distance fixe à partir de l’affichage image :

    

12. Testez d’autres appareils et orientations pour vérifier que la conception se présente comme prévu dans tous les scénarios. Dans les cas où des ajustements doivent être effectués pour un appareil ou une orientation spécifique, utilisez le bouton Modifier les caractéristiques pour ajouter des contraintes pour des classes de taille spécifiques :

    

13. Enregistrez les modifications apportées au Storyboard. Exécutez l’application sur un simulateur ou un appareil, et l’écran de lancement sera visible à mesure que l’application démarre.

Visual Studio

1. Créer un nouveau projet. Dans Visual Studio, sélectionnez Fichier > nouveau > projet > Visual C# > i Téléphone &iPad > iOS App (Xamarin) :

   

   Sélectionnez le modèle d’application à affichage unique, puis cliquez sur OK :

   

2. Si Resources > LaunchScreen.xib existe dans le Explorateur de solutions, supprimez-le en cliquant avec le bouton droit sur le fichier et en choisissant Supprimer. Ce fichier sera remplacé par un Storyboard à l’étape suivante.

3. Créez un storyboard à utiliser comme écran de lancement. Dans le Explorateur de solutions, cliquez avec le bouton droit sur le projet, puis choisissez Ajouter > un nouvel élément... suivi de la table de montage séquentiel vide. Nommez ce Storyboard LaunchScreen.storyboard , puis cliquez sur Ajouter :

   

4. Configurez project pour utiliser LaunchScreen.storyboard comme storyboard d’écran de lancement :

   • Dans l’Explorateur de solutions, double-cliquez sur le fichier Info.plist pour l’ouvrir et le modifier.
   • Sous l’onglet Ressources visuelles , définissez l’écran de lancement sur LaunchScreen.

   

5. Ajoutez une image à un catalogue de ressources dans le projet afin qu’elle soit disponible à utiliser sur l’écran de lancement :

   • Dans le Explorateur de solutions, cliquez avec le bouton droit sur Catalogues de ressources, puis sélectionnez Ajouter un catalogue de ressources. Nommez cette nouvelle ressource de catalogue d’éléments multimédias :

   

   • Ajoutez un nouveau jeu d’images au catalogue de ressources multimédias , comme décrit dans la section Ajout d’images à un ensemble d’images de catalogue de ressources du guide d’affichage d’une image .

6. Ouvrez LaunchScreen.storyboard pour modification en double-cliquant dessus dans le Explorateur de solutions.

   • Pour modifier un fichier Storyboard, Visual Studio a besoin d’une connexion active à un hôte de build Mac. Pour plus d’informations, consultez le Connecter ing du guide Mac.

7. Choisissez un appareil et une orientation sur lesquels afficher un aperçu du storyboard de l’écran de lancement dans le Concepteur iOS. Ouvrez le panneau de sélection de l’appareil dans la barre d’outils inférieure et sélectionnez i Téléphone 4S et Portrait :

   

   • Notez que la sélection d’un appareil et de l’orientation change uniquement la façon dont le Concepteur iOS affiche un aperçu de la conception. Quelle que soit la sélection effectuée ici, les contraintes nouvellement ajoutées sont appliquées sur tous les appareils et toutes les orientations, sauf si le bouton Modifier les caractéristiques a été utilisé pour spécifier autrement.

8. Ajoutez un contrôleur de vue au storyboard en faisant glisser l’un de la boîte à outils sur l’aire de conception :

   

9. Définissez la couleur d’arrière-plan de l’affichage principal du contrôleur de vue. Sélectionnez l’affichage en cliquant au milieu du contrôleur de vue et ajustez la couleur d’arrière-plan à l’aide de la fenêtre Propriétés :

   

10. Ajoutez un affichage image à l’écran de lancement et définissez son image source :

    • Faites glisser un affichage image de la boîte à outils vers le centre de la vue.
    • Une fois l’affichage d’image toujours sélectionné, dans la section Widget de la fenêtre Propriétés, définissez la propriété Image sur l’ensemble d’images déjà ajouté au catalogue de ressources multimédias. Repositionnez et dimensionnez l’affichage image en fonction des besoins :

    

11. Ajoutez une étiquette en dessous de l’affichage image :

    • Faites glisser une étiquette de la boîte à outils sur l’aire de conception, en la plaçant sous l’affichage image.
    • Définissez des attributs pour l’étiquette à l’aide de la fenêtre Propriétés :

    

12. Basculez vers le mode d’édition de contrainte à l’aide du bouton droit dans la barre d’outils Contraintes :

    

13. Ajoutez des contraintes à l’affichage d’image, en définissant sa hauteur et sa largeur et en la centreant horizontalement et verticalement :

    

    • Pour plus d’informations sur l’ajout de contraintes, consultez Disposition automatique avec le Concepteur Xamarin pour iOS.

14. Ajoutez des contraintes à l’étiquette, en le centreant horizontalement, en lui donnant une hauteur et une largeur, et en la positionnant verticalement à distance fixe à partir de l’affichage image :

    

15. Testez d’autres appareils et orientations pour vérifier que la conception se présente comme prévu dans tous les scénarios. Dans les cas où des ajustements doivent être effectués pour un appareil ou une orientation spécifique, utilisez le bouton Modifier les caractéristiques pour ajouter des contraintes pour des classes de taille spécifiques :

    

16. Enregistrez les modifications apportées au Storyboard. Exécutez l’application sur un simulateur ou un appareil, et l’écran de lancement sera visible à mesure que l’application démarre.

Remarque

Un Storyboard utilisé comme écran de lancement doit inclure uniquement des éléments d’interface utilisateur intégrés simples et ne peut pas effectuer de calculs ou dériver d’une classe personnalisée.

Pour plus d’informations sur la création d’un écran de lancement avec un storyboard unifié, consultez la section Écrans de lancement dynamique du guide des storyboards unifiés .

Migration vers lancer des storyboards d’écran

Visual Studio pour Mac

Lors de la mise à jour d’une application existante pour utiliser des storyboards pour ses écrans de lancement, cliquez avec le bouton droit sur le nom du projet dans le Explorateur de solutions et sélectionnez Ajouter>un nouveau fichier.... Sélectionnez l’écran de lancement iOS>, puis cliquez sur le bouton Nouveau :

Ensuite, double-cliquez sur le Info.plist fichier dans le Explorateur de solutions pour l’ouvrir pour modification. Sous l’écran de lancement, sélectionnez le nouveau fichier Storyboard créé ci-dessus.

Pour utiliser le nouveau Storyboard en tant qu’écran de lancement, procédez comme suit :

1. Double-cliquez sur le Info.plist fichier dans le Explorateur de solutions pour l’ouvrir pour modification.

2. Faites défiler jusqu’à la section Images de lancement universelles de l’éditeur, ouvrez la liste déroulante Lancer l’écran et sélectionnez le nom du storyboard créé ci-dessus :

   

Visual Studio

1. Cliquez avec le bouton droit sur le nom du projet dans le Explorateur de solutions, puis sélectionnez Ajouter>un nouveau fichier... :

   

2. Entrez un nom pour l’écran de lancement, puis cliquez sur le bouton Ajouter :

   

3. Dans le Explorateur de solutions, double-cliquez sur le fichier storyboard nouvellement créé pour l’ouvrir pour modification.

4. Vérifiez que la classe De taille est définie sur any :any et la vue telle qu’elle est générique :

   

5. Assembly de l’écran de lancement à partir de classes de taille, d’éléments d’interface utilisateur simples (par exemple UIImageView) et d’images que vous avez inclus dans l’offre groupée de l’application :

   

6. Enregistrez les modifications apportées au Storyboard.

Liens associés

• Storyboards unifiés
• Principes de base du concepteur iOS
• Ajout d’images à un jeu d’images de catalogue de ressources
• Disposition automatique avec le Concepteur Xamarin pour iOS
• Instructions relatives à l’interface humaine : écran de lancement