Mam UILabel
miejsce na dwa wiersze tekstu. Czasami, gdy tekst jest zbyt krótki, ten tekst jest wyświetlany w pionowym środku etykiety.
Jak wyrównać tekst pionowo, aby zawsze znajdował się na górze UILabel
?
źródło
Mam UILabel
miejsce na dwa wiersze tekstu. Czasami, gdy tekst jest zbyt krótki, ten tekst jest wyświetlany w pionowym środku etykiety.
Jak wyrównać tekst pionowo, aby zawsze znajdował się na górze UILabel
?
Nie ma sposobu, aby ustawić wyrównanie w pionie na UILabel
, ale można uzyskać ten sam efekt, zmieniając ramkę etykiety. Zrobiłem pomarańczowe etykiety, abyś mógł wyraźnie zobaczyć, co się dzieje.
Oto szybki i łatwy sposób to zrobić:
[myLabel sizeToFit];
Jeśli masz etykietę z dłuższym tekstem, która utworzy więcej niż jedną linię, ustaw numberOfLines
na 0
(zero tutaj oznacza nieograniczoną liczbę linii).
myLabel.numberOfLines = 0;
[myLabel sizeToFit];
Dłuższa wersja
Zrobię etykietę w kodzie, abyś mógł zobaczyć, co się dzieje. Większość tego można również skonfigurować w Konstruktorze interfejsów. Moja konfiguracja to aplikacja oparta na widoku z obrazem tła, który zrobiłem w Photoshopie, aby pokazać marginesy (20 punktów). Etykieta ma atrakcyjny pomarańczowy kolor, dzięki czemu możesz zobaczyć, co się dzieje z wymiarami.
- (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];
}
Pewne ograniczenia w użyciu sizeToFit
wchodzą w grę z tekstem wyrównanym do środka lub do prawej. Oto co się dzieje:
// myLabel.textAlignment = NSTextAlignmentRight;
myLabel.textAlignment = NSTextAlignmentCenter;
[myLabel setNumberOfLines:0];
[myLabel sizeToFit];
Rozmiar etykiety jest nadal ustalony ze stałym lewym górnym rogiem. Możesz zapisać szerokość oryginalnej etykiety w zmiennej i ustawić ją później sizeToFit
lub nadać jej stałą szerokość, aby przeciwdziałać tym problemom:
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;
Pamiętaj, że sizeToFit
przestrzega minimalnej szerokości początkowej etykiety. Jeśli zaczniesz od etykiety o szerokości 100 i przywołasz sizeToFit
ją, otrzymasz od niej (prawdopodobnie bardzo wysoką) etykietę o szerokości 100 (lub nieco mniejszej). Przed zmianą rozmiaru możesz ustawić minimalną szerokość etykiety.
Kilka innych rzeczy do zapamiętania:
To, czy lineBreakMode
jest przestrzegane, zależy od jego ustawienia. NSLineBreakByTruncatingTail
(domyślne) jest później ignorowane sizeToFit
, podobnie jak pozostałe dwa tryby obcinania (głowa i środek). NSLineBreakByClipping
jest również ignorowane. NSLineBreakByCharWrapping
działa jak zwykle. Szerokość ramki jest nadal zawężona, aby pasowała do skrajnej prawej litery.
Mark Amery naprawił NIB i Storyboardy za pomocą Auto Layout w komentarzach:
Jeśli twoja etykieta jest zawarta w stalówce lub serii ujęć jako widok podrzędny
view
ViewController, który korzysta z autolayout, wówczas włączeniesizeToFit
połączeniaviewDidLoad
nie zadziała, ponieważ autolayout rozmiary i pozycje po podviewachviewDidLoad
są wywoływane i natychmiast cofną efekty twojegosizeToFit
połączenie. Jednak dzwonieniesizeToFit
od wewnątrzviewDidLayoutSubviews
będzie działać.
Wykorzystuje tę NSString
metodę sizeWithFont:constrainedToSize:lineBreakMode:
do obliczenia wysokości ramy potrzebnej do dopasowania łańcucha, a następnie ustawia początek i szerokość.
Zmień rozmiar ramki etykiety, używając tekstu, który chcesz wstawić. W ten sposób możesz pomieścić dowolną liczbę linii.
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
użyj sizeToFit, a następnie ustaw ramkę etykiety na 0, 0, szerokość, wysokość, etykieta.ramka.size.height (która jest nową wysokością określoną przez sizeToFit), a następnie zastosujadjustsFontSizeToFitWidth
Ustaw nowy tekst:
Ustaw
maximum number
linie na 0 (automatycznie):Ustaw ramkę etykiety na maksymalny rozmiar:
Zadzwoń,
sizeToFit
aby zmniejszyć rozmiar ramki, aby zawartość po prostu pasowała:Ramka etykiet jest teraz wystarczająco wysoka i wystarczająco szeroka, aby pasowała do tekstu. Lewy górny róg powinien pozostać niezmieniony. Przetestowałem to tylko z tekstem wyrównanym do lewego górnego rogu. W przypadku innych wyrównań może być konieczne zmodyfikowanie ramki później.
Ponadto moja etykieta ma włączone zawijanie słów.
źródło
Odnosząc się do rozwiązania rozszerzenia:
powinien zostać zastąpiony przez
Potrzebne jest dodatkowe miejsce w każdej dodanej nowej linii, ponieważ
UILabels
zwroty karetki iPhone'a wydają się być ignorowane :(Podobnie alignBottom również powinien zostać zaktualizowany o
@" \n@%"
miejsce"\n@%"
(dla inicjalizacji cyklu należy zastąpić przez „for (int i = 0 ...”).Działa dla mnie następujące rozszerzenie:
Następnie zadzwoń
[yourLabel alignTop];
lub[yourLabel alignBottom];
po każdym przypisaniu tekstu swojego etykiety.źródło
VerticalAlign
między nawiasami po@implementation UILabel
. Będąc nowym w Objective-C, nie spotkałem się wcześniej z tą składnią. Jak to się nazywa?sizeWithFont:constrainedToSize:lineBreakMode:
i sizeWithFont: są amortyzowane w iOS7. Ponadto ta kategoria działa tylko na etykietach, gdy liczbaOpLini jest większa niż 0.Na wszelki wypadek komuś pomogłem, miałem ten sam problem, ale mogłem go rozwiązać, przechodząc z używania
UILabel
na używanieUITextView
. Rozumiem, że nie jest to dla wszystkich, ponieważ funkcjonalność jest nieco inna.Jeśli przełączysz się na używanie
UITextView
, możesz wyłączyć wszystkie właściwości widoku przewijania, a także Włączoną interakcję użytkownika ... To zmusi go do działania bardziej jak etykieta.źródło
UITextView
dało mi od razu pożądany rezultat.Bez musów, bez zamieszania
Bez muz, bez Objective-c, bez kłopotów, ale Swift 3:
Szybki 4.2
źródło
Podobnie jak powyższa odpowiedź, ale nie było to w porządku lub łatwo było spoliczkować kod, więc trochę go wyczyściłem. Dodaj to rozszerzenie do własnego pliku .h i .m lub po prostu wklej bezpośrednio nad implementacją, której zamierzasz użyć:
Następnie użyj, umieść tekst na etykiecie, a następnie wywołaj odpowiednią metodę, aby go wyrównać:
lub
źródło
Jeszcze szybszym (i bardziej brudnym) sposobem na osiągnięcie tego jest ustawienie trybu podziału linii UILabel na „Clip” i dodanie stałej liczby nowych linii.
To rozwiązanie nie będzie działać dla wszystkich - w szczególności, jeśli nadal chcesz wyświetlać „...” na końcu łańcucha, jeśli przekracza on liczbę wyświetlanych wierszy, musisz użyć jednego z dłuższe fragmenty kodu - ale w wielu przypadkach dostaniesz to, czego potrzebujesz.
źródło
UILineBreakModeWordWrap
zamiast tego.Najłatwiejsze podejście przy użyciu Storyboard:
Osadź etykietę w StackView i ustaw następujące dwa atrybuty StackView w Inspektorze atrybutów:
1
Axis
doHorizontal
,2-
Alignment
doTop
źródło
UILabel
w jakiejśUIView
podklasie (UIView
zwykle wystarcza zwykły ) i pozwolić, aby etykieta rosła w dół. Dzięki!UILabel
i niech StackView wykonywać swoje zadania. Dzięki!Zamiast tego
UILabel
możesz użyćUITextField
opcji wyrównania pionowego:źródło
Walczyłem z tym przez długi czas i chciałem podzielić się moim rozwiązaniem.
To da ci
UILabel
automatyczne odświeżanie tekstu do 0,5 skali i wyśrodkowanie tekstu w pionie. Te opcje są również dostępne w Storyboard / IB.źródło
Utwórz nową klasę
LabelTopAlign
plik .h
plik .m
Edytować
Oto prostsza implementacja, która robi to samo:
źródło
sizeToFit
rozwiązań powoduje toUILabel
umieszczenie dowolnego tekstu u góry, nawet jeśli dynamicznie zamieniasz krótszy tekst na dłuższy lub odwrotnie.W Konstruktorze interfejsów
UILabel
rozmiar największego możliwego tekstuLines
na „0” w Inspektorze atrybutówW twoim kodzie
sizeToFit
na swoją etykietęFragment kodu:
źródło
W przypadku adaptacyjnego interfejsu użytkownika (iOS8 lub nowszego) wyrównanie w pionie UILabel należy ustawić w StoryBoard, zmieniając właściwości
noOfLines
= 0` iEdytowane:
i następujące ograniczenia są wystarczające do osiągnięcia pożądanych rezultatów.
źródło
Utwórz podklasę UILabel. Działa jak marzenie:
Jak omówiono tutaj .
źródło
Napisałem funkcję util, aby osiągnąć ten cel. Możesz rzucić okiem:
.Jak używać? (Jeśli lblHello jest tworzony przez Konstruktora interfejsów, pomijam niektóre szczegóły atrybutów UILabel)
Napisałem go również na moim blogu jako artykuł: http://fstoke.me/blog/?p=2819
źródło
Poświęciłem trochę czasu na przeczytanie kodu, a także kodu na wprowadzonej stronie, i stwierdziłem, że wszyscy próbują zmodyfikować rozmiar ramki etykiety, aby domyślne wyświetlanie w środku nie było widoczne.
Jednak w niektórych przypadkach chcemy, aby etykieta zajmowała wszystkie te spacje, nawet jeśli etykieta zawiera tak dużo tekstu (np. Wiele wierszy o równej wysokości).
Tutaj użyłem alternatywnego sposobu rozwiązania tego problemu, po prostu wstawiając nowe wiersze na końcu etykiety (proszę zauważyć, że tak naprawdę odziedziczyłem
UILabel
, ale nie jest to konieczne):źródło
To, co zrobiłem w mojej aplikacji, to ustawienie właściwości linii UILabel na 0 oraz utworzenie dolnego ograniczenia UILabel i upewnienie się, że jest ustawione na> = 0, jak pokazano na poniższym obrazku.
źródło
Wziąłem tutaj sugestie i stworzyłem widok, który może zawijać UILabel i będzie go dopasowywać i ustawiać liczbę linii, aby był wyrównany do góry. Wystarczy umieścić UILabel jako widok podrzędny:
źródło
Możesz użyć TTTAttributLabel , obsługuje wyrównanie w pionie.
źródło
Znalazłem, że odpowiedzi na to pytanie są teraz trochę nieaktualne, więc dodaję to dla fanów automatycznych układów.
Auto układ sprawia, że ten problem jest dość trywialny. Zakładając, że dodajemy etykietę
UIView *view
, następujący kod to osiągnie:Wysokość etykiety zostanie obliczona automatycznie (przy użyciu jej
intrinsicContentSize
), a etykieta będzie ustawiona od krawędzi do krawędzi poziomo, na górzeview
.źródło
Użyłem wielu powyższych metod i chcę tylko dodać szybkie i brudne podejście:
Upewnij się, że liczba nowych wierszy w ciągu spowoduje, że dowolny tekst zapełni dostępną przestrzeń pionową, i ustaw UILabel, aby obcinał przepełniony tekst.
Ponieważ czasami wystarczająco dobry jest wystarczająco dobry .
źródło
UITextView
, że można wywoływaćdlopen
w celu obsługi wprowadzania tekstu. Może to powodować duże opóźnienie w wątku interfejsu użytkownika, więc to podejście jest znacznie wydajniejsze!Chciałem mieć etykietę, która mogłaby mieć wiele linii, minimalny rozmiar czcionki i wyśrodkowana zarówno w poziomie, jak i w pionie w widoku nadrzędnym. Dodałem programowo moją etykietę do mojego widoku:
A potem, gdy chciałem zmienić tekst mojej wytwórni ...
Mam nadzieję, że komuś pomoże!
źródło
FXLabel (na github) robi to od razu po ustawieniu
label.contentMode
naUIViewContentModeTop
. Ten komponent nie jest tworzony przeze mnie, ale jest to komponent, z którego często korzystam, ma mnóstwo funkcji i wydaje się działać dobrze.źródło
dla każdego, kto to czyta, ponieważ tekst wewnątrz etykiety nie jest wyśrodkowany pionowo, należy pamiętać, że niektóre typy czcionek nie są projektowane jednakowo. na przykład, jeśli utworzysz etykietę o rozmiarze zapfino 16, zobaczysz, że tekst nie jest idealnie wyśrodkowany w pionie.
jednak praca z helvetica spowoduje wyśrodkowanie tekstu w pionie.
źródło
Zastosowanie
textRect(forBounds:limitedToNumberOfLines:)
.źródło
Podklasę UILabel i ograniczanie prostokąta rysunkowego:
Wypróbowałem rozwiązanie polegające na dodawaniu nowego wiersza i w niektórych przypadkach napotkałem nieprawidłowe zachowanie. Z mojego doświadczenia wynika, że łatwiej jest ograniczyć rysowanie jak wyżej niż bałagan
numberOfLines
.PS Możesz sobie wyobrazić łatwą obsługę UIViewContentMode w ten sposób:
źródło
Jeśli używasz autolayout, ustaw wartość contentHuggingPriority w pionie na 1000, zarówno w kodzie, jak i IB. W IB może być wtedy konieczne usunięcie ograniczenia wysokości poprzez ustawienie jego priorytetu na 1, a następnie usunięcie go.
źródło
Dopóki nie wykonujesz żadnego złożonego zadania, możesz użyć
UITextView
zamiast niegoUILabels
.Wyłącz przewijanie.
Jeśli chcesz, aby tekst był wyświetlany całkowicie, po prostu użytkownik
sizeToFit
isizeThatFits:
metodyźródło
W krótkim
let myLabel : UILabel!
Aby tekst etykiety był dopasowany do ekranu i znajduje się na górze
myLabel.sizeToFit()
Aby dopasować czcionkę etykiety do szerokości ekranu lub określonego rozmiaru.
myLabel.adjustsFontSizeToFitWidth = YES
i trochę tekstu Wyrównanie etykiety:
myLabel.textAlignment = .center
myLabel.textAlignment = .left
myLabel.textAlignment = .right
myLabel.textAlignment = .Natural
myLabel.textAlignment = .Justified
źródło
[myLabel sizeToFit]
. Dziękuję Ci!To stare rozwiązanie, użyj autolayout na iOS> = 6
Moje rozwiązanie:
źródło