Swift Academy · Leçon

Mesurer les sous-vues

Interrogez la taille des sous-vues pendant la mise en page.

Mesurer les sous-vues est une leçon Swift Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Swift Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Swift Academy comprend 4 leçons au total.

La mesure guide la disposition

Avant de pouvoir placer les enfants, vous devez les mesurer. La disposition SwiftUI est une négociation : le parent propose des tailles, les enfants répondent et vous rapprochez les résultats.

Demander sa taille à une sous-vue

Chaque représentant de Subviews répond à sizeThatFits(_:) pour une valeur ProposedViewSize donnée. Le représentant renvoie la taille qu'aurait cet enfant avec cette proposition.

let size = subview.sizeThatFits(.unspecified)

Les trois propositions de sondage

Pour connaître la flexibilité d'un enfant, sondez-le de trois manières : .zero révèle sa taille minimale, .infinity sa taille maximale et .unspecified sa taille idéale.

let minSize = subview.sizeThatFits(.zero)
let maxSize = subview.sizeThatFits(.infinity)
let ideal = subview.sizeThatFits(.unspecified)

Proposer une largeur précise

Pour du texte avec retour à la ligne, proposez une largeur précise et laissez la hauteur à nil. L'enfant indique la hauteur dont il a besoin pour cette largeur.

let proposal = ProposedViewSize(width: 200, height: nil)
let fit = subview.sizeThatFits(proposal)

Priorité de l’agencement

Chaque sous-vue expose une priority (définie par .layoutPriority). Lorsque l’espace est limité, accordez d’abord leur taille idéale aux enfants les plus prioritaires.

for subview in subviews {
    let p = subview.priority
    // distribute space to higher priority first
}

Lecture de valeurs personnalisées

Les sous-vues peuvent transporter des données typées via une LayoutValueKey. L’agencement lit subview[MyKey.self] pour influencer le placement, par exemple pour définir un espacement par élément.

private struct RankKey: LayoutValueKey {
    static let defaultValue: Int = 0
}
let rank = subviews[0][RankKey.self]

Définition d’une valeur d’agencement

Une vue définit sa valeur d’agencement avec le modificateur layoutValue(key:value:), ce qui permet aux enfants de communiquer des indications à votre agencement.

Text("Featured").layoutValue(key: RankKey.self, value: 10)

Espacement entre les sous-vues

Les sous-vues exposent des préférences d’spacing. Utilisez subview.spacing.distance(to:along:) pour obtenir l’gap recommandé entre deux enfants adjacents le long d’un axe.

let gap = subviews[0].spacing.distance(
    to: subviews[1].spacing, along: .horizontal)

Accumulation des tailles

Un agencement horizontal additionne les largeurs des enfants et prend la hauteur la plus élevée. Mesurer tous les enfants au préalable permet de calculer la taille du conteneur avant de placer quoi que ce soit.

let sizes = subviews.map { $0.sizeThatFits(.unspecified) }
let totalWidth = sizes.reduce(0) { $0 + $1.width }
let maxHeight = sizes.map(\.height).max() ?? 0

Nouvelle mesure pendant le placement

Dans placeSubviews, vous devez mesurer à nouveau (ou réutiliser les tailles mises en cache) afin que les positions correspondent à ce que vous avez indiqué. Les mesures sont de simples appels proxy peu coûteux, et non de véritables rendus.

func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
    for s in subviews {
        let size = s.sizeThatFits(.unspecified)
        // use size to position s
        _ = size
    }
}

Respect de la proposition du parent

Respectez toujours la proposition reçue. Si le parent propose une largeur fixe, agencez les enfants à l’intérieur de celle-ci ; ne débordez pas silencieusement, sinon l’agencement sera rogné.

let containerWidth = proposal.width ?? .infinity

Vérification rapide : mesure

Vérifiez votre compréhension de la mesure des sous-vues.

Récapitulatif : mesurer les sous-vues

La mesure est au cœur d’un agencement personnalisé. Sondez les enfants avec .zero, .infinity et .unspecified pour connaître leurs tailles minimale, maximale et idéale, proposez des largeurs concrètes pour le contenu avec retour à la ligne, et respectez la priorité d’agencement ainsi que les préférences d’espacement.

Les valeurs LayoutValueKey personnalisées permettent aux enfants de transmettre des indications. Mesurez de manière cohérente dans les deux méthodes du protocole afin que la taille indiquée et le placement concordent toujours.

Questions Fréquemment Posées

La leçon « Mesurer les sous-vues » est-elle gratuite ?

Oui — le texte complet de « Mesurer les sous-vues » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Swift Academy, passe à CoddyKit PRO. Le cours Swift Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Mesurer les sous-vues » ?

Interrogez la taille des sous-vues pendant la mise en page. Tu pratiques Swift Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Swift Academy ?

Aucune expérience préalable n'est requise. Swift Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « Mesurer les sous-vues » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Swift Academy ?

Oui. Chaque leçon Swift Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à Swift Academy