Text

Text

Les textes sont des composants utilisés pour afficher du contenu écrit dans ton interface. Que ce soit pour des titres, des sous-titres ou des descriptions, le composant Text te permet de personnaliser facilement la police, la couleur, la taille, et bien plus encore.

Création d’un composant Text

Pour créer ton composant Text, tu peux utiliser la syntaxe suivante

Text("Hello, World!")

Taille de police .font()

Le modificateur Font te permet de changer la police de ton texte. Par défaut, le texte s’affiche avec la police standard du système. Pour personnaliser ça, voici la syntaxe à utiliser

Text("Hello, World!")
    .font(.title)

Pour gérer la taille de la police, t’as deux options. La première, et la plus simple, c’est d’utiliser les polices système fournies par le framework. Ce sont celles qu’Apple utilise dans tout son écosystème, donc c’est cohérent de les choisir. En plus, elles facilitent l’accessibilité parce que le texte va s’adapter automatiquement selon les préférences de l’utilisateur, rendant ton appli plus accessible sans trop d’efforts. Voici la liste des polices système et les contextes où tu peux les utiliser

• .largeTitle  Utilisé pour les titres de grande taille, souvent dans les en-têtes des vues ou les écrans de démarrage. Très accrocheur, destiné à attirer l’attention sur une section ou une fonctionnalité principale.

• .title Style standard pour les titres. Convient bien pour les titres d’écrans ou les sections importantes. Moins imposant que .largeTitle mais toujours significatif.

• .title2 Un peu plus petit que .title, ce style est utile pour les sous-titres ou les titres de sections secondaires, offrant une hiérarchie visuelle claire.

• .title3 Le plus petit des styles de titre. Parfait pour les titres moins importants ou pour introduire des sous-sections dans vos interfaces.

• .headline Style généralement gras, utilisé pour mettre en évidence des éléments clés ou pour les titres de listes et les en-têtes de sections. Il attire l’attention sans être aussi dominant que les styles de titre.

• .subheadline Plus subtil que .headline, ce style est souvent utilisé pour les informations complémentaires ou les sous-titres qui accompagnent un .headline.

• .body Le style par défaut pour le texte courant. Il est conçu pour la majorité du texte dans une application, offrant une lisibilité optimale pour les paragraphes ou le contenu principal.

• .callout Un peu plus marquant que .body, ce style est idéal pour attirer l’attention sur une information ou un appel à l’action, sans l’accentuation d’un titre ou d’un headline.

• .caption Utilisé pour les légendes sous les images ou les graphiques, ainsi que pour les informations détaillées ou descriptives de petite taille. Moins proéminent, ce style aide à garder les interfaces propres et organisées.

• .caption2 Encore plus petit que .caption, ce style est parfait pour les détails fins ou les informations secondaires qui doivent rester discrets.

• .footnote Le plus petit style, souvent utilisé pour les notes de bas de page, les disclaimers ou les informations supplémentaires qui nécessitent une discrétion visuelle.

Text("largeTitle")
    .font(.largeTitle)
Text("title")
    .font(.title)
Text("title2")
    .font(.title2)
Text("title3")
    .font(.title3)
Text("headline")
    .font(.headline)
Text("subheadline")
    .font(.subheadline)
Text("body")
    .font(.body)
Text("callout")
    .font(.callout)
Text("caption")
    .font(.caption)
Text("caption2")
    .font(.caption2)
Text("footnote")
    .font(.footnote)

Si jamais les polices système ne te conviennent pas, tu peux définir une taille manuellement avec .font(.system(size: 70)). Par contre, garde en tête que la taille sera fixe, ce qui rendra la gestion de l’accessibilité un peu plus complexe.

Text("Hello, World!")
  .font(.system(size: 70))

Poids des polices .fontWeight()

Tu peux ajuster le poids de la police avec le modificateur <strong><span style="color: #1f1f24;">.fontWeight()</span></strong>, qui accepte différents niveaux selon l’impact que tu veux donner à ton texte. Voici les options disponibles :

• .ultraLight Très fin.
• .thin Fin.
• .light Léger.
• .regular Le poids normal ou régulier de la police.
• .medium Moyennement épais.
• .semibold Un peu plus épais que le medium.
• .bold Gras.
• .heavy Très épais.
• .black Extrêmement épais.

Text("ultraLight")
    .font(.title)
    .fontWeight(.ultraLight)
Text("thin")
    .font(.title)
    .fontWeight(.thin)
Text("light")
    .font(.title)
    .fontWeight(.light)
Text("regular")
    .font(.title)
    .fontWeight(.regular)
