Ich versuche, eine Schaltfläche zu erstellen, die Text unter dem Symbol enthält (ähnlich wie die App-Schaltflächen), aber es scheint ziemlich schwierig zu sein, dies zu erreichen. Irgendwelche Ideen, wie ich vorgehen kann, um den Text unter dem Bild mit einem anzuzeigen UIButton
?
158
https://github.com/albert-zhang/AZCenterLabelButton
( Link )Antworten:
Oder Sie können einfach diese Kategorie verwenden:
ObjC
Schnelle Erweiterung
Vorschlag: Wenn die Schaltflächenhöhe kleiner als ist
totalHeight
, wird das Bild außerhalb der Ränder gezeichnet.imageEdgeInset.top
sollte sein:quelle
CGRectGetHeight()
undCGRectGetWidth()
beim Abrufen von imageView und titleLabel Höhe und Breite.CGFloat inset = (self.frame.size.height - totalHeight)/2; self.contentEdgeInsets = UIEdgeInsetsMake(inset, 0.0f, inset, 0.0f);
In Xcode können Sie einfach den linken Titel des Kantentitels so einstellen, dass die Breite des Bildes negativ ist. Dadurch wird die Beschriftung in der Bildmitte angezeigt.
Damit die Beschriftung unter dem Bild angezeigt wird (sortiert wie die App-Schaltflächen), müssen Sie möglicherweise den oberen Titel des Randtitels auf eine positive Zahl setzen.
quelle
Dies ist eine einfache zentrierte Titelschaltfläche, die in Swift durch Überschreiben von
titleRect(forContentRect:)
und implementiert wirdimageRect(forContentRect:)
. Es wird auchintrinsicContentSize
für die Verwendung mit AutoLayout implementiert.quelle
Schauen Sie sich diese großartige Antwort in Swift an.
quelle
left
inimageEdgeInsets
mit(self.frame.size.width - imageSize.width) / 2
layoutSubviews()
Ihrer Übersicht auf.Unterklasse
UIButton
. Override -layoutSubviews
um das eingebautesubviews
in neue Positionen zu verschieben:quelle
titleRectForContentRect
undimageRectForContentRect
Refactored icecrystal23`s Antwort.
Swift 3, funktioniert mit Autolayouts, XIB, Storyboards, kann animiert werden.
Der Knopf in der Antwort von orginal icecrystal23 hatte einen schlecht berechneten Rahmen. Ich glaube, ich habe das behoben.
Bearbeiten: Auf Swift 5 aktualisiert und in Interface Builder / Storyboards ausgeführt
quelle
korrigierte eine der Antworten hier:
Swift 3:
quelle
Dies ist eine modifizierte Version von Erik Ws ausgezeichneter Antwort. Anstatt das Bild oben in der Ansicht zu zentrieren, werden das Bild und die Beschriftung in der Ansicht als Gruppe zentriert.
Der Unterschied ist:
vs.
Quelle unten:
Zu Ihrer Information: Dies kann in Kombination mit UIView-Animationen unterbrochen werden, da währenddessen layoutSubviews aufgerufen wird.
quelle
Daves Lösung in Swift:
quelle
Wenn Sie
UIButton
und eine Unterklasse habenoverride layoutSubviews
, können Sie das Bild wie folgt zentrieren und den Titel zentriert darunter platzieren:kTextTopPadding
ist eine Konstante, die Sie einführen müssen und die den Abstand zwischen dem Bild und dem Text darunter bestimmt.quelle
Die Antwort von Kenny Winker wurde aktualisiert, da sizeWithFont in iOS 7 veraltet war.
quelle
Unter iOS 11 / Swift 4 hat keine der oben genannten Antworten wirklich für mich funktioniert. Ich habe einige Beispiele gefunden und mich darauf konzentriert:
Hoffe das hilft jemandem.
quelle
Mit dem Code von Kenny Winker und Simeon mache ich diesen schnellen Code, der für mich funktioniert.
quelle
Sie müssen nur alle drei Kanteneinfügungen an die Größe Ihres Bildes und Ihrer Titelbezeichnung anpassen:
Sie können die Grenzen der Titelbezeichnung erhalten, indem Sie sizeToFit aufrufen, nachdem Sie den Text festgelegt haben. Der horizontale Abstand sollte unabhängig von der Größe von Text, Schriftart und Bild funktionieren, aber ich kenne keine einzige Lösung, um den vertikalen Abstand und den unteren Rand der Inhaltskante konsistent zu machen.
quelle
Hier ist die Antwort von "Bear With Me" als Unterklasse in
Swift 2.0
. Um es nutzen Sie einfach Ihre Schaltfläche Klasse ändert inInterface Builder
zu ,VerticalButton
und es wird auf magische Weise die Vorschau aktualisieren.Ich habe es auch aktualisiert, um die richtige Größe des Inhalts für das automatische Layout zu berechnen.
quelle
layoutSubviews()
in meinem Fall wiederholt aufgerufen wird:intrinsicContentSize
Zugriffe, beiimageView
denenlayoutSubviews
aufgerufen wird, welche ZugriffeimageView
usw.@Tiago Ich ändere deine Antwort so. Es funktioniert gut mit allen Größen
quelle
Ich habe hier eine Kombination der Antworten genommen und eine gefunden, die für mich in Swift zu funktionieren scheint. Ich mag es nicht, wie ich die Einsätze einfach überschrieben habe, aber es funktioniert. Ich wäre offen für Verbesserungsvorschläge in den Kommentaren. Es scheint korrekt mit
sizeToFit()
und mit automatischem Layout zu funktionieren .quelle
Verwenden Sie diese beiden Methoden:
Beispiel:
Und Sie können verwenden:
quelle
Die Methode Swift 5 - unten funktioniert bei mir
Stellen Sie sicher, dass der Titel Ihrer Schaltfläche in Storyboard / xib nicht abgeschnitten ist. Andernfalls wählen Sie
Lösung 2
quelle
Ich fand, dass Simeons Antwort wahrscheinlich die beste war, aber es gab mir seltsame Ergebnisse auf einigen Tasten und ich konnte einfach nicht herausfinden, warum. Ausgehend von seiner Antwort habe ich meine Schaltflächen wie folgt implementiert:
quelle
Hier ist meine Unterklasse,
UIButton
die dieses Problem löst:Das ist es. Funktioniert wie Charme. Es kann ein Problem auftreten, wenn die Schaltfläche zu klein ist, um Titel und Text anzupassen.
quelle
Ich denke, eine der besten Möglichkeiten, dies zu tun, besteht darin, UIButton zu unterklassifizieren und einige Rendering-Methoden zu überschreiben:
quelle
@ simeons Lösung in Objective-C
quelle
CGSizeMake(MAX(labelSize.width, image.size.width), image.size.height + labelSize.height + 5.0)
in dem Fall zurückzukehrenWenn Sie benutzerdefinierte Schriftarten verwenden, funktioniert die Berechnung für die titleLabel-Größe nicht ordnungsgemäß. Sie sollten sie durch ersetzen
let titleLabelSize = self.titleLabel?.text?.size(withAttributes: [NSAttributedStringKey.font: self.titleLabel!.font!])
quelle
Anstatt durch die Hölle zu gehen und zu versuchen, das Symbol und den Text mit Kanteneinfügungen zu positionieren, können Sie einen NSAttributedString mit Ihrem Bild als Anhang erstellen und ihn stattdessen auf den zugewiesenen Titel Ihrer Schaltfläche setzen:
quelle
UIButton
Die Textfeldlayouts von A zeigen nur eine Zeile an, daher funktioniert dies auch dann nicht, wenn ein Zeilenumbruch in der zugewiesenen Zeichenfolge verwendet wird. Wäre sonst eine schöne Lösung.button.titleLabel?.numberOfLines
, um die benötigte Anzahl von Zeilen zu erhaltenLokalisierungsfreundliche Lösung:
So viele großartige Lösungen, aber ich möchte hier einen Hinweis für diejenigen hinzufügen, die die Lokalisierung verwenden.
Sie müssen die linken und rechten EdgeInstets-Werte umkehren, damit die Schaltfläche im Falle einer Änderung der Sprachrichtung von LtR zu RtL korrekt angeordnet wird.
Mit einer ähnlichen Lösung würde ich sie wie folgt implementieren:
quelle
Oberes Bild und unterer Titelknopf mit UIButton der Unterklasse
quelle
Das ist definitiv ein Overkill für diese Frage ... In einem meiner Projekte musste ich zuerst eine Schaltfläche implementieren, deren Symbol ganz links ausgerichtet ist. Dann haben wir einen weiteren Button mit Titel unter Bild. Ich habe nach einer vorhandenen Lösung gesucht, aber ohne Glück. Also, hier ist die ausrichtbare Schaltfläche:
Ich hoffe, Sie finden es nützlich.
quelle
So etwas in der
UIButton
Unterklassequelle
Es ist ziemlich einfach.
An Stelle von:
Benutze das:
Dann können Sie einfach Text auf der Schaltfläche hinzufügen, indem Sie:
// button.titleLabel! .font = UIFont (Name: "FontName", Größe: 30)
quelle