UIButton mit zwei Textzeilen im Titel (numberOfLines = 2)


85

Ich versuche, eine zu UIButtonerstellen, deren titleLabel zwei Textzeilen enthält. Dies ist der Code, den ich verwende:

    UIButton *titleButton = [[UIButton alloc] initWithFrame:CGRectMake(15, 10, frame.size.width-100, 100)];
    titleButton.titleLabel.font = [UIFont boldSystemFontOfSize:24.0];
    [titleButton setTitle:@"This text is very long and should get truncated at the end of the second line" forState:UIControlStateNormal];
    titleButton.titleLabel.lineBreakMode = UILineBreakModeTailTruncation;
    titleButton.titleLabel.numberOfLines = 2;
    [self addSubview:titleButton];

Wenn ich das versuche, erscheint der Text nur in einer Zeile. Es scheint, dass der einzige Weg, um mehr als eine Textzeile zu erreichen UIButton.titleLabel, das Festlegen numberOfLines=0und Verwenden ist UILineBreakModeWordWrap. Dies garantiert jedoch nicht, dass der Text genau zwei Zeilen umfasst.

Die Verwendung einer Ebene UILabelfunktioniert jedoch:

    UILabel *titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(15, 10, frame.size.width-100, 100)];
    titleLabel.font = [UIFont boldSystemFontOfSize:24.0];
    titleLabel.text = @"This text is very long and should get truncated at the end of the second line";
    titleLabel.numberOfLines = 2;
    titleLabel.lineBreakMode = UILineBreakModeTailTruncation;
    [self addSubview:titleLabel];

Weiß jemand, wie man die UIButtonArbeit mit zwei Zeilen macht? Ist die einzige Lösung, eine separate Lösung für UILabelden Text zu erstellen und ihn als Unteransicht der Schaltfläche hinzuzufügen?


1
Hast du das gesehen ? - stackoverflow.com/questions/604632/…
Viraj

Viraj, ja, wenn Sie festlegen numberOfLines=0und verwenden UILineBreakModeWordWrap, können Sie mehrere Zeilen erhalten. Das Problem dabei ist, dass es mehr als zwei Zeilen geben kann, wenn der Text zu lang ist. Ich möchte genau zwei Lones mit einem Elipsen am Ende der zweiten Zeile (wenn der Text zu lang ist).
Vermarkter

Oh, dann könnte das Hinzufügen einer Unteransicht der einzige Weg sein.
Viraj

Antworten:


87

Aktualisierte Antwort für neuere iOS-Versionen

Da dies die akzeptierte Antwort ist, wurde hier die Antwort von @ Sean hinzugefügt:

Legen Sie diese Eigenschaften im titleLabel Ihrer Schaltfläche fest.

button.titleLabel.lineBreakMode = NSLineBreakByWordWrapping;
button.titleLabel.numberOfLines = 2; // if you want unlimited number of lines put 0

Swift 3 und 4:

button.titleLabel?.lineBreakMode = .byWordWrapping
button.titleLabel?.numberOfLines = 2 // if you want unlimited number of lines put 0

Ursprüngliche Antwort für eine ältere Version von iOS

Wenn Sie 2 Textzeilen darüber haben möchten UIButton, sollten Sie darüber eine hinzufügen UIlabel, die genau das tut.

UILabel *titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(15, 10, frame.size.width-100, 100)];
titleLabel.font = [UIFont boldSystemFontOfSize:24.0];
titleLabel.text = @"This text is very long and should get truncated at the end of the second line";
titleLabel.numberOfLines = 2;
titleLabel.lineBreakMode = UILineBreakModeTailTruncation;
[myButton addSubview:titleLabel]; //add label to button instead.

Aktualisiert für die Interface Builder-Lösung

Die Antwort von @Borut Tomazin wurde hinzugefügt, um eine vollständigere Antwort zu erhalten. Dieser Teil wurde erneut aktualisiert, da die Antwort von @Borut Tomazin verbessert wurde.

Sie können dies viel einfacher tun, ohne dass Code erforderlich ist. Setzen Line BreakSie im Interface Builder auf UIButton auf Word Wrap. Dann können Sie mehrere Titelzeilen einfügen. Drücken Sie einfach die Option + ReturnTasten, um eine neue Zeile zu erstellen. Sie müssen dies auch dem benutzerdefinierten Laufzeitattribut in Interface Builder hinzufügen:

titleLabel.textAlignment Number [1]

5
UILineBreakModesind veraltet, verwenden Sie NSLineBreakModestattdessen
Guillaume

2
Dies ist ab den neuesten iOS-Versionen nicht mehr erforderlich. Siehe die Antwort von @ sean.
cbowns

146

Sie müssen dem UIButton kein UILabel hinzufügen. Das sind nur zusätzliche Objekte und Arbeit.

Legen Sie diese Eigenschaften im titleLabel Ihrer Schaltfläche fest.

button.titleLabel.lineBreakMode = NSLineBreakByWordWrapping;
button.titleLabel.numberOfLines = 2;//if you want unlimited number of lines put 0

