Aligner le texte verticalement vers le haut à l'intérieur d'un UILabel
J'ai un UILabel
avec un espace pour deux lignes de texte. Parfois, quand le texte est trop court, ce texte est affiché dans le centre vertical de l'étiquette.
Comment puis-je alignez verticalement le texte pour être toujours au top de la UILabel
?
Vous devez vous connecter pour publier un commentaire.
Il n'y a aucun moyen de définir la verticale s'aligner sur une
UILabel
, mais vous pouvez obtenir le même effet en changeant l'étiquette de l'image. J'ai fait mes étiquettes orange de sorte que vous pouvez voir clairement ce qui se passe.Voici un moyen simple et rapide pour ce faire:
Si vous avez une étiquette avec plus de texte que va faire plus d'une ligne, de définir les
numberOfLines
à0
(zéro signifie ici un nombre illimité de lignes).Version Longue
Je vais faire mon étiquette de code, de sorte que vous pouvez voir ce qu'il se passe. Vous pouvez configurer la plupart des de ce dans Interface Builder trop. Ma configuration est une Vue en Fonction de l'App avec une image de fond que j'ai fait dans Photoshop pour afficher les marges (20 points). L'étiquette est une jolie couleur orange de sorte que vous pouvez voir ce qui se passe avec les dimensions.
Certaines limitations de l'utilisation de
sizeToFit
entrent en jeu avec le centre - ou un texte aligné à droite. Voici ce qui arrive:L'étiquette est toujours de taille moyenne avec un coin en haut à gauche. Vous pouvez enregistrer l'original de l'étiquette largeur dans une variable et de définir après
sizeToFit
, ou lui donner une largeur fixe pour contrer ces problèmes:Noter que
sizeToFit
dans le respect de vos initial de l'étiquette largeur minimale. Si vous commencez avec une étiquette de 100 de large et appelsizeToFit
, cela va vous redonner une (peut-être de très grande taille) étiquette avec 100 (ou un peu moins) de largeur. Vous pouvez définir votre étiquette à la largeur minimale que vous voulez avant de redimensionnement.Quelques autres choses à noter:
Si
lineBreakMode
est respecté dépend de la façon dont il est défini.NSLineBreakByTruncatingTail
(par défaut) est ignoré aprèssizeToFit
, comme le sont les deux autres modes de troncature (la tête et le milieu).NSLineBreakByClipping
est également ignoré.NSLineBreakByCharWrapping
fonctionne comme d'habitude. La largeur du cadre est encore rétréci pour s'adapter à l'extrême droite de la lettre.Marque Amery a donné un correctif pour les Plumes et les Storyboards l'utilisation de l'Auto Mise en page dans les commentaires:
Ma Réponse Originale à cette question (pour la postérité/référence):
Il utilise le
NSString
méthodesizeWithFont:constrainedToSize:lineBreakMode:
pour calculer la hauteur du cadre nécessaire pour s'adapter à une chaîne, puis définit l'origine et la largeur.Redimensionner l'image pour l'étiquette, selon le texte que vous voulez insérer. De cette façon, vous pouvez adapter le nombre de lignes.
adjustsFontSizeToFitWidth
ensuite utiliser sizeToFit puis placer l'étiquette de l'image 0, 0, theWidthYouWant, l'étiquette.cadre.taille.hauteur (qui est la nouvelle hauteur déterminée par sizeToFit) PUIS appliqueradjustsFontSizeToFitWidth
UITextView
dans la plupart des cas. stackoverflow.com/a/7661501/190657Définir le nouveau texte:
Définir la
maximum number
de lignes à 0 (automatique):Définir le cadre de l'étiquette à la taille maximale:
Appel
sizeToFit
pour réduire la taille de l'image afin que le contenu correspond bien:Les étiquettes cadre est maintenant juste de haut et assez large pour s'adapter à votre texte. Le haut à gauche devrait être inchangé. J'ai uniquement testé avec en haut à gauche du texte aligné. Pour d'autres alignements, vous pourriez avoir à modifier l'image par la suite.
Aussi, mon label a retour automatique à la ligne est activée.
Se référant à la solution d'extension:
devrait être remplacé par
De l'espace supplémentaire est nécessaire dans chaque ajout de ligne, parce que l'iPhone
UILabels
' trailing retours chariot semble être ignoré 🙁De même, alignBottom doit être mis à jour avec un
@" \n@%"
en place de"\n@%"
(pour le cycle d'initialisation doit être remplacé par "for(int i=0..." aussi).L'extension suivante fonctionne pour moi:
Alors appel
[yourLabel alignTop];
ou[yourLabel alignBottom];
après chaque yourLabel texte d'affectation.VerticalAlign
entre parenthèses après@implementation UILabel
. Étant nouveau Objective-C, je n'ai pas couru à travers cette syntaxe avant. Qu'est-ce que cela s'appelle?sizeWithFont:constrainedToSize:lineBreakMode:
et sizeWithFont: sont à la fois amorti dans iOS7. Aussi, cette catégorie ne fonctionne que sur les étiquettes lorsque numberOfLines est plus grand que 0.Juste au cas où il est d'une aide quelconque à quelqu'un, j'ai eu le même problème, mais a été en mesure de résoudre le problème simplement en passant à l'aide de
UILabel
à l'aide deUITextView
. J'apprécie ce n'est pas pour tout le monde parce que la fonctionnalité est un peu différent.Si vous ne passer à l'utilisation de
UITextView
, tu peux désactiver le Défilement propriétés de la Vue ainsi que l'Interaction de l'Utilisateur a Activé... Cela va l'obliger à agir davantage comme une étiquette.UITextView
m'a donné le résultat souhaité tout de suite.Pas muss, pas de chichi
Pas muss, pas de Objective-c, pas de chichi, mais Swift 3:
Swift 4.2
Comme la réponse ci-dessus, mais ce n'était pas tout à fait droit, ou facile à taper dans le code donc j'ai nettoyé un peu. Ajouter cette extension soit propre .h et .m fichier ou il suffit de coller juste au-dessus de la mise en œuvre que vous avez l'intention de l'utiliser:
Et ensuite pour l'utiliser, mettre votre texte dans l'étiquette, puis appeler la méthode appropriée pour l'aligner:
ou
Rapide (et sale) façon d'y parvenir est par la définition de la UILabel de saut de ligne en mode de "Clip" et l'ajout d'une quantité fixe de retours à la ligne.
Cette solution ne fonctionne pas pour tout le monde-en particulier, si vous voulez toujours de se montrer "..." à la fin de votre chaîne si elle dépasse le nombre de lignes dont vous faites preuve, vous devez utiliser l'un des plus bits de code, mais pour beaucoup de cas, cette obtiendrez ce dont vous avez besoin.
UILineBreakModeWordWrap
à la place.Au lieu de
UILabel
vous pouvez utiliserUITextField
qui a option d'alignement vertical:J'ai eu du mal avec celui-ci pendant un long moment et je voulais partager ma solution.
Cela vous donnera une
UILabel
qui va de réduction automatique de texte en bas à 0,5 échelles et verticalement au centre du texte. Ces options sont également disponibles dans la table de montage séquentiel/IB.Créer une nouvelle classe
LabelTopAlign
.h fichier
.m fichier
Modifier
Ici est une simple application qui fait la même chose:
sizeToFit
solutions de ce fait laUILabel
mettre aucun texte en haut, même si vous remplacer dynamiquement un texte plus court, avec une plus ou vice versa.Storyboard solution:
Le plus simple et le plus simple est d'intégrer
Label
dansStackView
et réglage Empilervoir deAxis
àHorizontal
,Alignment
àTop
dansAttribute Inspector
du Storyboard.UILabel
dans certainsUIView
sous-classe (plaineUIView
est généralement suffisant) et de laisser cette étiquette de croître dans la direction vers le bas. Merci!UILabel
et de laisser le Empilervoir faire son travail. Merci!Dans Interface Builder
UILabel
à la taille de la plus grande possible du TexteLines
à " 0 " dans les Attributs de l'Inspecteur deDans votre code
sizeToFit
sur votre étiquetteExtrait De Code:
D'adaptation de l'INTERFACE utilisateur(iOS8 ou après) , l'Alignement Vertical des UILabel est à partir de StoryBoard en Modifiant les propriétés
noOfLines
=0` etÉdité:
et les contraintes suivantes sont suffisantes pour atteindre les résultats souhaités.
Créer une sous-classe de UILabel. Fonctionne comme un charme:
Comme discuté ici.
J'ai écrit un util de fonction pour atteindre ce but. Vous pouvez prendre un coup d'oeil:
.Comment l'utiliser? (Si lblHello est créé par Interface builder, j'ai donc sauter certaines UILabel attributs de détail)
J'ai aussi écrit sur mon blog un article:
http://fstoke.me/blog/?p=2819
J'ai pris du temps pour lire le code, ainsi que le code dans l'introduction de cette page, et a constaté que ils ont tous essayer de modifier la taille de l'image de l'étiquette, de sorte que la valeur par défaut du centre de l'alignement vertical n'apparaît pas.
Toutefois, dans certains cas, nous ne voulons l'étiquette d'occuper tous les espaces, même si l'étiquette n'ont donc beaucoup de texte (par exemple, plusieurs lignes avec la même hauteur).
Ici, j'ai utilisé un autre moyen de le résoudre, il suffit de la pad retours à la ligne à la fin de l'étiquette (pls noter que j'ai effectivement hérité de la
UILabel
, mais il n'est pas nécessaire):J'ai pris les suggestions ici et a créé un point de vue qui peut emballer un UILabel et la taille de la liste et définissez le nombre de lignes, de sorte qu'il est en haut de l'alignement. Mettez simplement un UILabel comme une sous-vue:
Vous pouvez utiliser TTTAttributedLabel, il prend en charge l'alignement vertical.
J'ai beaucoup utilisé des méthodes ci-dessus, et vous voulez juste ajouter une quick-and-dirty approche que j'ai utilisée:
Assurez-vous que le nombre de retours à la ligne dans la chaîne sera la cause de tout texte pour remplir l'espace vertical disponible, et de définir la UILabel à tronquer tout texte débordant.
Parce que parfois, un bon assez bon.
UITextView
est qu'il peut appelerdlopen
afin de soutenir la saisie de texte. Cela peut causer de gros lag sur le thread de l'INTERFACE utilisateur, de sorte que cette approche est beaucoup plus performant!Je voulais avoir une étiquette qui a été en mesure d'avoir des multi-lignes, une taille minimale de la police, et centré horizontalement et verticalement dans la vue parente. J'ai ajouté mon étiquette par programmation de mon point de vue:
Et puis quand j'ai voulu changer le texte de mon label...
Espère que ça aide quelqu'un!
J'ai trouvé les réponses à cette question sont maintenant un peu out-of-date, afin d'ajouter ce pour la mise en page automatique des fans.
Mise en page automatique qui rend cette question assez trivial. En supposant que nous avons l'ajout de l'étiquette de
UIView *view
, le code suivant permet d'accomplir cela:L'étiquette de la hauteur sera calculée automatiquement (à l'aide de c'est
intrinsicContentSize
) et l'étiquette sera placée bord-à-bord à l'horizontale, en haut de laview
.FXLabel (sur github) est-ce à la sortie de la boîte par la mise en
label.contentMode
àUIViewContentModeTop
. Ce composant n'est pas faite par moi, mais c'est un composant que j'utilise souvent et a des tonnes de fonctionnalités, et semble bien fonctionner.pour tous ceux qui lisent ce parce que le texte à l'intérieur de votre étiquette n'est pas centrée verticalement, gardez à l'esprit que certains types de police ne sont pas conçus de manière égale. par exemple, si vous créez une étiquette avec zapfino taille 16, vous verrez le texte n'est pas parfaitement centré verticalement.
toutefois, en travaillant avec helvetica sera à la verticale du centre de votre texte.
Ce que j'ai fait dans mon application a UILabel de la ligne de propriété à 0 ainsi que la création d'un fond de contrainte de la UILabel et assurez-vous qu'il est réglé sur >= 0, comme indiqué dans l'image ci-dessous.
Sous-classe UILabel et de contraindre le dessin d'un rectangle, comme ceci:
J'ai essayé la solution d'newline rembourrage et a couru dans un comportement incorrect dans certains cas. Dans mon expérience, il est plus facile de limiter le dessin de rectangle comme ci-dessus que le désordre avec
numberOfLines
.P. S. Vous pouvez imaginer facilement l'appui UIViewContentMode de cette façon:
Si vous utilisez la mise en page automatique, définissez la verticale contentHuggingPriority à 1000, soit dans le code ou de l'IB. Dans IB, vous pouvez alors supprimer une hauteur de contrainte en définissant c'est la priorité de 1, puis de le supprimer.
Utilisation
textRect(forBounds:limitedToNumberOfLines:)
.Tant que tu ne fais pas de tâche complexe, vous pouvez utiliser
UITextView
au lieu deUILabels
.Désactiver le défilement.
Si vous souhaitez que le texte s'affiche pas entièrement juste de l'utilisateur
sizeToFit
etsizeThatFits:
méthodesDans swift,
let myLabel : UILabel!
De rendre votre texte de votre Étiquette pour adapter à l'écran et il est sur le dessus
myLabel.sizeToFit()
Pour faire de votre police d'étiquette pour s'adapter à la largeur de l'écran ou de la largeur de la taille.
myLabel.adjustsFontSizeToFitWidth = YES
et certains textAlignment pour label :
myLabel.textAlignment = .center
myLabel.textAlignment = .left
myLabel.textAlignment = .right
myLabel.textAlignment = .Natural
myLabel.textAlignment = .Justified
[myLabel sizeToFit]
. Merci!!!!C'est une vieille solution, utiliser la mise en page automatique sur iOS >= 6
Ma solution:
1/des lignes de séparation par moi-même (sans tenir compte de l'étiquette de paramètres d'habillage)
2/Tracer des lignes par moi-même (sans tenir compte de l'étiquette de l'alignement)
Si la création de votre propre point de vue est une option, vous pourriez faire quelque chose comme ceci:
Dans UILabel verticalement l'alignement du texte n'est pas possible. Mais, vous pouvez modifier dynamiquement la hauteur de l'étiquette à l'aide de
sizeWithFont:
méthode deNSString
, et juste définir x et y de ce que vous voulez.Vous pouvez utiliser
UITextField
. Il prend en charge la contentVerticalAlignment peoperty que c'est une sous-classe deUIControl
. Vous devez définir sauserInteractionEnabled
PAS pour empêcher l'utilisateur de saisir du texte sur elle.Je sais que c'est un vieux post, mais aligne verticalement le texte est un ÉNORME problème (au moins pour moi, c'est bien) et j'ai pensé que je devais partager cette solution, car je ne pouvais pas en trouver un moi-même.
À l'aide de drawRect est un peu cher à mon avis. La bonne façon d'obtenir un UILabel à alignées à la verticale est de ne pas utiliser un UILabel. Utiliser un UITextView (multiline UITextField) et observer le contenu de la propriété comme suit:
Fondamentalement ce qui se passe ici, c'est nous ensemble de la classe, de qui nous sommes en tant qu'observateur, à la recherche à la contentSize de la propriété, avec une option de NSKeyValueObservingOptionNew de sorte que chaque fois que le contenu,
-(void)observeValueForKeyPath:ofObject:change:context:
seront appelés et puis, vous pouvez calculer un décalage de taille pour aligner le texte de façon appropriée.Je ne peux pas prendre le crédit pour cela, l'idée originale est venue de ici. Mais, cette solution ne fonctionne pas sur iOS7. Après la pêche à la traîne autour de SORTE que pour quelques heures, j'ai trouvé ceci: iOS 7 alignement vertical fix. La clé de la ligne, il y a
contentheight = [tv sizeThatFits:CGSizeMake(tv.frame.size.width, FLT_MAX)].height;
. Pour une raison quelconque dans iOS 7, l'obtention de la contentSize hauteur ne fonctionne pas, mais qu'il fixe. Aucune des deux solutions ont travaillé sur leur propre, mais après un peu de bricolage, j'ai été capable de synthétiser l'ensemble de la solution ci-dessus.Swift 2.0:
Font constamment les valeurs de l'enum dans un vide Swift fichier.
À L'Aide De UILabel Extension:
Faire un vide Swift classe et le nom. Ajouter le suivant
Utilisation :
Je riffed hors dalewking de la suggestion et de l'ajout d'un UIEdgeInset pour permettre un réglage de la marge. beau travail autour de.
Je travaillais sur ce problème en particulier en tant que bien, j'ai donc pris les idées par D. S. et nevan roi et, essentiellement, en une sous-classe qui implémente un alignement vertical de la propriété, qui vous permet également de modifier l'alignement plus que juste une fois. Elle emprunte les
UIControlContentVerticalAlignment
type et prend également en chargeUIControlContentVerticalAlignmentFill
.De ce que j'ai vu,
numberOfLines
semble un peu inutile quand il s'agit de l'alignement vertical, de sorte que dans la présente sous-classe, il est toujours mis à 0 lors de l'application de l'alignement vertical.Aussi, vous devez définir des
lineBreakMode
vous-même dans le cas où vous voulez un texte multi-ligne de l'étiquette.Ça y est: QALabel sur GitHub
Pour Swift 3...
Il y a deux façons de résoudre ce problème.On est
Mais la seconde méthode est plus fiable pour cette approche, j'.e,
entrer "\n" est pas une bonne chose, mais oui si vous connaissez les contraintes et la taille des données va être affiché, cela peut être du bon travail, mais ne peut pas être extensible si le texte est plus long que la taille de l'étiquette. La Deuxième façon, finalement, le cadre en fonction de la taille du texte va être affiché.
Pour ceux d'entre vous avec un tableau personnalisé cellules de tenter de corriger ce problème, ajoutez ceci à votre tableau personnalisé cellule classe:
Swift 2.2:
Cela a résolu mon problème.
(Du 7 Mars 2018)
Swift 4
Cette obtiendrez le résultat souhaité, et il fera en sorte que la nouvelle hauteur de la UILabel ne pas dépasser un certain maximum de la hauteur que vous désirez pour cette étiquette.
numberOfLines = 0
!Au lieu d'utiliser
sizeToFit
, vous pouvez modifier manuellement l'étiquette de hauteur;La taille retournée sera le mieux adapté au contenu de votre étiquette. Si l'étiquette de hauteur est équipé de son contenu, vous n'auriez pas des problèmes avec le contenu étant positionné sur le centre de l'étiquette.
Ce code vous aide à rendre le texte aligné en haut et aussi pour faire de la hauteur d'étiquette fixe le contenu du texte.
instruction à utiliser le code ci-dessous
isHeightToChange
par défaut, il est vrai, fait à la hauteur de l'étiquette, de même que les contenus de texte automatiquement.isHeightToChange
si elle est fausse rendre le texte aligné vers le haut, avec out diminuant la hauteur de l'étiquette.Bâtiment sur toutes les autres solutions posté, j'ai fait un simple petit UILabel sous-classe qui va gérer l'alignement vertical pour vous lors de la configuration de son alignement sur la propriété. Cela permettra également de mettre à jour les étiquettes sur les changements d'orientation ainsi, va limiter la hauteur du texte, et de garder la largeur de l'étiquette à la taille d'origine.
Solution Simple à ce problème...
Place un
UIStackView
ci-dessous l'étiquette.Puis utiliser la mise en page automatique pour définir un espacement vertical de zéro à l'étiquette et de la contrainte, de la supérieure à ce qui était auparavant le bas de l'étiquette. L'étiquette ne poussent pas, les empilervoir volonté. Ce que j'aime c'est que la vue de la pile est non rendu. Il n'est donc pas vraiment de perdre du temps de rendu. Même si cela rend la mise en page automatique des calculs.
Vous aurez probablement besoin de jouer avec ContentHugging et de la Résistance, mais c'est simple.
Chaque maintenant et puis je google ce problème et revenir ici. Cette fois j'ai eu une ideia que je pense est le plus facile, et je ne pense pas que c'est une mauvaise performance sage.
Je dois dire que je suis juste en utilisant la mise en page automatique et ne veulent pas vraiment à la peine de calcul des images. C'est juste... beurk.
Voici une solution rapide 4.0:
Il peut être fait avec plus de souplesse la fixation d'un
height constraint
de l'étiquette dans Interface Builder, la liant le code avec un IBOutlet et l'évolution de la hauteur pour afficher le texte dans un béton position verticale. Exemple pour le centre et en bas de l'alignement:Essayez ceci !! Trop manuel, mais fonctionne parfaitement pour moi.