Ich möchte keine Unteransicht verwenden, wenn ich dies vermeiden kann. Ich möchte ein UIButton
mit einem Hintergrundbild, Text und einem Bild darin. Wenn ich das mache, befindet sich das Bild gerade auf der linken Seite des Textes. Das Hintergrundbild, der Text und das Bild haben unterschiedliche Hervorhebungszustände.
ios
user-interface
layout
uibutton
Jasongregori
quelle
quelle
Antworten:
Obwohl einige der vorgeschlagenen Antworten sehr kreativ und äußerst clever sind, lautet die einfachste Lösung wie folgt:
So einfach ist das. Als Bonus befindet sich das Bild links von links nach links.
BEARBEITEN : Da die Frage einige Male gestellt wurde, ist dies iOS 9 + .
quelle
semanticContentAttribute
ist nur ein Hack / Workaround, keine echte Lösung.Einfachste Lösung:
iOS 10 und höher, Swift:
Vor iOS 10, Swift / Obj-C:
quelle
button.ImageEdgeInsets = new UIEdgeInsets(0, -leftPadding, 0, leftPadding); button.ContentEdgeInsets = new UIEdgeInsets(0, 0, 0, leftPadding);
. Das ist in Xamarin, sollte aber leicht genug in Swift / Obj-C übersetzt werden können.Es gibt einen einfacheren Weg vom Interface Builder .
Wählen Sie den UIButton und wählen Sie diese Option unter View Utilities> Semantic :
Das ist es! Schön und einfach!
Wenn Sie den Abstand zwischen dem Bild und dem Titel anpassen möchten, können Sie den Bildeinsatz hier ändern :
Ich hoffe, das hilft!
quelle
Das Unterklassen von UIButton ist völlig unnötig. Stattdessen können Sie einfach einen hohen linken Einschubwert für die Bildeinsätze und einen kleinen rechten Einschub für den Titel festlegen. Etwas wie das:
quelle
Ich gebe Inspire48 die Ehre dafür. Aufgrund seines Vorschlags und der Betrachtung dieser anderen Frage kam ich auf diese Idee. Unterklasse UIButton und überschreiben diese Methoden.
quelle
buttonWithType
If you subclass UIButton, this method does not return an instance of your subclass. If you want to create an instance of a specific subclass, you must alloc/init the button directly
undbackgroundRectForBounds
Unterklassen, die benutzerdefinierte Hintergrundverzierungen bereitstellen, können diese Methode überschreiben und ein modifiziertes Begrenzungsrechteck zurückgeben, um zu verhindern, dass die Schaltfläche über benutzerdefinierte Inhalte zeichnet. " Methoden, aber ich nehme an, sie haben nichts gegen Unterklassen.frame.origin.x = CGRectGetMaxX(contentRect) - CGRectGetWidth(frame) - self.imageEdgeInsets.right + self.imageEdgeInsets.left - frame.origin.x;
Sie funktioniert besser fürUIControlContentHorizontalAlignmentCenter
und andere ...Aktualisieren Sie einfach die Einfügungen, wenn der Titel geändert wird. Sie müssen den Einschub durch einen gleichen und entgegengesetzten Einschub auf der anderen Seite kompensieren.
quelle
[thebutton.titleLabel sizeToFit];
vorher hinzufügen . Die Breite kann Null sein, wenn Sie kein Layout ausgelöst haben. Gleiches gilt für die Bildgröße (verwenden Sie einfach die UIImage.size anstelle der imageView-Größe)titleWidth = [self.titleLabel sizeThatFits:CGSizeMake(CGFLOAT_MAX, self.bounds.size.height)].width;
(oder wenn Sie besorgt sind, dass der Schaltflächenrahmen noch nicht eingerichtet ist, verwenden Sie CGFLOAT_MAX auch für die Höhe) undimageWidth = self.currentImage.size.width;
layoutSubviews
meineUITableViewCell
Unterklasse aufnehmen, aber es funktioniert gut. Vielen Dank!Alle diese Antworten ab Januar 2016 sind nicht erforderlich. Stellen Sie im Interface Builder die Ansichtssemantik auf ein
Force Right-to-Left
oder wenn Sie eine programmatische Methode bevorzugen,semanticContentAttribute = .forceRightToLeft
wird das Bild rechts neben Ihrem Text angezeigt.quelle
UIBarButtonItem(customView: button)
, aber es funktioniert, wenn Sie die Schaltfläche in eine leere AnsichtIm Interface Builder können Sie die Optionen Edge Insets für UIButton separat für drei Teile konfigurieren: Inhalt, Bild, Titel
Xcode 8:
quelle
Update: Swift 3
Ursprüngliche Antwort für Swift 2:
Eine Lösung, die alle horizontalen Ausrichtungen mit einem Swift-Implementierungsbeispiel behandelt. Übersetzen Sie bei Bedarf einfach in Objective-C.
Erwähnenswert ist auch, dass es recht gut mit Bild- und Titeleinfügungen umgehen kann.
Inspiriert von Jasongregori Antwort;)
quelle
@IBDesignable
der Klasse hinzufügen und sehen können, wie sie zur Entwurfszeit umgedreht wird.Wenn dies in UIBarButtonItem durchgeführt werden muss , sollte ein zusätzlicher Wrapping in der Ansicht verwendet werden.
Dies funktioniert
Das wird nicht funktionieren
quelle
Hier ist eine Lösung für
UIButton
Inhalte mit zentrierter Ausrichtung. Dieser Code macht das Bild rechtsbündig und ermöglicht die VerwendungimageEdgeInsets
undtitleEdgeInsets
wertvolle Positionierung.Unterklasse
UIButton
mit Ihrer benutzerdefinierten Klasse und fügen Sie hinzu:quelle
Da die Transformationslösung in iOS 11 nicht funktioniert, habe ich beschlossen, einen neuen Ansatz zu schreiben.
Durch Anpassen der Schaltflächen sehen
semanticContentAttribute
wir das Bild schön rechts, ohne dass wir es weiterleiten müssen, wenn sich der Text ändert. Aus diesem Grund ist es die ideale Lösung. Ich brauche jedoch noch RTL-Unterstützung. Die Tatsache, dass eine App ihre Layoutrichtung in derselben Sitzung nicht ändern kann, behebt dieses Problem auf einfache Weise.Trotzdem ist es ziemlich einfach.
quelle
Verlängerungsweg
Verwenden der Erweiterung, um das Bild auf der rechten Seite mit benutzerdefiniertem Versatz festzulegen
quelle
Swift - Erweitern Sie den UiButton und setzen Sie diese Zeilen
quelle
Aufbauend auf der eleganten Lösung von Piotr Tomasik: Wenn Sie auch einen gewissen Abstand zwischen der Tastenbeschriftung und dem Bild haben möchten, fügen Sie diesen wie folgt in Ihre Kanteneinfügungen ein (kopieren Sie meinen Code hier, der perfekt für mich funktioniert):
Danke Piotr für deine Lösung!
Erik
quelle
Mach es dir selbst. Xcode10, swift4,
Für programmgesteuertes UI-Design
für das StoryBoard-UI-Design
quelle
Unterklassen und übergeordnetes LayoutSubviews sind wahrscheinlich der beste Weg.
Referenziert von: iPhone UIButton - Bildposition
quelle
Nahm @ Piotrs Antwort und machte es zu einer Swift-Erweiterung. Stellen Sie sicher, dass Sie das Bild und den Titel festlegen, bevor Sie dies aufrufen, damit die Größe der Schaltfläche richtig ist.
}}
quelle
Eine schnelle Option, die macht, was Sie wollen, ohne mit Insets zu spielen:
quelle
Die hier genannten Lösungen funktionierten nicht mehr, nachdem ich das automatische Layout aktiviert hatte . Ich musste mir meine eigenen einfallen lassen:
Unterklasse UIButton und Override-
layoutSubviews
Methode:Ergebnis:
quelle
schnelle 3.0 Migrationslösung von Jasongregori
quelle
Ich habe mich entschieden, die Standard-Schaltflächenbildansicht nicht zu verwenden, da sich die vorgeschlagenen Lösungen zum Verschieben hackig anfühlten. Dies brachte mir die gewünschte Ästhetik und es ist intuitiv, den Knopf durch Ändern der Einschränkungen neu zu positionieren:
quelle
Swift 3:
quelle
Wie wäre es mit Einschränkungen? Im Gegensatz zu semanticContentAttribute ändern sie die Semantik nicht. So etwas vielleicht:
oder in Ziel-C:
Vorsichtsmaßnahmen: Ungetestet, iOS 9+
quelle
Versuchen Sie den folgenden Code, um das Bild innerhalb von UIButton nach rechts auszurichten
quelle
Nachdem ich mehrere Lösungen aus dem Internet ausprobiert hatte, erreichte ich nicht die genaue Anforderung. Also habe ich benutzerdefinierten Dienstprogrammcode geschrieben. Posting, um jemandem in Zukunft zu helfen. Getestet auf schnell 4.2
quelle
Für dieses Problem können Sie UIView in "label with UIImage view" erstellen, die UIView-Klasse als UIControl festlegen und IBAction als Tuch-Up-Side erstellen
quelle
Swift 4 & 5
Ändern Sie die Richtung des UIButton-Bildes (RTL und LTR).
quelle
Utility
?Xcode 11.4 Swift 5.2
Für alle, die versuchen, den Stil der Zurück-Schaltfläche mit dem Chevron wie folgt zu spiegeln:
Implementierung:
quelle
Am Ende habe ich eine benutzerdefinierte Schaltfläche erstellt, mit der Sie das Bild aus dem Inspektor festlegen können. Unten ist mein Code:
Sie können den Wert von Gap Padding im Inspector anpassen, um den Abstand zwischen Text und Bild anzupassen.
PS: Verwendet einen Codeteil aus der Antwort von @Mark Hennings
quelle