Développez votre première application pour iOS

Samira est de nouveau disponible pour faire du pair programming et vous aider maintenant à personnaliser vos composants pour qu’ils ressemblent à ce que l’on voit sur les maquettes.

C’est parti !

Customisez vos images

Commençons par le premier élément de notre page, l’image. Depuis tout à l’heure c’est toujours ce petit globe qui ne ressemble absolument pas à Hedy Lamarr !

Je vous montre comment faire en vidéo :

Voici les étapes de ce qu’il y a à faire :

Ajoutez une image au projet

1. Ajoutez la véritable image en la téléchargeant ici.

2. Puis allez dans le fichier qui se nomme Assets. En bas à gauche il y a un petit +, cliquez dessus puis sélectionnez Import. Vous n’avez plus qu'à la chercher dans vos téléchargements ou là où vous l’avez mise et appuyer sur Open.

3. Ensuite, sur le panneau de droite, dans l’onglet de customisation, il y a un champ “Scales”. Sélectionnez “Single scale”, car nous n’avons qu’un seul format pour cette image.

4. Vérifiez que le nom de l’image est bien “Hedy” sinon il faut la renommer.

Adaptez l’image

1. Changez l’image pour avoir  Image("Hedy")  .

2. Supprimez les options appliquées à l’image.

3. Remplacez-les par  .resizable()  .

4. Ajoutez un ratio avec .aspectRatio(contentMode:.fit).

5. Et enfin, donnez une taille à l’image avec .frame(width: 400).

Ah ! C’est quand même mieux non ?

Passons aux textes !

Customisez vos textes

Continuons en vidéo pour customiser les composants  Text  :

La police

• La méthode .font() permet de changer la police d’un composant Text. 

• Appliquez .font(.title) au composant texte d’Hedy Lamarr pour le mettre en forme avec une des polices préformatées par Apple.

• Sinon il y a .font(.system()) pour être plus précis.

• Ajoutez .fontWeight(.bold) ou .bold() pour mettre en gras le nom d’Hedy.

La couleur

• Pour ce qui est des couleurs, il existe la méthode .foregroundStyle().

• Pour utiliser vos propres couleurs il faut aller dans Assets puis cliquez sur le + en bas, comme pour ajouter une nouvelle photo, vous avez l’option “Color set”.

• Cliquez dessus pour ajouter une nouvelle couleur à votre projet que vous appellerez DarkGrey et qui aura pour code hexadécimal #333333. Ce code est ce qui permet d’obtenir la couleur exacte que l’on souhaite, compréhensible par un ordinateur.

• Ajoutez .foregroundStyle(.darkGrey) aux composants Text des dates d’Hedy.

• Pour changer la couleur de fond de “Télécommunication", c’est .background(.purple) qui va vous aider.

• Sans oublier de changer la couleur de la police en blanc avec .foregroundStyle(.white).

En complétant chacune des polices avec la bonne taille et la bonne couleur, vous obtenez ceci.

C’est pas mal mais ce n’est pas encore parfait !

Un peu de patience, nous avons presque fini !

Customisez vos View

Il y a des customisations qui sont uniquement pour les images, d’autres uniquement pour les textes et d’autres qui fonctionnent avec tous les types de composants ou presque. Changer la forme ou faire des arrondis en fait partie.

Reprenons notre champ texte “Télécommunications”. Le fond est bien de la bonne couleur mais pas de la bonne forme.

Voyons cela ensemble :

RoundedRectangle

• Pour obtenir le fond violet arrondi, il vous faut remplacer le fond par un rectangle arrondi rempli en violet : .background(RoundedRectangle(cornerRadius: 10).fill(.purple)).

• Pour ne pas qu’il colle au texte, ajoutez un padding.

Stroke

• Utilisez ici aussi .background(RoundedRectangle(cornerRadius: 10)).

• En revanche, il ne faut pas le remplir mais dessiner une ligne avec .stroke(.purple, lineWidth: 2)).

• Sans oublier le padding ici aussi.

Geometry Reader

• Pour qu’une image ou une vue change de largeur en fonction de la taille de l'écran, il ne faut pas fixer la valeur de la largeur. Elle risque d'être trop grande ou trop petite.

• Utilisez Geometry Reader pour récupérer la valeur de la largeur de l'écran afin d’adapter la frame de la vue.

• Il s’utilise comme ceci en l’ajoutant à la racine du body :

GeometryReader { geometry in
VStack {
Image("Hedy")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: geometry.size.width)
// Reste du code
    }
}

Je ne sais pas vous, mais moi je suis fière de ce vous avez réussi à reproduire ! Bravo 🤩 !

À vous de jouer

Contexte

Encore un pair programming très intéressant, mais Samira doit repartir avancer sur ses tickets de développement. À vous de continuer sur la même lancée sur le ticket du POC 2 qui consiste à faire la même chose que ce que vous venez de faire mais avec une nouvelle maquette :

Pour les pictogrammes, vous les trouverez dans les SF Symbols au nom de :

• calendar

• bookmark

• mappin.and.ellipse

Pour les couleurs :

• noir d’apple (.black)

• violet d’apple (.purple)

Ah vous venez de recevoir un message de Samira !

Je vois que tu te débrouilles très bien ! Tu vas pouvoir faire la même customisation pour l'écran de détail du deuxième POC vu que tes composants étaient bien positionnés. N'hésite pas à t'inspirer de ce qu’on vient de faire ensemble, voire de faire des copier-coller si besoin. Ne cherche pas à réinventer la roue !

Concrètement, vous devez finir de reproduire la maquette du POC 2 au-dessus.

Pour cela il vous suffit de customiser les composants que vous avez déjà placés sur la page afin qu’ils ressemblent à ce qui est demandé.

Consignes

Commencez par :

1. ajoutez l’image d’Hedy que vous pouvez télécharger ici

2. utiliser GeometryReader pour votre image

3. adapter l’image en fonction de la taille de l'écran

4. adapter les tailles et couleurs des fonts de la page

5. ajouter les fonds violets pour Télécommunications et Ingénierie aéronautique

6. ajouter une frame pour chacune des stacks du milieu en respectant la taille calculée grâce à GeometryReader

7. ajouter un padding de 8 pour chacune des stacks

8. ajouter une ligne violette en fond pour entourer les 3 stacks une à une

En résumé

• Pour redimensionner une image, on commence toujours par  .resizable()

• .frame()  permet de donner à un composant la taille qu’on désire

• Il existe des fonts pré-établies par Apple

• Le fichier Assets permet d’ajouter des images et des couleurs de notre choix au projet  

• GeometryReader permet de connaître les dimensions de l'écran afin d’adapter les tailles des composants en conséquence.

Beau travail car ce n'était pas une mince affaire !

Maintenant que votre écran ressemble bien aux maquettes, nous allons pouvoir tester son rendu sur un vrai téléphone (ou presque !) dans le chapitre suivant.