Autolayout - Die Eigengröße von UIButton enthält keine Titeleinfügungen

Wenn ich einen UIButton mit Autolayout angeordnet habe, passt sich seine Größe gut an den Inhalt an.

Wenn ich ein Bild als button.imageeinstelle, scheint dies wieder auf die Instrumentengröße zurückzuführen zu sein.

Wenn ich jedoch titleEdgeInsetsdie Schaltfläche optimiere , berücksichtigt das Layout dies nicht und schneidet stattdessen den Schaltflächentitel ab.

Wie kann ich sicherstellen, dass die Eigenbreite der Schaltfläche den Einschub berücksichtigt?

Bearbeiten:

Ich benutze folgendes:

[self.backButton setTitleEdgeInsets:UIEdgeInsetsMake(0, 5, 0, 0)];

Ziel ist es, eine gewisse Trennung zwischen Bild und Text zu erreichen.

Sie können dies lösen, ohne Methoden überschreiben oder eine beliebige Breitenbeschränkung festlegen zu müssen. Sie können alles in Interface Builder wie folgt tun.

• Die intrinsische Schaltflächenbreite wird aus der Titelbreite plus der Symbolbreite plus den linken und rechten Inhaltskanteneinfügungen abgeleitet .

• Wenn eine Schaltfläche sowohl ein Bild als auch einen Text enthält, werden sie als Gruppe zentriert, ohne dass ein Abstand dazwischen besteht.

• Wenn Sie einen linken Inhaltseinsatz hinzufügen, wird dieser relativ zum Text berechnet, nicht zum Text + Symbol.

• Wenn Sie einen negativen linken Bildeinsatz festlegen, wird das Bild nach links herausgezogen, die Gesamtbreite der Schaltflächen bleibt jedoch unberührt.

• Wenn Sie einen negativen linken Bildeinsatz festlegen, verwendet das tatsächliche Layout die Hälfte dieses Werts. Um einen linken Einschub von -20 Punkten zu erhalten, müssen Sie im Interface Builder einen Wert für den linken Einschub von -40 Punkten verwenden.

Sie stellen also einen ausreichend großen linken Inhaltseinsatz bereit, um Platz für beide gewünschten linken Einfügungen zu schaffen und den inneren Abstand zwischen dem Symbol und dem Text zu schaffen, und verschieben das Symbol dann nach links, indem Sie zwischen dem Symbol und dem Text verdoppeln. Das Ergebnis ist eine Schaltfläche mit gleichen linken und rechten Inhaltseinfügungen und einem Text- und Symbolpaar, die als Gruppe zentriert sind und zwischen denen ein bestimmter Abstand vorhanden ist.

Einige Beispielwerte:

// Produces a button with the layout:
// |-20-icon-10-text-20-|
// AutoLayout intrinsic width works as you'd desire.
button.contentEdgeInsets = UIEdgeInsetsMake(10, 30, 10, 20)
button.imageEdgeInsets = UIEdgeInsetsMake(0, -20, 0, 0)

Sie können dies in Interface Builder zum Laufen bringen (ohne Code zu schreiben), indem Sie eine Kombination aus negativen und positiven Titel- und Inhaltseinfügungen verwenden.

Update : Xcode 7 hat einen Fehler, bei dem Sie keine negativen Werte in das RightFeld Einfügen eingeben können , aber Sie können die Schrittsteuerung daneben verwenden, um den Wert zu verringern. (Danke Stuart)

Dadurch wird ein Abstand von 8pt zwischen dem Bild und dem Titel hinzugefügt und die intrinsische Breite der Schaltfläche um den gleichen Betrag erhöht. So was:

Warum nicht die intrinsicContentSizeMethode in UIView überschreiben? Beispielsweise:

- (CGSize) intrinsicContentSize
{
    CGSize s = [super intrinsicContentSize];

    return CGSizeMake(s.width + self.titleEdgeInsets.left + self.titleEdgeInsets.right,
                      s.height + self.titleEdgeInsets.top + self.titleEdgeInsets.bottom);
}

Dies sollte dem Autolayout-System mitteilen, dass die Schaltfläche vergrößert werden soll, um die Einfügungen zu berücksichtigen und den vollständigen Text anzuzeigen. Ich bin nicht an meinem eigenen Computer, daher habe ich dies nicht getestet.

Sie haben nicht angegeben, wie Sie die Einfügungen festlegen. Ich vermute also, dass Sie titleEdgeInsets verwenden, da ich den gleichen Effekt sehe, den Sie erhalten. Wenn ich stattdessen contentEdgeInsets verwende, funktioniert es ordnungsgemäß.

- (IBAction)ChangeTitle:(UIButton *)sender {
    self.button.contentEdgeInsets = UIEdgeInsetsMake(0,20,0,20);
    [self.button setTitle:@"Long Long Title" forState:UIControlStateNormal];
}