Schnell:

button.titleLabel!.lineBreakMode = NSLineBreakMode.ByWordWrapping
button.titleLabel!.numberOfLines = 2//if you want unlimited number of lines put 0

6
Dies ist das Jahr 2013 und ab heute ist dies die Lösung auf dem neuesten Stand der Technik.
Klaas

@Blip kann man leider nicht und muss es im Code machen. Es könnte sich lohnen, einen Fehlerbericht bei Apple einzureichen, um diese Funktionalität anzufordern.
Papa

@bpapa Ja, ich stimme zu, Storyboards sollten flexibler sein.
Blip

6
Dies funktioniert bei mir, bricht jedoch das Standardverhalten der Schaltflächen intrinsicContentSize, wodurch immer noch eine Höhe zurückgegeben wird, die nur einer Textzeile entspricht. Ich habe es behoben, indem ich die Schaltflächen überschrieben habe, auf die intrinsicContentSizeich die Höhe eingestellt habe [self.titleLabel sizeThatFits(CGSizeMake(self.titleLabel.frame.size.width, CGFLOAT_MAX)].height.
Elise

@ WillVonUllrich, da Sie die akzeptierte Antwort nur ändern können, wenn sie bearbeitet wird. Ich habe diese Antworten zu der akzeptierten hinzugefügt, damit sie den Menschen helfen, die nicht weiter als bis zur akzeptierten Antwort suchen.
Totumus Maximus

87

Sie können dies viel einfacher tun, ohne dass Code erforderlich ist. Setzen Line BreakSie im Interface Builder auf UIButton auf Word Wrap. Dann können Sie mehrere Titelzeilen einfügen. Drücken Sie einfach die Option + ReturnTasten, um eine neue Zeile zu erstellen. Sie müssen dies auch dem benutzerdefinierten Laufzeitattribut in Interface Builder hinzufügen:

titleLabel.textAlignment Number [1]

So einfach ist das. Ich hoffe es hilft...


1
Diese Lösung ist in einfachen Fällen besser (weniger Objekte, Code) als die derzeit akzeptierte.
Jonathan Zhan

1
Sie legen genau die gleichen Eigenschaften fest wie programmgesteuert, sodass Ihr Argument "weniger Objekte" ungültig ist. Code ist vielleicht weniger. Aber es ist besser lesbar.
Treffen

Oh, ich war unklar, denke ich. Vielen Dank für den Versuch zu klären. War nicht so sehr besorgt darüber, dass es in IB vs Code gemacht wird. Mehr damit zu tun, dass Sie mit Boruts Lösung kein zusätzliches Etikett hinzufügen müssen und dass dies auch das Gleiche bewirkt. Aber ja, beide funktionieren großartig. :)
Jonathan Zhan

Es ist wirklich überwältigend, für solch eine grundlegende Aufgabe zum Code dahinter gehen zu müssen.
Kann Poyrazoğlu

3
Sie können dasselbe Ziel zu 100% codelos erreichen, indem Sie das titleLabel.textAlignment benutzerdefinierte Laufzeitattribut im Interface Builder hinzufügen und auf Number = 1 (NSTextAlignmentCenter-Wert) setzen.
0xced

21
 button.titleLabel.lineBreakMode = NSLineBreakByWordWrapping;

button.titleLabel.textAlignment = NSTextAlignmentCenter;

[button setTitle: @"Line1\nLine2" forState: UIControlStateNormal];

Perfektes! Sie müssen das NSStringInnere nicht teilen setTitle. `WordWrapping`` erledigt das für Sie!
Alex Cio

Für mich musste ich den String innerhalb des Set-Titels teilen. Ohne das hat es nicht funktioniert
user1960169

9

Um die Notwendigkeit, Code zu bearbeiten und damit Ihre Ansicht zu unterordnen, vollständig zu vermeiden, können Sie in Xcode5 und höher dem Vorschlag von Borut Tomazin folgen:

Setzen Sie im Interface Builder (oder Storyboard) den Zeilenumbruch auf Zeilenumbruch. Dann können Sie mehrere Titelzeilen einfügen. Drücken Sie einfach die Option+ ReturnTasten, um eine neue Zeile zu erstellen.

und dann können Sie in den benutzerdefinierten Laufzeitattributen hinzufügen

Schlüsselpfad: titleLabel.textAlignment
Typ: Number
Wert:1

Hinweis: Dies ist möglicherweise nicht vollständig "zukunftssicher", da wir die UITextAlignmentCenterKonstante in ihren numerischen Wert übersetzen (und diese Konstante kann sich ändern, wenn neue iOS-Versionen veröffentlicht werden), aber es scheint in naher Zukunft sicher zu sein.


0

Sie können den erforderlichen Wert direkt in Storyboard ändern. Wählen Sie die Schaltfläche aus, rufen Sie den Identitätsinspektor auf und fügen Sie im Abschnitt "Benutzerdefinierte Laufzeitattribute" das folgende Schlüssel-Wert-Paar hinzu:

Geben Sie hier die Bildbeschreibung ein

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.