iOS: Wieloliniowy UILabel w układzie automatycznym

Mam problem z uzyskaniem bardzo podstawowego zachowania układu za pomocą funkcji automatycznego układu. Mój kontroler widoku wygląda tak w IB:

Górna etykieta to etykieta tytułowa, nie wiem ile to będzie linii. Potrzebuję etykiety tytułu, aby wyświetlić wszystkie wiersze tekstu. Potrzebuję również pozostałych dwóch etykiet i małego obrazu, który powinien być umieszczony tuż pod tytułem, jakkolwiek by nie był wysoki. Ustawiłem ograniczenia pionowego odstępu między etykietami a małym obrazem, a także górne ograniczenie odstępów między etykietą tytułu a jego widokiem oraz dolne ograniczenie między małym obrazem a widokiem. Biały UIView nie ma ograniczenia wysokości, więc powinien rozciągać się w pionie, aby zawierał swoje widoki podrzędne. Ustawiłem liczbę linii dla etykiety tytułu na 0.

Jak mogę zmienić rozmiar etykiety tytułu, aby dopasować ją do liczby linii wymaganych przez ciąg? Rozumiem, że nie mogę korzystać z metod setFrame, ponieważ korzystam z automatycznego układu. I muszę użyć Auto Layout, ponieważ potrzebuję tych innych widoków, aby pozostały poniżej etykiety tytułu (stąd ograniczenia).

Jak mogę to zrobić?

Użyj -setPreferredMaxLayoutWidthna UILabeli autoukład powinien obsłużyć resztę.

[label setPreferredMaxLayoutWidth:200.0];

Zobacz dokumentację UILabel na preferMaxLayoutWidth .

Aktualizacja:

Wystarczy ustawić heightograniczenie w serii ujęć na Greater than or equal to, nie trzeba ustawiaćPreferredMaxLayoutWidth.

Rozwiń liczbę wierszy zestawu etykiet do 0, a także, co ważniejsze, wysokość zestawu automatycznego układu do>> x. Automatyczny układ zajmie się resztą. Możesz również zawierać inne elementy oparte na poprzednim elemencie, aby prawidłowo ustawić.

Źródło: http://www.objc.io/issue-3/advanced-auto-layout-toolbox.html

Rozmiar zawartości wewnętrznej tekstu wielowierszowego

Rzeczywisty rozmiar zawartości UILabel i NSTextField jest niejednoznaczny w przypadku tekstu wielowierszowego. Wysokość tekstu zależy od szerokości linii, która nie została jeszcze ustalona przy rozwiązywaniu ograniczeń. W celu rozwiązania tego problemu obie klasy mają nową właściwość o nazwie preferowanyMaxLayoutWidth, która określa maksymalną szerokość linii do obliczania wewnętrznej wielkości zawartości.

Ponieważ zwykle nie znamy tej wartości z wyprzedzeniem, musimy zastosować dwustopniowe podejście, aby uzyskać tę prawidłowość. Najpierw pozwalamy Auto Layout wykonać swoją pracę, a następnie wykorzystujemy wynikową ramkę w przebiegu układu, aby zaktualizować preferowaną maksymalną szerokość i ponownie uruchomić układ.

- (void)layoutSubviews
{
    [super layoutSubviews];
    myLabel.preferredMaxLayoutWidth = myLabel.frame.size.width;
    [super layoutSubviews];
}

Pierwsze wywołanie [super layoutSubviews] jest konieczne, aby etykieta mogła ustawić ramkę, a drugie wywołanie jest konieczne do zaktualizowania układu po zmianie. Jeśli pominiemy drugie wywołanie, otrzymamy błąd NSInternalInconsistencyException, ponieważ dokonaliśmy zmian w przebiegu układu, które wymagają aktualizacji ograniczeń, ale nie uruchomiliśmy układu ponownie.

Możemy to również zrobić w samej podklasie etykiet:

@implementation MyLabel
- (void)layoutSubviews
{
    self.preferredMaxLayoutWidth = self.frame.size.width;
    [super layoutSubviews];
}
@end

W tym przypadku nie musimy najpierw wywoływać [super layoutSubviews], ponieważ kiedy wywoływany jest layoutSubviews, mamy już ramkę na samej etykiecie.

