UIButton z dwoma wierszami tekstu w tytule (numberOfLines = 2)


86

Próbuję utworzyć UIButtonetykietę, która ma dwa wiersze tekstu w tytule. Oto kod, którego używam:

    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];

Kiedy próbuję tego, tekst pojawia się tylko w jednej linii. Wydaje się, że jedynym sposobem na osiągnięcie więcej niż jednej linii tekstu UIButton.titleLabeljest ustawienie numberOfLines=0i użycie UILineBreakModeWordWrap. Ale to nie gwarantuje, że tekst będzie miał dokładnie dwa wiersze.

UILabelJednak użycie zwykłego działa:

    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];

Czy ktoś wie, jak wykonać UIButtonpracę z dwiema liniami? Czy jedynym rozwiązaniem jest utworzenie oddzielnego UILabeldo przechowywania tekstu i dodanie go jako podwidoku przycisku?



Viraj, tak, jeśli ustawisz numberOfLines=0i użyjesz UILineBreakModeWordWrap, możesz uzyskać wiele linii. Problem polega na tym, że może dać więcej niż dwa wiersze, jeśli tekst jest zbyt długi. Chcę dokładnie dwóch samotnych z elipsami na końcu drugiej linii (jeśli tekst jest za długi).
— marketer

Och, więc myślę, że dodanie podglądu podrzędnego może być jedynym sposobem.
— Viraj

Odpowiedzi:


87

Zaktualizowana odpowiedź na nowsze wersje iOS

Ponieważ jest to zaakceptowana odpowiedź, dodałem odpowiedź @ Sean tutaj:

Ustaw te właściwości w titleLabel swojego przycisku.

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

Swift 3 i 4:

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

Oryginalna odpowiedź na starszą wersję iOS

Jeśli chcesz, aby na wierzchu znajdowały się 2 wiersze tekstu UIButton, dodaj UIlabelna nim znak , który dokładnie to robi.

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.

Zaktualizowano dla rozwiązania do tworzenia interfejsów

Dodano odpowiedź @Borut Tomazin, aby uzyskać pełniejszą odpowiedź. Zaktualizowałem tę część ponownie, ponieważ poprawiono odpowiedź @Borut Tomazin.

Możesz to zrobić znacznie łatwiej, bez konieczności stosowania kodu. W programie Interface Builder ustawiono Line BreakUIButton na Word Wrap. Następnie możesz wstawić wiele wierszy tytułu. Po prostu naciśnij Option + Returnklawisze, aby utworzyć nową linię. Będziesz także musiał dodać to do atrybutu środowiska wykonawczego zdefiniowanego przez użytkownika w programie Interface Builder:

titleLabel.textAlignment Number [1]

5
UILineBreakModesą przestarzałe, użyj NSLineBreakModezamiast nich
— guillaume

2
Jest to niepotrzebne od najnowszych wersji iOS. Zobacz odpowiedź @ sean.
— cbowns

146

Nie musisz dodawać UILabel do UIButton. To tylko dodatkowe przedmioty i praca.

Ustaw te właściwości w titleLabel swojego przycisku.

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

Szybki:

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

6
Tak wygląda rok 2013 i na dzień dzisiejszy jest to najnowocześniejsze rozwiązanie.
— Klaas

@Blip nie możesz niestety i musisz to zrobić w kodzie. Warto zgłosić błąd w Apple, prosząc o tę funkcję.
— bpapa

@bpapa Tak Zgadzam się, storyboardy powinny być bardziej elastyczne.
— Blip

6
To działa dla mnie, jednak przerywa domyślne zachowanie przycisku intrinsicContentSize, który nadal zwraca wysokość odpowiadającą tylko jednej linii tekstu. Naprawiłem to, zastępując przycisk, w intrinsicContentSizektórym ustawiam wysokość [self.titleLabel sizeThatFits(CGSizeMake(self.titleLabel.frame.size.width, CGFLOAT_MAX)].height.
— Elise,

@WillVonUllrich, ponieważ zaakceptowaną odpowiedź można zmienić tylko wtedy, gdy jest ona edytowana. Dodałem te odpowiedzi do zaakceptowanej, aby pomóc ludziom, którzy nie patrzą dalej niż zaakceptowana odpowiedź.
— Totumus Maximus

88

Możesz to zrobić znacznie łatwiej, bez konieczności stosowania kodu. W programie Interface Builder ustawiono Line BreakUIButton na Word Wrap. Następnie możesz wstawić wiele wierszy tytułu. Po prostu naciśnij Option + Returnklawisze, aby utworzyć nową linię. Musisz również dodać to do atrybutu środowiska wykonawczego zdefiniowanego przez użytkownika w programie Interface Builder:

titleLabel.textAlignment Number [1]

To takie proste. Mam nadzieję, że to pomoże...


1
To rozwiązanie jest lepsze (mniej obiektów, kodu) niż obecnie akceptowane, dla prostych przypadków.
— Jonathan Zhan

1
Ustawiasz te same właściwości, co programowo, więc argument „mniej obiektów” jest nieprawidłowy. Kod może być mniejszy. Ale jest bardziej czytelny. Wybierz;)
— Totumus Maximus

Och, myślę, że nie było jasne. Dzięki za próbę wyjaśnienia. Nie był tak bardzo zaniepokojony faktem, że odbywa się to w IB vs Code. Chodzi bardziej o to, że nie musisz dodawać dodatkowej etykiety z rozwiązaniem Boruta i że to również robi to samo. Ale tak, oba działają świetnie. :)
— Jonathan Zhan

to naprawdę przytłaczające, że trzeba posługiwać się kodem dla tak podstawowego zadania.
— Can Poyrazoğlu

3
Możesz osiągnąć ten sam cel w 100% bez kodowania, dodając titleLabel.textAlignment atrybut czasu wykonywania zdefiniowany przez użytkownika w programie Interface Builder i ustawiając go na Number = 1 (wartość NSTextAlignmentCenter).
— Zamknięto

21
 button.titleLabel.lineBreakMode = NSLineBreakByWordWrapping;

button.titleLabel.textAlignment = NSTextAlignmentCenter;

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

Ten idealny! Nie musisz dzielić NSStringwnętrza setTitle. `` WordWrapping '' robi to za Ciebie!
— Alex Cio

Dla mnie musiałem podzielić ciąg w tytule zestawu. Bez tego to nie zadziałało
— user1960169

9

Aby całkowicie uniknąć konieczności edycji kodu, a tym samym konieczności podklasowania widoku, w Xcode5 i nowszych możesz skorzystać z sugestii Boruta Tomazina:

In Interface Builder (lub storyboard) ustaw Line Break na Word Wrap. Następnie możesz wstawić wiele wierszy tytułu. Po prostu naciśnij klawisze Option+ Return, aby utworzyć nową linię.

a następnie w atrybutach środowiska wykonawczego zdefiniowanych przez użytkownika, które możesz dodać

Kluczowa ścieżka: titleLabel.textAlignment
Typ: Number
Wartość:1

Uwaga: może to nie być całkowicie „przyszłościowe”, ponieważ przekładamy UITextAlignmentCenterstałą na jej wartość liczbową (i ta stała może ulec zmianie w miarę wydawania nowych wersji iOS), ale wydaje się być bezpieczna w najbliższej przyszłości.


0

Możesz modyfikować potrzebną wartość bezpośrednio z Storyboard. Wybierz przycisk, przejdź do inspektora tożsamości i dodaj następującą parę klucz-wartość w sekcji „Atrybuty środowiska wykonawczego zdefiniowane przez użytkownika”:

wprowadź opis obrazu tutaj

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.