Développez une application iPhone avec le modèle MVC

Notre modèle est désormais tout beau tout propre ! Mais notre application semble toujours vierge lorsqu'on la lance ! Rassurez-vous, dans cette partie, nous allons nous occuper de la vue !

Pour la remplir, il nous faut savoir quoi mettre de dedans. Et dedans, nous allons mettre exclusivement des UIView ! Vous ne savez pas que c'est ? Vous ne pourrez plus le dire à la fin de chapitre !

Qu'est-ce que UIView ?

UIView, c'est la classe qui permet de définir une vue.

Une vue, c'est une zone rectangulaire qui a deux missions :

• Afficher des choses

• Répondre à des gestes

Donc comme vous pouvez le constater, c'est très générique ! Ça n'a pas l'air bien puissant comme ça. Mais sachez que tout ce que vous voyez à l'écran dans n'importe quel page de n'importe qu'elle application iOS est une instance d'UIView.

Eh oui ! Et ce, grâce à l'héritage. Prenons l'exemple d'un bouton. Les boutons en iOS sont définis avec une classe qui s'appelle UIButton. Cette classe comme toute celle que je vais vous présenter dans le prochain chapitre hérite de UIView. Donc elles disposent toutes de la logique présentent dans UIView, notamment le placement, l'affichage et la réponse aux gestes. Donc un indirectement, un bouton c'est une UIView.

La hiérarchie des vues

Comme les dossiers sur votre ordinateur, les vues ont une hiérarchie (on parle en anglais de view hierarchy). Cela veut dire qu'une vue, c'est comme un dossier. Elle peut contenir d'autres vues et elle peut-elle même être contenue dans une vue parente.

Exemple

Le meilleur moyen de bien comprendre ça, c'est d'essayer ! Ouvrez votre fichier Main.storyboard. Nous allons jouer un peu avec interface builder. Dans la bibliothèque des composants, choisissez l'objet UIView et glissez en quelques-uns dans votre interface.

De mon côté, j'ai composé mon interface comme ceci :

J'ai plusieurs vues qui sont les unes à côté des autres ou les unes dans les autres. Sur la gauche, vous pouvez voir la hiérarchie des vues. Je vous la montre ici également :

On a donc une vue principale qui a 4 sous vues :

• La vue verte n'a pas de sous-vue

• La vue rouge a 2 sous-vues blanches

• La vue bleu clair a une sous-vue blanche

• La vue bleu foncé a une sous-vue grise qui a elle-même une sous-vue blanche

En glissant les vues les unes dans les autres, vous créez votre hiérarchie. Pour des interfaces complexes qui peuvent compter une vingtaine de vues différentes, il est important de bien organiser votre hiérarchie pour vous y retrouver !

La vue principale

Vous avez noté dans l'exemple précédent que notre interface contenait déjà une vue : le grand rectangle blanc vertical.

En iOS, une page d'une application correspond (presque) toujours à un UIViewController. Cette classe (que nous verrons en détail dans la prochaine partie) a une propriété var view: UIView qui constitue la vue principale de votre interface.

Cela veut dire que toutes les vues que vous allez rajouter sont des descendantes de la vue principale de votre contrôleur. Elles sont toutes contenues dedans. C'est la racine de votre hiérarchie de vues.

Et le code ?

La plupart du temps, vous créerez vos vues directement avec Interface Builder. Mais il peut arriver que vous souhaitiez manipuler la hiérarchie de vos vues dans le code. Pour cela, la classe UIView a deux propriétés et deux méthodes à connaitre :

// Propriétés
var superview: UIView
var subviews: [UIView]

// Méthodes
func addSubview(_ view: UIView)
func removeFromSuperview()

La propriété superview permet d'accéder à la vue parente. Et la propriété subviews permet d'accéder au tableau des sous-vues.

Prenons un exemple pour les méthodes, mettons que j'ai une vue myView et un bouton myButton. Si je veux que le bouton soit inclus dans la vue, je fais ceci :

myView.addSubview(myButton)

Ensuite, si je souhaite retirer le bouton de la hiérarchie, j'écris :

myButton.removeFromSuperview()

Et le bouton ne sera plus visible à l'écran.

Pour votre information, je vous mentionne ici quelques autres méthodes qui pourront vous être utiles pour gérer la hiérarchie de vos vues :

func insertSubview(_ view: UIView, belowSubview siblingSubview: UIView)
func insertSubview(_ view: UIView, aboveSubview siblingSubview: UIView)
func bringSubview(toFront view: UIView)
func sendSubview(toBack view: UIView)

En résumé

• Une UIView est une zone rectangulaire qui permet d'afficher des choses et de répondre à des gestes.

• Tous les composants d'une interface héritent de la classe UIView.

• Les vues dans une interface sont organisées selon une hiérarchie comme des dossiers. En particulier une vue peut avoir une vue parente et des sous-vues. Dans le code, on manipule la hiérarchie avec les propriétés et méthodes de UIView suivantes :

var superview: UIView
var subviews: [UIView]
func addSubview(_ view: UIView)
func removeFromSuperview()