Próbuję utworzyć przycisk, który ma tekst pod ikoną (podobnie jak przyciski aplikacji), ale wydaje się, że jest to dość trudne do osiągnięcia. Jakieś pomysły, w jaki sposób mogę wyświetlić tekst pod obrazem za pomocą UIButton
znaku?
158
https://github.com/albert-zhang/AZCenterLabelButton
( Link )Odpowiedzi:
Lub możesz po prostu skorzystać z tej kategorii:
ObjC
Szybkie rozszerzenie
Sugestia: jeśli wysokość przycisku jest mniejsza niż
totalHeight
, obraz będzie rysował zewnętrzne krawędzie.imageEdgeInset.top
Powinien być:źródło
CGRectGetHeight()
iCGRectGetWidth()
podczas pobierania wysokości i szerokości imageView i titleLabel.CGFloat inset = (self.frame.size.height - totalHeight)/2; self.contentEdgeInsets = UIEdgeInsetsMake(inset, 0.0f, inset, 0.0f);
W Xcode możesz po prostu ustawić lewe wstawienie tytułu krawędzi na ujemną szerokość obrazu. Spowoduje to wyświetlenie etykiety na środku obrazu.
Aby etykieta była wyświetlana pod obrazem (podobnie jak przyciski aplikacji), może być konieczne ustawienie górnego wsuwania tytułu krawędzi na jakąś dodatnią liczbę.
źródło
Jest to prosty wyśrodkowany przycisk tytułu zaimplementowany w Swift przez zastąpienie
titleRect(forContentRect:)
iimageRect(forContentRect:)
. Implementuje równieżintrinsicContentSize
do użytku z AutoLayout.źródło
Spójrz na tę świetną odpowiedź w Swift.
źródło
left
wimageEdgeInsets
przy(self.frame.size.width - imageSize.width) / 2
layoutSubviews()
swoim nadzorze.Podklasa
UIButton
. Zastąp -layoutSubviews
aby przenieść wbudowany elementsubviews
na nowe pozycje:źródło
titleRectForContentRect
iimageRectForContentRect
Odpowiedź refaktoryzowanego icecrystal23.
Swift 3, działa z automatycznymi układami, xib, scenorysami, może być animowany.
Przycisk w oryginalnej odpowiedzi icecrystal23 miał źle obliczoną ramkę. Myślę, że naprawiłem to.
Edycja: Zaktualizowano do Swift 5 i wykonałem pracę w Interface Builder / Storyboards
źródło
poprawiła jedną z odpowiedzi tutaj:
Swift 3:
źródło
To jest zmodyfikowana wersja doskonałej odpowiedzi Erika W. Ale zamiast umieszczać obraz wyśrodkowany na górze widoku, umieszcza obraz i etykietę pośrodku widoku jako grupę.
Różnica jest taka:
vs
Źródło poniżej:
Do Twojej wiadomości: To może się zepsuć w połączeniu z animacjami UIView, ponieważ podczas ich wywoływania layoutSubviews.
źródło
Rozwiązanie Dave'a w Swift:
źródło
Jeśli korzystasz z podklasy
UIButton
ioverride layoutSubviews
, możesz użyć poniższego, aby wyśrodkować obraz i umieścić tytuł pośrodku pod nim:kTextTopPadding
to stała, którą musisz wprowadzić, która określa odstęp między obrazem a tekstem pod nim.źródło
Zaktualizowano odpowiedź Kenny'ego Winkera, ponieważ sizeWithFont został wycofany w iOS 7.
źródło
Na iOS 11 / Swift 4 żadna z powyższych odpowiedzi naprawdę nie zadziałała. Znalazłem kilka przykładów i umieściłem na nim mój spin:
Mam nadzieję, że to komuś pomoże.
źródło
Używając kodu Kenny'ego Winkera i Simeona, tworzę ten szybki kod, który działa dla mnie.
źródło
Wystarczy dostosować wszystkie trzy wstawki krawędzi w zależności od rozmiaru obrazu i etykiety tytułowej:
Możesz uzyskać granice etykiety tytułu, wywołując sizeToFit po ustawieniu jego tekstu. Odstępy w poziomie powinny działać niezależnie od rozmiaru tekstu, czcionki i obrazu, ale nie znam jednego rozwiązania, które zapewniłoby spójne odstępy pionowe i dolną krawędź krawędzi.
źródło
Oto odpowiedź „Bear With Me” jako podklasa w
Swift 2.0
. Aby go użyć, po prostu zmień klasę przyciskuInterface Builder
naVerticalButton
a podgląd w magiczny sposób zaktualizuje.Zaktualizowałem go również, aby obliczyć prawidłowy wewnętrzny rozmiar zawartości dla automatycznego układu.
źródło
layoutSubviews()
w moim przypadku jest wywoływana wielokrotnie:intrinsicContentSize
access,imageView
która powodujelayoutSubviews
wywołanie, które uzyskuje dostępimageView
itp.@Tiago Zmieniam twoją odpowiedź w ten sposób. Działa dobrze we wszystkich rozmiarach
źródło
Wziąłem tutaj kombinację odpowiedzi i wymyśliłem jedną, która wydaje się działać dla mnie, w Swift. Nie podoba mi się to, jak po prostu przesłoniłem wstawki, ale to działa. Byłbym otwarty na sugestie ulepszeń w komentarzach. Wydaje się, że działa poprawnie zi z
sizeToFit()
układem automatycznym.źródło
Użyj tych dwóch metod:
Przykład:
Możesz użyć:
źródło
Swift 5 - poniższa metoda działa u mnie
Upewnij się, że tytuł przycisku nie jest obcięty w scenorysie / xib, w przeciwnym razie przejdź do
rozwiązania 2
źródło
Okazało się, że odpowiedź Simeona była prawdopodobnie najlepsza, ale dała mi dziwne wyniki na niektórych przyciskach i po prostu nie mogłem zrozumieć, dlaczego. Używając jego odpowiedzi jako podstawy, zaimplementowałem moje przyciski zgodnie z poniższym:
źródło
Oto moja podklasa,
UIButton
która rozwiązuje ten problem:Otóż to. Działa jak urok. Problem może się pojawić, jeśli przycisk będzie zbyt mały, aby zmieścił się w tytule i tekście.
źródło
Myślę, że jednym z najlepszych sposobów na to jest podklasa UIButton i nadpisanie niektórych metod renderowania:
źródło
@ Simeona rozwiązanie w celu C
źródło
CGSizeMake(MAX(labelSize.width, image.size.width), image.size.height + labelSize.height + 5.0)
w przypadkuJeśli używasz niestandardowych czcionek, obliczenie rozmiaru etykiety tytułowej nie będzie działać poprawnie, należy je zastąpić
let titleLabelSize = self.titleLabel?.text?.size(withAttributes: [NSAttributedStringKey.font: self.titleLabel!.font!])
źródło
Zamiast przechodzić przez piekło, próbując ustawić ikonę i tekst za pomocą wstawek krawędziowych, możesz utworzyć NSAttributedString z obrazem jako załącznikiem i ustawić go jako przypisany tytuł przycisku:
źródło
UIButton
Układy pól tekstowych A wyświetlają tylko 1 linię, dlatego nie działa nawet przy użyciu podziału wiersza w przypisanym ciągu. W przeciwnym razie byłoby fajnym rozwiązaniem.button.titleLabel?.numberOfLines
, aby uzyskać wymaganą liczbę liniiRozwiązanie przyjazne dla lokalizacji:
Tyle świetnych rozwiązań, ale chciałbym dodać tutaj uwagę dla tych, którzy używają lokalizacji.
Musisz zamienić lewe i prawe wartości EdgeInstets, aby przycisk został poprawnie ułożony w przypadku zmiany kierunku języka z LtR na RtL.
Korzystając z podobnego rozwiązania zaimplementowałbym je w następujący sposób:
źródło
Górny obraz i dolny przycisk tytułu z podklasą UIButton
źródło
To zdecydowanie przesada w przypadku tego pytania, jednak ... W jednym z moich projektów najpierw musiałem zaimplementować przycisk z ikoną wyrównaną do lewej strony. Następnie otrzymaliśmy kolejny przycisk z tytułem pod obrazem. Szukałem istniejącego rozwiązania, ale bez powodzenia. Oto przycisk z możliwością dopasowania:
Mam nadzieję, że uznasz to za przydatne.
źródło
Coś takiego w
UIButton
podklasieźródło
To całkiem proste.
Zamiast tego:
Użyj tego:
Następnie możesz łatwo dodać tekst na przycisku za pomocą:
// button.titleLabel! .font = UIFont (nazwa: "FontName", rozmiar: 30)
źródło