Lancer des écrans pour les applications Xamarin.iOS

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’affichage image 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.

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.

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 :

   

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.