Ich habe ein UILabel
mit Platz für zwei Textzeilen. Wenn der Text zu kurz ist, wird dieser Text manchmal in der vertikalen Mitte des Etiketts angezeigt.
Wie richte ich den Text vertikal aus, damit er immer oben auf dem Text steht UILabel
?
quelle
Ich habe ein UILabel
mit Platz für zwei Textzeilen. Wenn der Text zu kurz ist, wird dieser Text manchmal in der vertikalen Mitte des Etiketts angezeigt.
Wie richte ich den Text vertikal aus, damit er immer oben auf dem Text steht UILabel
?
Es gibt keine Möglichkeit, die vertikale Ausrichtung auf a einzustellen UILabel
, aber Sie können den gleichen Effekt erzielen, indem Sie den Rahmen des Etiketts ändern. Ich habe meine Etiketten orange gemacht, damit Sie klar sehen können, was passiert.
Hier ist der schnelle und einfache Weg, dies zu tun:
[myLabel sizeToFit];
Wenn Sie eine Beschriftung mit längerem Text haben, die mehr als eine Zeile enthält, setzen Sie diese numberOfLines
auf 0
(Null bedeutet hier eine unbegrenzte Anzahl von Zeilen).
myLabel.numberOfLines = 0;
[myLabel sizeToFit];
Längere Version
Ich werde mein Etikett im Code erstellen, damit Sie sehen können, was los ist. Das meiste davon können Sie auch im Interface Builder einrichten. Mein Setup ist eine ansichtsbasierte App mit einem Hintergrundbild, das ich in Photoshop erstellt habe, um Ränder (20 Punkte) anzuzeigen. Das Etikett hat eine attraktive orange Farbe, sodass Sie sehen können, was mit den Abmessungen los ist.
- (void)viewDidLoad
{
[super viewDidLoad];
// 20 point top and left margin. Sized to leave 20 pt at right.
CGRect labelFrame = CGRectMake(20, 20, 280, 150);
UILabel *myLabel = [[UILabel alloc] initWithFrame:labelFrame];
[myLabel setBackgroundColor:[UIColor orangeColor]];
NSString *labelText = @"I am the very model of a modern Major-General, I've information vegetable, animal, and mineral";
[myLabel setText:labelText];
// Tell the label to use an unlimited number of lines
[myLabel setNumberOfLines:0];
[myLabel sizeToFit];
[self.view addSubview:myLabel];
}
Einige Einschränkungen bei der Verwendung sizeToFit
treten bei mittig oder rechts ausgerichtetem Text auf. Folgendes passiert:
// myLabel.textAlignment = NSTextAlignmentRight;
myLabel.textAlignment = NSTextAlignmentCenter;
[myLabel setNumberOfLines:0];
[myLabel sizeToFit];
Das Etikett hat immer noch eine feste Größe mit einer festen oberen linken Ecke. Sie können die Breite des Originaletiketts in einer Variablen speichern und danach festlegen sizeToFit
oder eine feste Breite festlegen , um diesen Problemen entgegenzuwirken:
myLabel.textAlignment = NSTextAlignmentCenter;
[myLabel setNumberOfLines:0];
[myLabel sizeToFit];
CGRect myFrame = myLabel.frame;
// Resize the frame's width to 280 (320 - margins)
// width could also be myOriginalLabelFrame.size.width
myFrame = CGRectMake(myFrame.origin.x, myFrame.origin.y, 280, myFrame.size.height);
myLabel.frame = myFrame;
Beachten Sie, dass sizeToFit
die Mindestbreite Ihres ursprünglichen Etiketts eingehalten wird. Wenn Sie mit einem Etikett mit einer Breite von 100 beginnen und es aufrufen sizeToFit
, erhalten Sie ein (möglicherweise sehr hohes) Etikett mit einer Breite von 100 (oder etwas weniger) zurück. Möglicherweise möchten Sie Ihre Beschriftung auf die gewünschte Mindestbreite einstellen, bevor Sie die Größe ändern.
Einige andere Dinge zu beachten:
Ob dies lineBreakMode
respektiert wird, hängt davon ab, wie es eingestellt ist. NSLineBreakByTruncatingTail
(Standardeinstellung) wird nachher ignoriert sizeToFit
, ebenso wie die beiden anderen Kürzungsmodi (Kopf und Mitte). NSLineBreakByClipping
wird ebenfalls ignoriert. NSLineBreakByCharWrapping
funktioniert wie gewohnt. Die Rahmenbreite wird immer noch so verkleinert, dass sie zum Buchstaben ganz rechts passt.
Mark Amery gab in den Kommentaren einen Fix für NIBs und Storyboards mit Auto Layout:
Wenn Ihr Etikett in einer Schreibfeder oder einem Storyboard als Unteransicht
view
eines ViewControllers enthalten ist, der Autolayout verwendet, funktioniert das Einfügen IhressizeToFit
AnrufsviewDidLoad
nicht, da Autolayout-Größen und -Positionen, nach denen die UnteransichtenviewDidLoad
aufgerufen werden, die Auswirkungen Ihrer sofort rückgängig machensizeToFit
Anruf. Allerdings fordertsizeToFit
von innenviewDidLayoutSubviews
Willen Arbeit.
Dies verwendet die NSString
Methode sizeWithFont:constrainedToSize:lineBreakMode:
, um die Rahmenhöhe zu berechnen, die zum Anpassen einer Zeichenfolge erforderlich ist, und legt dann den Ursprung und die Breite fest.
Ändern Sie die Größe des Rahmens für das Etikett anhand des Textes, den Sie einfügen möchten. Auf diese Weise können Sie eine beliebige Anzahl von Zeilen aufnehmen.
CGSize maximumSize = CGSizeMake(300, 9999);
NSString *dateString = @"The date today is January 1st, 1999";
UIFont *dateFont = [UIFont fontWithName:@"Helvetica" size:14];
CGSize dateStringSize = [dateString sizeWithFont:dateFont
constrainedToSize:maximumSize
lineBreakMode:self.dateLabel.lineBreakMode];
CGRect dateFrame = CGRectMake(10, 10, 300, dateStringSize.height);
self.dateLabel.frame = dateFrame;
adjustsFontSizeToFitWidth
verwenden Sie sizeToFit und setzen Sie den Rahmen des Etiketts auf 0, 0, theWidthYouWant, label.frame.size.height (dies ist die neue Größe, die durch sizeToFit bestimmt wird). DANN geltenadjustsFontSizeToFitWidth
Stellen Sie den neuen Text ein:
Setzen Sie die
maximum number
Zeilen auf 0 (automatisch):Stellen Sie den Rahmen des Etiketts auf die maximale Größe ein:
Rufen Sie
sizeToFit
an, um die Rahmengröße zu reduzieren, damit der Inhalt genau passt:Der Beschriftungsrahmen ist jetzt gerade hoch und breit genug, um zu Ihrem Text zu passen. Oben links sollte unverändert bleiben. Ich habe dies nur mit dem oben links ausgerichteten Text getestet. Bei anderen Ausrichtungen müssen Sie möglicherweise den Rahmen anschließend ändern.
Außerdem ist auf meinem Etikett der Zeilenumbruch aktiviert.
quelle
Bezug auf die Erweiterungslösung:
sollte ersetzt werden durch
In jeder hinzugefügten neuen Zeile wird zusätzlicher Speicherplatz benötigt, da
UILabels
die nachlaufenden Wagenrückläufe des iPhone ignoriert zu werden scheinen :(In ähnlicher Weise sollte auch alignBottom mit einem
@" \n@%"
anstelle von aktualisiert werden"\n@%"
(für die Zyklusinitialisierung muss auch "for (int i = 0 ...") ersetzt werden.Die folgende Erweiterung funktioniert für mich:
Rufen Sie dann
[yourLabel alignTop];
oder[yourLabel alignBottom];
nach jeder yourLabel-Textzuweisung auf.quelle
VerticalAlign
zwischen Klammern hinzufügen@implementation UILabel
. Als Neuling in Objective-C bin ich noch nie auf diese Syntax gestoßen. Wie heißt das?sizeWithFont:constrainedToSize:lineBreakMode:
und sizeWithFont: werden beide in iOS7 abgeschrieben. Außerdem funktioniert diese Kategorie nur bei Beschriftungen, wenn numberOfLines größer als 0 ist.Nur für den Fall, dass es jemandem hilft, hatte ich das gleiche Problem, konnte das Problem jedoch einfach durch Umschalten von "Verwenden"
UILabel
auf "Verwenden" lösenUITextView
. Ich schätze, dass dies nicht jedermanns Sache ist, da die Funktionalität etwas anders ist.Wenn Sie zu "Verwenden" wechseln
UITextView
, können Sie alle Eigenschaften der Bildlaufansicht sowie "Benutzerinteraktion aktiviert" deaktivieren. Dadurch wird die Verwendung eher wie eine Beschriftung erzwungen.quelle
UITextView
habe ich sofort das gewünschte Ergebnis erzielt.Kein Muss, keine Aufregung
Kein Muss, kein Objective-C, keine Aufregung, aber Swift 3:
Swift 4.2
quelle
Wie die Antwort oben, aber es war nicht ganz richtig oder einfach, in Code zu schlüpfen, also habe ich es ein bisschen aufgeräumt. Fügen Sie diese Erweiterung entweder zu Ihrer eigenen .h- und .m-Datei hinzu oder fügen Sie sie direkt über der Implementierung ein, die Sie verwenden möchten:
Fügen Sie dann zur Verwendung Ihren Text in das Etikett ein und rufen Sie die entsprechende Methode zum Ausrichten auf:
oder
quelle
Eine noch schnellere (und schmutzigere) Möglichkeit, dies zu erreichen, besteht darin, den Zeilenumbruchmodus des UILabel auf "Clip" zu setzen und eine feste Anzahl von Zeilenumbrüchen hinzuzufügen.
Diese Lösung funktioniert nicht für alle Benutzer. Insbesondere wenn Sie am Ende Ihrer Zeichenfolge immer noch "..." anzeigen möchten, wenn die Anzahl der angezeigten Zeilen überschritten wird, müssen Sie eine der folgenden Zeilen verwenden die längeren Codebits - aber in vielen Fällen erhalten Sie das, was Sie brauchen.
quelle
UILineBreakModeWordWrap
stattdessen.Einfachster Ansatz mit Storyboard:
Einbetten Etikett in StackView und legen Sie die folgenden zwei Attribute von StackView im Attributinspektor fest:
1-
Axis
bisHorizontal
,2-
Alignment
bisTop
quelle
UILabel
in eineUIView
Unterklasse zu platzieren (einfachUIView
ist normalerweise genug) und das Etikett nach unten wachsen zu lassen. Vielen Dank!UILabel
das StackView aufheben und seine Arbeit erledigen müssen. Vielen Dank!Anstelle von können
UILabel
Sie verwenden,UITextField
die vertikale Ausrichtungsoption hat:quelle
Ich habe lange mit diesem Problem zu kämpfen und wollte meine Lösung teilen.
Dadurch erhalten Sie einen
UILabel
Text, der den Text automatisch auf 0,5 Skalen verkleinert und den Text vertikal zentriert. Diese Optionen sind auch in Storyboard / IB verfügbar.quelle
Erstellen Sie eine neue Klasse
LabelTopAlign
.h Datei
.m Datei
Bearbeiten
Hier ist eine einfachere Implementierung, die dasselbe tut:
quelle
sizeToFit
Lösungen das macht tatsächlich denUILabel
Put jeden Text oben, auch wenn Sie dynamisch einen kürzeren Text mit einem längeren oder umgekehrt ersetzen.Im Interface Builder
UILabel
die Größe des größtmöglichen Textes einstellenLines
Attributinspektor auf '0' setzenIn deinem Code
sizeToFit
Ihr Etikett anCode-Auszug:
quelle
Für die adaptive Benutzeroberfläche (iOS8 oder höher) muss die vertikale Ausrichtung von UILabel in StoryBoard durch Ändern der Eigenschaften
noOfLines
= 0` und festgelegt werdenBearbeitet:
und die folgenden Einschränkungen reichen aus, um die gewünschten Ergebnisse zu erzielen.
quelle
Erstellen Sie eine Unterklasse von UILabel. Klappt wunderbar:
Wie hier besprochen .
quelle
Ich habe eine util-Funktion geschrieben, um diesen Zweck zu erreichen. Sie können einen Blick darauf werfen:
.Wie benutzt man? (Wenn lblHello vom Interface Builder erstellt wird, überspringe ich einige Details zu UILabel-Attributen.)
Ich habe es auch in meinem Blog als Artikel geschrieben: http://fstoke.me/blog/?p=2819
quelle
Ich habe eine Weile gebraucht, um den Code sowie den Code auf der eingeführten Seite zu lesen, und festgestellt, dass alle versuchen, die Rahmengröße des Etiketts so zu ändern, dass die standardmäßige vertikale Ausrichtung in der Mitte nicht angezeigt wird.
In einigen Fällen möchten wir jedoch, dass die Beschriftung alle diese Leerzeichen belegt, auch wenn die Beschriftung so viel Text enthält (z. B. mehrere Zeilen mit gleicher Höhe).
Hier habe ich eine alternative Methode verwendet, um das Problem zu lösen, indem ich einfach Zeilenumbrüche an das Ende des Etiketts aufgefüllt habe (bitte beachten Sie, dass ich das tatsächlich geerbt habe
UILabel
, es aber nicht erforderlich ist):quelle
Was ich in meiner App getan habe, war, die Line-Eigenschaft des UILabels auf 0 zu setzen sowie eine untere Einschränkung des UILabels zu erstellen und sicherzustellen, dass es auf> = 0 gesetzt ist, wie in der Abbildung unten gezeigt.
quelle
Ich habe die Vorschläge hier aufgenommen und eine Ansicht erstellt, die ein UILabel umschließen kann, die Größe ändert und die Anzahl der Zeilen so einstellt, dass es oben ausgerichtet ist. Fügen Sie einfach ein UILabel als Unteransicht ein:
quelle
Sie können TTTAttributedLabel verwenden , es unterstützt die vertikale Ausrichtung.
quelle
Ich habe festgestellt, dass die Antworten auf diese Frage jetzt etwas veraltet sind. Fügen Sie sie daher für die Fans des automatischen Layouts hinzu.
Das automatische Layout macht dieses Problem ziemlich trivial. Angenommen, wir fügen das Etikett hinzu,
UIView *view
wird der folgende Code dies erreichen:Die Höhe
intrinsicContentSize
des Etiketts wird automatisch berechnet (mithilfe des Etiketts) und das Etikett wird von Kante zu Kante horizontal oben auf dem Etikett positioniertview
.quelle
Ich habe viele der oben genannten Methoden verwendet und möchte nur einen schnellen und schmutzigen Ansatz hinzufügen, den ich verwendet habe:
Stellen Sie sicher, dass die Anzahl der Zeilenumbrüche in der Zeichenfolge dazu führt, dass Text den verfügbaren vertikalen Raum ausfüllt, und stellen Sie das UILabel so ein, dass überfließender Text abgeschnitten wird.
Weil manchmal gut genug gut genug ist .
quelle
UITextView
dass sie aufgerufendlopen
werden können, um die Texteingabe zu unterstützen. Dies kann zu erheblichen Verzögerungen im UI-Thread führen, sodass dieser Ansatz viel leistungsfähiger ist!Ich wollte ein Etikett, das mehrzeilig sein kann, eine minimale Schriftgröße aufweist und in der übergeordneten Ansicht sowohl horizontal als auch vertikal zentriert ist. Ich habe mein Etikett programmgesteuert zu meiner Ansicht hinzugefügt:
Und dann, als ich den Text meines Etiketts ändern wollte ...
Hoffe das hilft jemandem!
quelle
FXLabel (auf Github) erledigt dies sofort, indem es
label.contentMode
auf setztUIViewContentModeTop
. Diese Komponente wurde nicht von mir hergestellt, aber es ist eine Komponente, die ich häufig verwende, die über unzählige Funktionen verfügt und anscheinend gut funktioniert.quelle
Wenn Sie dies lesen, weil der Text in Ihrem Etikett nicht vertikal zentriert ist, beachten Sie, dass einige Schriftarten nicht gleich gestaltet sind. Wenn Sie beispielsweise ein Etikett mit der Zapfino-Größe 16 erstellen, wird der Text nicht perfekt vertikal zentriert.
Wenn Sie jedoch mit helvetica arbeiten, wird Ihr Text vertikal zentriert.
quelle
Verwenden Sie
textRect(forBounds:limitedToNumberOfLines:)
.quelle
Unterklasse UILabel und schränken Sie das Zeichnungsrechteck wie folgt ein:
Ich habe die Lösung mit Newline-Padding ausprobiert und bin in einigen Fällen auf ein falsches Verhalten gestoßen. Nach meiner Erfahrung ist es einfacher, die Zeichnung wie oben zu beschränken, als sich damit zu beschäftigen
numberOfLines
.PS Sie können sich vorstellen, UIViewContentMode auf folgende Weise zu unterstützen:
quelle
Wenn Sie Autolayout verwenden, setzen Sie die vertikale contentHuggingPriority entweder in Code oder IB auf 1000. In IB müssen Sie dann möglicherweise eine Höhenbeschränkung entfernen, indem Sie ihre Priorität auf 1 setzen und sie dann löschen.
quelle
Solange Sie keine komplexe Aufgabe ausführen, können Sie
UITextView
stattdessen verwendenUILabels
.Deaktivieren Sie den Bildlauf.
Wenn Sie möchten, dass der Text vollständig angezeigt wird, nur Benutzer
sizeToFit
undsizeThatFits:
Methodenquelle
In kurzer Zeit
let myLabel : UILabel!
Damit Ihr Text Ihres Etiketts auf den Bildschirm passt und sich oben befindet
myLabel.sizeToFit()
Damit Ihre Schriftart des Etiketts an die Breite des Bildschirms oder eine bestimmte Breite angepasst wird.
myLabel.adjustsFontSizeToFitWidth = YES
und etwas TextAlignment für Label:
myLabel.textAlignment = .center
myLabel.textAlignment = .left
myLabel.textAlignment = .right
myLabel.textAlignment = .Natural
myLabel.textAlignment = .Justified
quelle
[myLabel sizeToFit]
. Vielen Dank!Dies ist eine alte Lösung. Verwenden Sie das Autolayout unter iOS> = 6
Meine Lösung:
quelle