Wie bringe ich das Bild auf der rechten Seite des Textes in einer UIButton?

Question

Ich möchte keine Unteransicht verwenden, wenn ich es vermeiden kann. Ich möchte eine UIButton mit einem Hintergrundbild, Text und einem Bild darin. Wenn ich das tue, befindet sich das Bild auf der linken Seite des Textes. Das Hintergrundbild, der Text und das Bild haben alle einen unterschiedlichen Hervorhebungsstatus.

Answer 1

Wenn dies in den folgenden Bereichen geschehen soll UIBarButtonItem sollte eine zusätzliche Umhüllung in der Ansicht verwendet werden
Dies wird funktionieren

let view = UIView()
let button = UIButton()
button.setTitle("Skip", for: .normal)
button.setImage(#imageLiteral(resourceName:"forward_button"), for: .normal)
button.semanticContentAttribute = .forceRightToLeft
button.sizeToFit()
view.addSubview(button)
view.frame = button.bounds
navigationItem.rightBarButtonItem = UIBarButtonItem(customView: view)

Das wird nicht funktionieren

let button = UIButton()
button.setTitle("Skip", for: .normal)
button.setImage(#imageLiteral(resourceName:"forward_button"), for: .normal)
button.semanticContentAttribute = .forceRightToLeft
button.sizeToFit()
navigationItem.rightBarButtonItem = UIBarButtonItem(customView: button)

Answer 2

IOS 15 brachte ein Update, mit dem die Platzierung von Bildern in Schaltflächen jetzt einfacher, d. h. ohne Einsätze, gehandhabt werden kann.

In XIB/Storyboards: Legen Sie einfach die Eigenschaft "Platzierung" der Schaltfläche auf "führend/schulend/oben/unten" fest, nachdem Sie der Schaltfläche eine Bildeigenschaft hinzugefügt haben. Da es sich um eine führende/ausbildende Schaltfläche handelt, gibt es den zusätzlichen Vorteil, dass sie RTL unterstützt

**Im Code (programmatisch): ** Die Eigenschaft "Button Configuration" programmatisch verwenden

Diese Funktion ist nicht abwärtskompatibel und funktioniert nur in iOS15+, wie auf der WWDC '21 gezeigt wurde. https://developer.apple.com/videos/play/wwdc2021/10064/?time=236

Dokumentation für Entwickler: https://developer.apple.com/documentation/uikit/uibutton/configuration?changes=_4

Answer 3

Tun Sie es selbst. Xcode10, swift4,

Für programmatischen UI-Entwurf

 lazy var buttonFilter : ButtonRightImageLeftTitle = {
    var button = ButtonRightImageLeftTitle()
    button.setTitle("Playfir", for: UIControl.State.normal)
    button.setImage(UIImage(named: "filter"), for: UIControl.State.normal)
    button.backgroundColor = UIColor.red
    button.contentHorizontalAlignment = .left
    button.titleLabel?.font = UIFont.systemFont(ofSize: 16)
    return button
}()

Die Werte für den Kanteneinzug werden auf ein Rechteck angewandt, um es zu verkleinern oder zu vergrößern. Bereich, der durch dieses Rechteck dargestellt wird. Typischerweise werden Randeinschübe verwendet beim Layout der Ansicht verwendet, um den Rahmen der Ansicht zu ändern. Positive Werte bewirken dass der Rahmen um den angegebenen Wert verschoben (oder verkleinert) wird. Negative Werte bewirken, dass der Rahmen um den angegebenen Betrag verschoben (oder erweitert) wird. Betrag.

class ButtonRightImageLeftTitle: UIButton {

    override func layoutSubviews() {
        super.layoutSubviews()

        guard imageView != nil else { return }

        imageEdgeInsets = UIEdgeInsets(top: 5, left: (bounds.width - 35), bottom: 5, right: 5)
        titleEdgeInsets = UIEdgeInsets(top: 0, left: -((imageView?.bounds.width)! + 10), bottom: 0, right: 0 )

    }
}

für StoryBoard UI Design

Answer 4

Hier ist die Lösung für UIButton mit mittig ausgerichtetem Inhalt. Dieser Code macht das Bild rechtsbündig und erlaubt die Verwendung von imageEdgeInsets y titleEdgeInsets für eine wertvolle Positionierung.

Unterklasse UIButton mit Ihrer benutzerdefinierten Klasse und hinzufügen:

- (CGRect)imageRectForContentRect:(CGRect)contentRect {
    CGRect frame = [super imageRectForContentRect:contentRect];
    CGFloat imageWidth = frame.size.width;
    CGRect titleRect = CGRectZero;
    titleRect.size = [[self titleForState:self.state] sizeWithAttributes:@{NSFontAttributeName: self.titleLabel.font}];
    titleRect.origin.x = (self.frame.size.width - (titleRect.size.width + imageWidth)) / 2.0 + self.titleEdgeInsets.left - self.titleEdgeInsets.right;
    frame.origin.x = titleRect.origin.x + titleRect.size.width - self.imageEdgeInsets.right + self.imageEdgeInsets.left;
    return frame;
}

- (CGRect)titleRectForContentRect:(CGRect)contentRect {
    CGFloat imageWidth = [self imageForState:self.state].size.width;
    CGRect frame = [super titleRectForContentRect:contentRect];
    frame.origin.x = (self.frame.size.width - (frame.size.width + imageWidth)) / 2.0 + self.titleEdgeInsets.left - self.titleEdgeInsets.right;
    return frame;
}

Answer 5

Erweiterung Weg

Verwendung der Erweiterung zum Einstellen des Bildes auf der rechten Seite mit benutzerdefiniertem Versatz

   extension UIButton {
    func addRightImage(image: UIImage, offset: CGFloat) {
        self.setImage(image, for: .normal)
        self.imageView?.translatesAutoresizingMaskIntoConstraints = false
        self.imageView?.centerYAnchor.constraint(equalTo: self.centerYAnchor, constant: 0.0).isActive = true
        self.imageView?.trailingAnchor.constraint(equalTo: self.trailingAnchor, constant: -offset).isActive = true
    }
}