iOS 9: Premiers pas avec UIStackView

Comme chaque itération d’iOS, iOS 9 apporte de nombreuses nouvelles fonctionnalités. UIKit change avec chaque version d’iOS, mais un ajout particulier dans iOS 9 changera la façon dont les développeurs pensent fondamentalement à la création d’interfaces utilisateur sur iOS, UIStackView. Dans ce didacticiel, vous apprendrez à utiliser UIStackView pour créer des interfaces utilisateur.

Cet article suppose que vous êtes familiarisé avec les bases de la disposition automatique. Si ce sujet est nouveau pour vous, alors notre tutoriel d’introduction sur la mise en page automatique est un bon point de départ. Pour comprendre pourquoi les vues de pile sont si utiles et comment elles fonctionnent, une solide compréhension de la disposition automatique est nécessaire.

1. Aperçu de la démo

En utilisant UIStackView, nous allons créer un écran simulé qui invite l’utilisateur à laisser une note pour son application. L’utilisateur peut ajouter ou supprimer des étoiles dans l’interface utilisateur pour indiquer sa note. Cela ressemblera à ceci lorsque nous aurons terminé.

Voici à quoi ressemblera le résultat

Téléchargez le projet de démarrage depuis GitHub et ouvrez-le. Vous verrez qu’il y a deux vues de pile à l’intérieur Main.Storyboard.

Ceci est le storyboard du projet de démarrage

Nous utiliserons les deux vues de pile pour mettre en page l’interface utilisateur. Avant de commencer à coder, examinons d’abord brièvement le fonctionnement d’une vue de pile.

2. UIStackView Aperçu

À la base, la vue de pile est une interface permettant de disposer plusieurs sous-vues, verticalement ou horizontalement. Si vous avez une expérience de développement Android, c’est similaire à la LinearLayout contrôle.

L’un des principaux avantages de la vue de pile est qu’elle crée automatiquement des contraintes de mise en page automatique pour chaque sous-vue qui y est ajoutée. Vous avez également un contrôle limité sur la taille et le positionnement de ces sous-vues. Il existe des options pour configurer le dimensionnement des vues, l’endroit où elles doivent être disposées, ainsi que le niveau de remplissage entre les sous-vues.

Mise en page du contenu

Pour voir les options d’une vue de pile, ouvrez Main.Storyboard et sélectionnez l’une des vues de pile. dans le Inspecteur d’attributs, notez les options répertoriées sous Vue de la pile.

Les options d'une vue de pile

le Axe détermine si la vue de pile organise ses sous-vues horizontalement ou verticalement. le Alignement contrôle la manière dont les sous-vues réelles doivent être alignées. Distribution définit la taille des sous-vues et Espacement contrôle l’espacement minimum entre les sous-vues de la vue de pile.

Pour simplifier ces termes, pensez-y comme ceci. Alignorer contrôle le X et Oui valeurs tandis que Distribution contrôles la taille et largeur. Les deux autres valeurs peuvent également affecter l’alignement. Référence relative, si coché, dérivera l’espacement vertical de chaque sous-vue à partir de sa ligne de base. Marges de mise en page relatives place les sous-vues par rapport aux marges de mise en page standard si cette option est sélectionnée.

Une autre chose importante à retenir lorsque vous travaillez avec une vue de pile est qu’elle est conçue pour être une vue de conteneur. À cause de cela, c’est un non rendu sous-classe de UIView. Ce n’est pas dessiner sur la toile comme les autres UIView sous-classes. Cela signifie que la définition de propriétés telles que backgroundColor ou outrepasser le drawRect: n’aura aucun effet sur la vue de la pile.

subviews et arrangedSubviews

Avant de commencer à travailler avec des vues de pile, j’aimerais me concentrer sur la différence entre une vue de pile subViews et arrangedSubviews Propriétés. Si vous souhaitez ajouter une sous-vue à gérer pour la vue de pile, vous le faites en appelant addArrangedSubview: ou insertArrangedSubview:atIndex:. le arrangedSubViews array est un sous-ensemble de son subViews propriété.