Text("medium")
    .font(.title)
    .fontWeight(.medium)
Text("semibold")
    .font(.title)
    .fontWeight(.semibold)
Text("bold")
    .font(.title)
    .fontWeight(.bold)
Text("heavy")
    .font(.title)
    .fontWeight(.heavy)
Text("black")
    .font(.title)
    .fontWeight(.black)

Couleur du texte .forgroundStyle()

Le modificateur .foregroundStyle() te permet de changer la couleur de ton texte. Par défaut, le texte s’affiche avec la couleur standard du système. Pour personnaliser ça, utilise la syntaxe suivante :

Text("Texte")
    .foregroundStyle(.blue)

Alignement du texte .multilineTextAlignment()

Le modificateur .multilineTextAlignment() est utilisé pour changer l’alignement du texte. Il prend en compte les trois axes habituel .leading, .center et .trailing

Text("La Communauté de l'AnneauL'histoire commence avec Frodon Sacquet, un Hobbit de la Comté, qui hérite de l'Anneau Unique de son oncle Bilbon. Gandalf le Magicien révèle à Frodon la véritable nature de l'anneau et le danger qu'il représente. Frodon doit alors quitter la Comté et se rendre à Fondcombe avec l'aide de ses amis Sam, Merry et Pippin. En cours de route, ils sont rejoints par Aragorn, un Rôdeur. À Fondcombe, sous la direction d'Elrond, une communauté est formée pour aider Frodon à détruire l'anneau en le jetant dans les feux du Mont du Destin en Mordor")
      .multilineTextAlignment(.trailing)

Nombre de lignes .lineLimit()

Le modificateur LineLimit te permet de limiter le nombre de lignes de texte affichées. Pour définir une limite, tu peux utiliser la syntaxe suivante

Text("La Communauté de l'AnneauL'histoire commence avec Frodon Sacquet, un Hobbit de la Comté, qui hérite de l'Anneau Unique de son oncle Bilbon. Gandalf le Magicien révèle à Frodon la véritable nature de l'anneau et le danger qu'il représente. Frodon doit alors quitter la Comté et se rendre à Fondcombe avec l'aide de ses amis Sam, Merry et Pippin. En cours de route, ils sont rejoints par Aragorn, un Rôdeur. À Fondcombe, sous la direction d'Elrond, une communauté est formée pour aider Frodon à détruire l'anneau en le jetant dans les feux du Mont du Destin en Mordor")
	.lineLimit(4)  

Espacement entre les lettres .kerning()

Text("La Communauté de l'Anneau")
  .kerning(5)

Majuscule – Minuscule .textCase()

.textCase permet de gérer la case, deux option sont possible .uppercase (tout en majuscule) .lowercase (tout en minuscule)

Text("La Communauté de l'Anneau")
  .textCase(.uppercase)

Espacement entre les lignes .lineSpacing()

Text("La Communauté de l'AnneauL'histoire commence avec Frodon Sacquet, un Hobbit de la Comté, qui hérite de l'Anneau Unique de son oncle Bilbon. Gandalf le Magicien révèle à Frodon la véritable nature de l'anneau et le danger qu'il représente. Frodon doit alors quitter la Comté et se rendre à Fondcombe avec l'aide de ses amis Sam, Merry et Pippin. En cours de route, ils sont rejoints par Aragorn, un Rôdeur. À Fondcombe, sous la direction d'Elrond, une communauté est formée pour aider Frodon à détruire l'anneau en le jetant dans les feux du Mont du Destin en Mordor")
	.lineSpacing(10)

Formatage de texte en Markdown

SwiftUI gère le formatage de texte en Markdown directement dans le composant Text. Ça veut dire que tu peux utiliser la syntaxe Markdown pour formater ton texte, y compris les styles gras, italique, les liens, et bien plus encore, directement dans tes chaînes de texte. Pour en savoir plus sur la syntaxe Markdown, c’est par ici

Text("**La Communauté de l'Anneau** L'histoire commence avec *Frodon Sacquet*, un Hobbit de la Comté, qui hérite de l'Anneau Unique de son oncle *Bilbon*. *Gandalf* le Magicien révèle à Frodon la véritable nature de l'anneau et le danger qu'il représente.")

Etirer ou compresser le texte .fontWidth()

VStack {
    Text("expanded")
        .fontWidth(.expanded)
    Text("standard")
        .fontWidth(.standard)
    Text("condensed")
        .fontWidth(.condensed)
    Text("compressed")
        .fontWidth(.compressed)
}
.font(.largeTitle)