iOS Taille intrinsèque UILabel


Exemple

Nous devons créer une vue qui aura un préfixe d'image pour un texte. le texte peut être de longueur variable. Nous devons obtenir un résultat où Image + texte est toujours au centre d'une vue parent.

entrer la description de l'image ici

Etape 1: Créez d'abord un projet de vue unique et nommez-le comme vous le souhaitez et ouvrez la première vue du storyboard. Faites glisser une vue de taille raisonnable et définissez sa couleur d'arrière-plan sur jaune. vue devrait ressembler à quelque chose comme ça

entrer la description de l'image ici

Etape 2: Maintenant, nous allons ajouter des contraintes à la vue jaune. Pour commencer, nous allons ajouter des contraintes de largeur et de hauteur (Attendez une minute, n’avons-nous pas dit que cette vue aura une largeur dynamique? Ok, nous y reviendrons plus tard) les contraintes suivantes, comme dans l'image ci-dessous, ne se soucient pas de la valeur de largeur. Toute valeur est juste suffisante pour la largeur. Gardez-la juste assez grande pour que nous puissions ajouter des mises en page automatiques correctement.

entrer la description de l'image ici

Après avoir ajouté ces deux contraintes, vous verrez que XCode vous donne des erreurs, car l'image ci-dessous permet de les voir et de les comprendre. entrer la description de l'image ici

Nous avons deux erreurs (rouge signifie erreur) Comme indiqué ci-dessus, revisitons la partie ambiguïté

Contraintes manquantes: Contraintes nécessaires pour: Position X: - Comme indiqué ci-dessus, nous avons donné à la vue une largeur et une hauteur pour que ses «BOUNDS» soient définis, mais nous n'avons pas donné son origine pour que son «FRAME» ne soit pas défini. Autolayout n'est pas en mesure de déterminer quelle sera la position X de notre vue jaune

Contraintes manquantes: Contraintes nécessaires pour: Position Y: - Comme nous l'avons vu plus haut, nous avons donné à la vue une largeur et une hauteur afin de définir ses «BOUNDS», mais nous n'avons pas défini son origine. Autolayout n'est pas en mesure de déterminer quelle sera la position Y de notre vue jaune. Pour résoudre ce problème, nous devons attribuer à autolayout des fonctions de résolution X et Y. Comme nous ne pouvons pas définir de cadres, nous les ferons automatiquement. image ci-dessous, je l'expliquerai plus tard

entrer la description de l'image ici

Ce que nous avons fait, c’est que nous avons ajouté un «centre vertical» et un «centre horizontal». Ces contraintes indiquent à autolayout que notre vue jaune sera toujours au centre. Horizontalement: X est déterminé avec la contrainte verticale et Y déterminé. pourrait avoir à ajuster le cadre).

Étape 3: Notre vue jaune de base est maintenant prête. Nous allons ajouter l'image de préfixe comme sous-vue de notre vue jaune avec les contraintes suivantes. Vous pouvez choisir n'importe quelle image de votre choix.

entrer la description de l'image ici

Comme nous avons une dimension fixe pour notre image de préfixe, nous aurons une hauteur de largeur fixe pour cette image. Ajoutez les contraintes et passez à l'étape suivante.

Etape 4: Ajoutez un UILabel comme sous-vue de notre vue jaune et ajoutez les contraintes suivantes

entrer la description de l'image ici

Comme vous pouvez le voir, j'ai donné seulement des contraintes relatives à notre UILabel.Son 8 points de l'image de préfixe et 0,0,0 en haut et en bas de la vue jaune.Comme nous voulons que la largeur soit dynamique, nous ne donnerons pas de contraintes de largeur ou de hauteur .

Q: Pourquoi nous ne recevons aucune erreur maintenant, nous n'avons pas donné de largeur et de hauteur? Réponse: - Nous obtenons une erreur ou un avertissement uniquement lorsque la mise en page automatique n'est pas en mesure de résoudre quelque chose qui est nécessaire pour rendre une vue à l'écran.Avec sa hauteur, sa largeur ou son origine. est bien défini autolayout est capable de calculer le cadre de notre étiquette.

Etape 5: Maintenant, si nous nous rappelons, nous nous rendrons compte que nous avons donné une vue fixe à la vue jaune mais nous voulons qu’elle soit dynamique en fonction du texte de notre étiquette. Nous modifierons donc notre contrainte de largeur de la vue jaune. est nécessaire pour résoudre l'ambiguïté, mais nous voulons qu'il soit annulé à l'exécution en fonction du contenu de UILabel. Nous allons donc sélectionner notre vue jaune et aller dans l'inspecteur Taille et réduire la priorité de la contrainte de largeur à 1 pour qu'elle soit annulée. Suivez l'image ci-dessous.

entrer la description de l'image ici

Etape 6: Nous voulons que UILabel se développe en fonction du texte et repousse notre vue en jaune.Ainsi, nous avons réduit la priorité de la largeur de la vue en jaune.Maintenant, nous allons augmenter la priorité de la résistance de compression de texte de notre UILabel. ainsi nous augmenterons la priorité de la couverture de contenu d'UILabel. Suivez l'image ci-dessous

entrer la description de l'image ici

Comme vous pouvez le constater, nous avons augmenté la priorité de mise en cache du contenu à 500 et la priorité de la résistance de compression à 751, ce qui permettra de surpasser la priorité 1 de la contrainte de largeur.

Maintenant, construisez et exécutez, vous verrez quelque chose comme suit.

entrer la description de l'image ici