En relation :  11 jeux mobiles amusants lorsque vous n'avez ni Internet ni données

Pour supprimer une sous-vue gérée par la vue de pile, vous devez appeler tous les deux removeArrangedSubview: et removeFromSuperview. La suppression d’une sous-vue organisée garantit que la vue de pile ne gérera plus les contraintes de cette vue. Cela ne le supprime pas de la hiérarchie des vues. Il est très important de se souvenir de cela.

Maintenant que nous avons une solide compréhension du fonctionnement de la vue de pile, commençons à utiliser une vue de pile.

3. Configuration de la vue de pile verticale

Ouvert Main.Storyboard et sélectionnez la vue de la pile supérieure. dans le Inspecteur d’attributs, apportez les modifications suivantes:

  • ensemble Alignement à Centre
  • ensemble Distribution à Espacement égal
  • ensemble Espacement à 30

Cela indiquera à la vue de pile d’essayer d’ajouter des contraintes qui centrent toutes les sous-vues verticalement et de les dimensionner afin qu’elles remplissent l’axe de la vue de pile uniformément. De plus, cela ajoutera 30 points de remplissage aux sous-vues.

Si les sous-vues ne peuvent pas s’adapter à la vue de pile, elles les rétréciront en fonction de leurs priorités de résistance à la compression respectives. Cela peut se produire si vous ajoutez des sous-vues à la vue de la pile au moment de l’exécution, comme nous le verrons plus tard.

En cas d’ambiguïté, la vue de la pile reviendra à la réduction des sous-vues en fonction de leur index dans son arrangedSubviews tableau jusqu’à ce qu’ils correspondent aux limites de la vue de pile.

4. Ajout de sous-vues de pile verticale

Ajoutez une étiquette, une vue d’image et un bouton à la vue supérieure de la pile en les faisant glisser dans le contour du document. Assurez-vous que l’étiquette est en haut, la vue de l’image au milieu et le bouton en bas. Le plan du document du storyboard devrait ressembler à ceci une fois que vous avez ajouté ces sous-vues:

Ajout de sous-vues à la vue supérieure de la pile

Ensuite, nous devrons modifier certaines des propriétés des sous-vues que nous venons d’ajouter, en utilisant le Inspecteur d’attributs. Pour l’étiquette, changez son Texte “Comment aimez-vous notre application?” et sélectionnez Centre pour Alignement du texte. Quant à la vue de l’image, entrez “logo” pour le Image et UNESpect Fit pour le Mode contenu. Pour le bouton, définissez son Texte à “Ajouter une étoile!”.

Allez-y et exécutez l’application. Vous verrez qu’avec très peu de travail, vous avez ajouté trois sous-vues qui répondent à tout changement d’orientation, de classe de taille, etc. En fait, vous n’avez même pas eu à ajouter manuellement de contraintes.

Pendant que l’application est en cours d’exécution, cliquez sur le bouton Hiérarchie des vues de débogage en bas de la fenêtre Xcode pour lancer le débogage de la vue en direct.

Débogage de l'affichage en direct dans Xcode

Sélectionnez l’une des trois sous-vues que vous avez ajoutées précédemment. Regardez l’inspecteur de taille et notez les contraintes qui ont été ajoutées par la vue de pile. L’image ci-dessous montre les contraintes ajoutées pour le bouton.

Les contraintes de mise en page automatique du bouton des vues de pile

5. Ajouter des étoiles

Le bouton pour ajouter des étoiles pour notre application fictive n’est pas encore connecté. Corrigeons ça maintenant. Arrêtez l’application et ouvrez le storyboard. Créé un IBAction avec un nom addStar pour le Retouche à l’intérieur un événement.

Ajouter une IBAction

Ajoutez le code suivant dans le addStar(_:) méthode:

Nous ajoutons une image d’étoile à la vue de pile horizontale avec une animation. N’oubliez pas, puisque les vues de pile gèrent les contraintes de mise en page automatique pour nous, il suffit d’appeler layoutIfNeeded pour créer une animation.