Aby dokonać tej regulacji z poziomu kontrolera widoku, przechodzimy do viewDidLayoutSubviews. W tym momencie ramki pierwszego przebiegu automatycznego układu są już ustawione i możemy ich użyć, aby ustawić preferowaną maksymalną szerokość.

- (void)viewDidLayoutSubviews
{
    [super viewDidLayoutSubviews];
    myLabel.preferredMaxLayoutWidth = myLabel.frame.size.width;
    [self.view layoutIfNeeded];
}

Na koniec upewnij się, że nie masz wyraźnego ograniczenia wysokości na etykiecie, która ma wyższy priorytet niż priorytet odporności na kompresję zawartości etykiety. W przeciwnym razie przebije obliczoną wysokość zawartości. Sprawdź wszystkie ograniczenia, które mogą wpłynąć na wysokość etykiety.

Właśnie walczyłem z tym dokładnie scenariuszem, ale z kilkoma dodatkowymi widokami, które musiały zmienić rozmiar i przesuwać się w razie potrzeby. Doprowadzało mnie to do szału, ale w końcu to rozgryzłem.

Oto klucz: Konstruktor interfejsów lubi wprowadzać dodatkowe ograniczenia podczas dodawania i przenoszenia widoków i możesz tego nie zauważyć. W moim przypadku miałem widok w połowie drogi, który miał dodatkowe ograniczenie, które określało rozmiar między nim a jego nadzorem, po prostu przypinając go do tego punktu. Oznaczało to, że nic powyżej tego nie mogło zmienić rozmiaru, ponieważ byłoby sprzeczne z tym ograniczeniem.

Prostym sposobem na stwierdzenie, czy tak jest, jest próba ręcznej zmiany rozmiaru etykiety. Czy IB pozwala ci to wyhodować? Jeśli tak, czy poniższe etykiety poruszają się zgodnie z oczekiwaniami? Upewnij się, że oba te elementy są zaznaczone przed zmianą rozmiaru, aby zobaczyć, w jaki sposób ograniczenia spowodują przesunięcie widoków:

Jeśli widok jest zablokowany, postępuj zgodnie z widokami pod nim i upewnij się, że jeden z nich nie ma górnej przestrzeni do ograniczenia podglądu. Następnie upewnij się, że opcja liczby linii dla etykiety jest ustawiona na 0, a resztę zajmie resztę.

Uważam, że potrzebujesz następujących elementów:

• Górne ograniczenie
• Wiodące ograniczenie (np. Lewa strona)
• Ograniczenie końcowe (np. Prawa strona)
• Ustaw priorytet przytulania treści, od poziomego do niskiego, aby wypełnił podane miejsce, jeśli tekst jest krótki.
• Ustaw odporność na kompresję treści, poziomą na niską, aby zawijała się zamiast próbować się poszerzać.
• Ustaw liczbę linii na 0.
• Ustaw tryb podziału linii na zawijanie wyrazów.

Żadne z różnych rozwiązań znalezionych w wielu tematach na ten temat nie działało idealnie w moim przypadku (x dynamiczne etykiety wielowierszowe w komórkach dynamicznego widoku tabeli).

Znalazłem sposób, aby to zrobić:

Po ustawieniu ograniczeń na etykiecie i ustawieniu jej właściwości multilinii na 0, utwórz podklasę UILabel; Zadzwoniłem do mojego AutoLayoutLabel:

@implementation AutoLayoutLabel

- (void)layoutSubviews{
    [self setNeedsUpdateConstraints];
    [super layoutSubviews];
    self.preferredMaxLayoutWidth = CGRectGetWidth(self.bounds);
}

@end

Mam UITableViewCell, który ma etykietę zawijania tekstu. Pracowałem nad zawijaniem tekstu w następujący sposób.

1) Ustaw ograniczenia UILabel w następujący sposób.

2) Zestaw nr linii do 0.

3) Dodano ograniczenie wysokości UILabel do UITableViewCell.

@IBOutlet weak var priorityLabelWidth: NSLayoutConstraint!

4) W UITableViewCell:

priorityLabel.sizeToFit()
priorityLabelWidth.constant = priorityLabel.intrinsicContentSize().width+5

Jeden ze sposobów, aby to zrobić ... Gdy długość tekstu rośnie, spróbuj zmienić (zmniejszyć) rozmiar czcionki tekstu etykiety za pomocą

Label.adjustsFontSizeToFitWidth = YES;