Und für Swift funktionierte das:

extension UIButton {
    override open var intrinsicContentSize: CGSize {
        let intrinsicContentSize = super.intrinsicContentSize

        let adjustedWidth = intrinsicContentSize.width + titleEdgeInsets.left + titleEdgeInsets.right
        let adjustedHeight = intrinsicContentSize.height + titleEdgeInsets.top + titleEdgeInsets.bottom

        return CGSize(width: adjustedWidth, height: adjustedHeight)
    }
}

Liebe U Swift

Dieser Thread ist ein bisschen alt, aber ich bin gerade selbst darauf gestoßen und konnte ihn mit einem negativen Einschub lösen. Ersetzen Sie beispielsweise hier Ihre gewünschten Füllwerte:

UIButton* myButton = [[UIButton alloc] init];
// setup some autolayout constraints here
myButton.titleEdgeInsets = UIEdgeInsetsMake(-desiredBottomPadding,
                                            -desiredRightPadding,
                                            -desiredTopPadding,
                                            -desiredLeftPadding);

In Kombination mit den richtigen Einschränkungen für das automatische Layout erhalten Sie eine Schaltfläche zur automatischen Größenänderung, die ein Bild und einen Text enthält! Unten mit desiredLeftPadding10 eingestellt.

Sie können sehen, dass der tatsächliche Rahmen der Schaltfläche die Beschriftung nicht umfasst (da die Beschriftung außerhalb der Grenzen um 10 Punkte nach rechts verschoben ist), aber wir haben 10 Auffüllpunkte zwischen Text und Bild erreicht.

Für Swift 3 basierend auf der Antwort von Pegpeg :

extension UIButton {

    override open var intrinsicContentSize: CGSize {

        let intrinsicContentSize = super.intrinsicContentSize

        let adjustedWidth = intrinsicContentSize.width + titleEdgeInsets.left + titleEdgeInsets.right
        let adjustedHeight = intrinsicContentSize.height + titleEdgeInsets.top + titleEdgeInsets.bottom

        return CGSize(width: adjustedWidth, height: adjustedHeight)

    }

}

Alles oben funktionierte nicht für iOS 9+ , was ich getan habe ist:

• Fügen Sie eine Breitenbeschränkung hinzu (für eine Mindestbreite, wenn die Schaltfläche keinen Text enthält. Die Schaltfläche wird automatisch skaliert, wenn Text bereitgestellt wird).
• Stellen Sie die Beziehung auf Größer als oder gleich ein

Um nun einen Rahmen um die Schaltfläche hinzuzufügen, verwenden Sie einfach die folgende Methode:

button.contentEdgeInsets = UIEdgeInsetsMake(0,20,0,20);

Ich wollte ein 5-Punkt-Leerzeichen zwischen meinem UIButton-Symbol und dem Etikett einfügen. So habe ich es erreicht:

UIButton *infoButton = [UIButton buttonWithType:UIButtonTypeCustom];
// more button config etc
infoButton.contentEdgeInsets = UIEdgeInsetsMake(0, 0, 0, 5);
infoButton.titleEdgeInsets = UIEdgeInsetsMake(0, 5, 0, -5);

Die Beziehung zwischen contentEdgeInsets, titleEdgeInsets und imageEdgeInsets erfordert ein kleines Geben und Nehmen von jedem Einschub. Wenn Sie also links links einige Einfügungen hinzufügen, müssen Sie rechts negative Einfügungen hinzufügen und rechts mehr Platz (über einen positiven Einfügungen) für den Inhalt bereitstellen.

Durch Hinzufügen eines richtigen Inhaltseinsatzes, der der Verschiebung der Titeleinfügungen entspricht, geht mein Text nicht über die Grenzen der Schaltfläche hinaus.

Die Option ist auch im Interface Builder verfügbar. Siehe den Einschub. Ich setze links und rechts auf 3. Funktioniert wie ein Zauber.

Die Lösung, die ich verwende, besteht darin, der Schaltfläche eine Breitenbeschränkung hinzuzufügen. Aktualisieren Sie dann irgendwo in der Initialisierung, nachdem Ihr Text festgelegt wurde, die Breitenbeschränkung wie folgt:

self.buttonWidthConstraint.constant = self.shareButton.intrinsicContentSize.width + 8;

Wo 8 ist, was auch immer Ihr Einschub ist.

Durch Aufrufen von sizeToFit () wird sichergestellt, dass contentEdgeInset wirksam wird

extension UIButton {

   open override func draw(_ rect: CGRect) { 
       self.contentEdgeInsets = UIEdgeInsets(top: 10, left: 40, bottom: 10, right: 40)
       self.sizeToFit()
   }
}