MEILLEUR GUIDE: Storyboard pour le développement iOS

Les storyboards ont été présentés pour la première fois aux développeurs dans la sortie d’iOS 5. Ils évitent au développeur d’avoir à concevoir l’interface de chaque écran dans un fichier différent. Le storyboard vous permet de voir la maquette conceptuelle de votre application dans son ensemble et les interactions entre chaque écran. À l’aide de segues, vous pouvez définir la manière dont l’application effectuera la transition entre les écrans donnés et transmettra les données. Dans ce tutoriel, je vais vous montrer comment créer un écran de connexion simple pour une application.

Commencer

La première chose que vous allez vouloir faire est de créer un nouveau projet. Vous voudrez une nouvelle application à écran unique définissant la langue sur Swift et les appareils sur universel. Si vous accédez au storyboard, vous devriez voir une scène de contrôleur de vue vide. La flèche sur le côté gauche du contrôleur de vue indique qu’il s’agit du contrôleur racine.

storyboard

Pour ajouter des étiquettes pour le nom d’utilisateur et le mot de passe, vous devez aller dans la boîte en bas à droite de votre écran, sélectionner le cercle avec un carré, et faire glisser et déposer deux étiquettes sur votre vue. En choisissant les préférences sur la barre latérale, vous pouvez spécifier de nombreux paramètres importants. Il y en a trop, mais la plupart sont explicites.

storyboard2

Les deux plus importants pour nous sont le texte d’espace réservé et la case à cocher de saisie de texte sécurisée. Nous souhaitons utiliser un texte d’espace réservé pour informer l’utilisateur des informations dont il a besoin et une entrée sécurisée pour masquer l’affichage du mot de passe de l’utilisateur. Une fois que cela est fait, nous avons besoin d’un bouton pour déclencher notre segue. Nous pouvons en faire glisser un de la même manière que nous avons fait un champ de texte. Une fois que vous avez donné un titre au bouton et organisé vos objets à l’écran, cela devrait ressembler à ceci:

storyboard3

Notre premier écran de l’application est maintenant terminé, nous devons donc en créer un autre vers lequel effectuer la transition. Pour ce faire, faites glisser sur l’écran un deuxième contrôleur de vue. Pour connecter les deux écrans, vous devez faire deux choses. Vous devrez d’abord contrôler le clic sur le bouton et le faire glisser vers le nouvel écran que vous avez ajouté. Ensuite, vous devrez sélectionner le cercle entre les deux vues. Vous devrez ensuite changer l’identifiant en segue; pour cet exemple, j’utiliserai “nextScreen”

storyboard4

Enfin, nous mettrons une étiquette sur le nouvel écran afin que nous puissions voir l’utilisateur et voir si notre application fonctionne. Afin de pouvoir accéder aux champs à partir du storyboard par programme, nous devrons créer des points de vente pour eux dans la classe qui les utilise comme ceci:

classe FirstScreen: UIViewController {

@IBOutlet faible nom d’utilisateur var: UITextField!
@IBAction func loginButton (expéditeur: AnyObject) {
perfromSegueWithIdentifier (“nextScreen”, expéditeur: self)
}
}

classe SecondScreen: UIViewController {
utilisateur var: String!
@IBOutlet faible nom d’utilisateur var: UILabel!

remplacer la fonction viewDidload () {
username.text = utilisateur
}
}

Une fois que cela est fait, assurez-vous de lier les objets du storyboard à l’aide de l’inspecteur de connexions de chaque écran. Vos points de vente devraient apparaître et vous pouvez cliquer sur le cercle à leur droite pour les lier.

storyboard5
La dernière fonction à implémenter est la fonction prepareForSegue dans la classe du premier écran. Cela vous permet de transmettre des données à la nouvelle vue comme suit:

override fun prepareForSegue (segue: UIStoryboardSegue, expéditeur: AnyObject?) {
if segue.identifier == “nextScreen” {
laissez destVC = segue.destinationViewController comme UIViewController
destVC.user = self.username
}
}

Vous avez maintenant une compréhension de base de la façon de changer d’écran et de transmettre des données entre eux. Cela vous donnera un bon départ pour créer des applications fonctionnelles, bonne programmation!

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *