web-dev-qa-db-fra.com

Mise en page automatique pour dimensionner dynamiquement la largeur de Uilabel

J'ai donc deux UILabels côte à côte dans Storyboard. La deuxième étiquette doit venir en butée contre le bord droit de la première (contrainte de fin de 1), mais j'ai également besoin de la première étiquette (celle de gauche) pour que sa largeur soit égale à la taille de son contenu, sauf si elle atteint une largeur maximale. . Visuellement:

| Étiqueter un texte | | Libellez deux textes |

Et j'ai besoin des contraintes suivantes:

1) Une étiquette doit être redimensionnée en largeur sauf si elle atteint une taille maximale.

2) L'étiquette deux doit toujours être collée contre le bord droit de l'étiquette un

Comment puis-je configurer cela dans Storyboard?

iosstoryboardconstraintsautolayout
63
Msencenb
  1. Créez un espace horizontal de 1 point entre les étiquettes: maintenez la touche Ctrl enfoncée et faites glisser le curseur de label2 Vers label1. Choisissez l’espacement horizontal dans la fenêtre contextuelle. Double-cliquez sur la contrainte. Remplacez la constante par 1.
  2. Donnez à label1 Une largeur maximale: Sélectionnez label1. Accédez à la barre de menus supérieure, sélectionnez Editeur> Broche> Largeur. Double-cliquez sur la contrainte. Modifiez la relation en <= et modifiez la constante en largeur maximale.
  3. Aligner verticalement les étiquettes: Sélectionnez les deux étiquettes. Accédez à la barre de menus supérieure, sélectionnez Editeur> Aligner> Centres centraux.
  4. Vous devez toujours définir des contraintes qui définissent le positionnement de vos étiquettes dans leur vue Conteneur. Je vous laisse ça. J'ai épinglé label1 À 32 points du bord gauche de la vue racine et à 34 points du guide de disposition supérieur.
  5. Mettez à jour les cadres des étiquettes afin qu'ils reflètent les contraintes ci-dessus: Accédez à la barre de menus située dans le coin inférieur droit du canevas. Appuyez sur le bouton Tie-Fighter "Résoudre les problèmes de mise en page automatique". Sélectionnez "Mettre à jour toutes les images ..." dans la fenêtre contextuelle.

Remarque: Notez que je n'ai pas eu à créer de contrainte pour que la largeur de label1 Reflète la taille de son contenu. Les contraintes de dimensionnement du contenu sont générées automatiquement.

enter image description here

108
bilobatum

Veuillez vous référer aux contraintes ci-dessous pour Définir UIlabel et UIButton flexible width;

Set UIlabel and UIButton flexible width according to text using xib autolayout

7
Harshal Wani

S'il vous plaît d'abord obtenir textSize avec le code ci-dessous:

    CGSize  textSize = { 230.0, 10000.0 };

    CGSize size = [[NSString stringWithFormat:@"%@", yourLabelText] 
                   sizeWithFont:[UIFont systemFontOfSize:10]
                   constrainedToSize:textSize
                   lineBreakMode:NSLineBreakByWordWrapping];

puis définissez votre premier cadre d'étiquette avec cette taille de contenu:

   UILabel *lblFirst = [[UILabel alloc] initWithFrame:CGRectMake(X, Y, W, size.height)];
   lblFirst.lineBreakMode = YES;
   lblFirst.lineBreakMode = NSLineBreakByWordWrapping;
   lblFirst.numberOfLines =size.height;
   lblFirst.backgroundColor = [UIColor clearColor];
   [self.view addSubview:lblFirst];

alors la deuxième étiquette Frame sera:

 UILabel *lblFirst = [[UILabel alloc] 
 initWithFrame:CGRectMake(lblFollowerName.frame.size.width + lblFollowerName.frame.Origin.x, Y, W, H)];
1
Abhishek Gupta