En relation :  OK, Google: 20 choses utiles que vous pouvez dire sur votre téléphone Android

Créez et exécutez à nouveau l’application et ajoutez une étoile. Vous verrez que le résultat final n’est pas ce que nous espérions.

Ce n'est pas ce que nous espérions

Si vous regardez le Inspecteur d’attributs avec la vue inférieure de la pile sélectionnée, le problème devrait être clair. Puisque les deux Alignement et Distribution sont réglés sur Remplir, la vue de pile étire l’étoile pour remplir ses limites.

Cela causera également plus de problèmes lorsque plus d’étoiles sont ajoutées. Nous voulons que les étoiles soient centrées et non étirées pour s’adapter à la largeur de la vue de la pile. Changement Alignement à Centre et Distribution à Remplir de manière égale. Enfin, mettez à jour le addStar(_:) méthode en définissant la vue de l’image Mode contenu à Aspect Fit.

Générez et exécutez l’application une fois de plus. Ajoutez quelques étoiles et remarquez comment la vue de pile les centre correctement le long de son axe.

Cela semble beaucoup mieux

6. Vues de la pile d’imbrication

Notre application ne serait pas très utile sans la possibilité de supprimer les étoiles. Ouvrez le storyboard et ajoutez un horizontal vue de la pile à la hiérarchie des vues de la vue de la pile supérieure. Assurez-vous qu’il est positionné sous la vue de l’image pour le logo et au-dessus du bouton.

Ajout d'une vue de pile à une autre vue de pile

Faites glisser le “Ajouter une étoile!” bouton à l’intérieur de la vue de pile nouvellement ajoutée et ajoutez un deuxième bouton à la nouvelle vue de pile. Changez le titre du bouton en “Supprimer l’étoile” et sélectionnez le rouge pour la couleur du texte. Le plan du document devrait maintenant ressembler à ceci:

La nouvelle vue de pile contient deux boutons

Modifiez les attributs de la nouvelle vue de pile dans le Inspecteur d’attributs, apporter les modifications suivantes:

  • ensemble Alignement à Centre
  • ensemble Distribution à Espacement égal
  • ensemble Espacement à dix
Ajuster les attributs de la nouvelle vue de pile

sept. Supprimer les étoiles

Créé un IBAction pour le bouton “Supprimer l’étoile” avec le nom removeStar pour le Retouche à l’intérieur un événement.

Créer une action pour le bouton removeStar

Ajoutez le code suivant au removeAction(_:) méthode:

Créez et exécutez l’application. Vous devriez maintenant pouvoir à la fois ajouter et supprimer des étoiles. Modifiez l’orientation du simulateur iOS ou faites pivoter votre appareil de test pour voir comment l’application se comporte en ajustant son interface utilisateur. N’oubliez pas que nous avons créé l’interface utilisateur de cette application sans avoir à ajouter manuellement une seule contrainte.

Gardez à l’esprit que le removeFromSuperview appeler le removeStar(_:) est essentielle pour supprimer la sous-vue de la hiérarchie des vues. Rappeler que removeArrangedSubview(_:) indique seulement à la vue de pile qu’elle n’a plus besoin de gérer les contraintes de la sous-vue. La sous-vue, cependant, reste dans la hiérarchie des vues jusqu’à ce que nous la supprimions de sa vue en appelant removeFromSuperview dessus.

Conclusion

le UIStackView class simplifie considérablement le développement des interfaces utilisateur. C’est une bonne chose, surtout lorsque le matériel sur lequel l’application s’exécute peut varier énormément. Avec UIStackView, les développeurs peuvent passer moins de temps à mettre en place des contraintes fastidieuses pour des scénarios simples, en déplaçant le gros du travail vers UIKit.

Si vous êtes resté bloqué à tout moment pendant ce didacticiel, n’hésitez pas à télécharger le projet terminé à partir de GitHub.

Moyens Staff
Moyens I/O Staff vous a motivé, donner des conseils sur la technologie, le développement personnel, le style de vie et des stratégies qui vous aider.