iOS: UIButton-Größe entsprechend der Textlänge ändern

Wenn Sie im Interface Builder Command+ =gedrückt halten, wird die Größe einer Schaltfläche an den Text angepasst. Ich habe mich gefragt, ob dies programmgesteuert möglich ist, bevor die Schaltfläche zur Ansicht hinzugefügt wurde.

UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button.titleLabel setFont:[UIFont fontWithName:@"Arial-BoldMT" size:12]];
[button addTarget:self action:@selector(buttonTapped:) forControlEvents:UIControlEventTouchUpInside];
// I need to know the width needed to accomodate NSStringVariable
[button setTitle:NSStringVariable forState:UIControlStateNormal]; 
// So that I can set the width property of the button before addSubview
[button setFrame:CGRectMake(10, 0, width, fixedHeight)];
[subNavigation addSubview:button];

In Xcode 4.5 und höher kann dies jetzt mithilfe von ' Auto-Layouting / Constraints ' erfolgen.

Hauptvorteile sind:

1. Sie müssen Frames überhaupt nicht programmgesteuert einstellen!
2. Wenn Sie es richtig machen, müssen Sie sich nicht darum kümmern, Frames für Orientierungsänderungen zurückzusetzen.
3. Außerdem müssen Sie Geräteänderungen nicht stören (lesen Sie, Sie müssen nicht separat für verschiedene Bildschirmgrößen codieren).

Einige Nachteile:

1. Nicht abwärtskompatibel - funktioniert nur für iOS 6 und höher.
2. Sie müssen sich vertraut machen (spart aber später Zeit).

Das Coolste ist, dass wir uns darauf konzentrieren können, eine Absicht zu erklären, wie zum Beispiel:

• Ich möchte, dass diese beiden Tasten die gleiche Breite haben. oder
• Ich brauche diese Ansicht, um vertikal zentriert zu sein und mich auf maximal 10 Punkte vom Rand der Übersicht zu erstrecken. oder auch,
• Ich möchte, dass die Größe dieser Schaltfläche / Beschriftung entsprechend der angezeigten Beschriftung geändert wird!

Hier ist ein einfaches Tutorial, um sich mit dem automatischen Layout vertraut zu machen.

Für weitere Details .

Zuerst dauert es einige Zeit, aber es sieht so aus, als ob sich die Mühe lohnt.

In UIKit gibt es Ergänzungen zur NSString-Klasse, um von einem bestimmten NSString-Objekt die Größe zu erhalten, die es beim Rendern in einer bestimmten Schriftart benötigt.

Docs war hier . Jetzt ist es hier unter Veraltet.

Kurz gesagt, wenn Sie gehen:

CGSize stringsize = [myString sizeWithFont:[UIFont systemFontOfSize:14]]; 
//or whatever font you're using
[button setFrame:CGRectMake(10,0,stringsize.width, stringsize.height)];

... Sie haben den Rahmen der Schaltfläche auf die Höhe und Breite der Zeichenfolge eingestellt, die Sie rendern.

Sie werden wahrscheinlich mit etwas Pufferplatz um diese CGSize experimentieren wollen, aber Sie werden an der richtigen Stelle beginnen.

Der Weg, dies im Code zu tun, ist:

[button sizeToFit];

Wenn Sie eine Unterklasse bilden und zusätzliche Regeln hinzufügen möchten, können Sie Folgendes überschreiben:

- (CGSize)sizeThatFits:(CGSize)size;

Wenn Ihre Schaltfläche mit Interface Builder erstellt wurde und Sie den Titel im Code ändern, können Sie Folgendes tun:

[self.button setTitle:@"Button Title" forState:UIControlStateNormal];
[self.button sizeToFit];

Schnell:

Das Wichtigste dabei ist, wann Sie das aufrufen .sizeToFit(). Dies sollte nach dem Einstellen des anzuzeigenden Texts geschehen, damit es die erforderliche Größe lesen kann. Wenn Sie den Text später aktualisieren, rufen Sie ihn erneut auf.

var button = UIButton()
button.setTitle("Length of this text determines size", forState: UIControlState.Normal)
button.sizeToFit()
self.view.addSubview(button)

Um dies mithilfe des automatischen Layouts zu erreichen, legen Sie eine Einschränkung für die variable Breite fest:

Sie können auch Ihre anpassen müssen Content Hugging Priorityund Content Compression Resistance Prioritydie Ergebnisse , die Sie brauchen.

UILabel passt sich automatisch an :

Dieses UILabel wird einfach so eingestellt, dass es auf dem Bildschirm zentriert ist (nur zwei Einschränkungen, horizontal / vertikal):

Die Breite ändert sich vollautomatisch:

Sie müssen nicht festlegen müssen jede Breite oder Höhe - es ist vollautomatisch.

Beachten Sie, dass die kleinen gelben Quadrate einfach angebracht werden ("Abstand" von Null). Sie werden automatisch verschoben, wenn die Größe des UILabel geändert wird.

Durch Hinzufügen einer "> =" - Einschränkung wird eine Mindestbreite für das UILabel festgelegt:

Wenn Sie die Größe des Textes im Gegensatz zur Schaltfläche ändern möchten, können Sie ...

button.titleLabel.adjustsFontSizeToFitWidth = YES;
button.titleLabel.minimumScaleFactor = .5;
// The .5 value means that I will let it go down to half the original font size 
// before the texts gets truncated

// note, if using anything pre ios6, you would use I think
button.titleLabel.minimumFontSize = 8;

sizeToFit funktioniert nicht richtig. stattdessen:

myButton.size = myButton.sizeThatFits(CGSize.zero)

Sie können contentInsetder Schaltfläche auch Folgendes hinzufügen :

myButton.contentEdgeInsets = UIEdgeInsetsMake(8, 8, 4, 8)

Einfach:

1. Erstellen Sie UIViewals Wrapper mit automatischem Layout für Ansichten in der Umgebung.
2. Legen Sie UILabelinnerhalb dieser Wrapper. Fügen Sie Einschränkungen hinzu, mit denen Ihr Etikett an den Kanten des Deckblatts befestigt wird.
3. Legen Sie es UIButtonin Ihren Wrapper und fügen Sie dann einfach die gleichen Einschränkungen hinzu, für die Sie es getan haben UILabel.
4. Genießen Sie Ihre automatische Schaltfläche zusammen mit Text.

Swift 4.2

Gott sei Dank, das gelöst. Nachdem Sie einen Text für die Schaltfläche festgelegt haben, können Sie intrinsicContentSize, die natürliche Größe, aus einer UIView abrufen (das offizielle Dokument befindet sich hier ). Für UIButton können Sie es wie unten verwenden.

button.intrinsicContentSize.width

Zu Ihrer Information habe ich die Breite angepasst, damit sie richtig aussieht.

button.frame = CGRect(fx: xOffset, y: 0.0, width: button.intrinsicContentSize.width + 18, height: 40)

Simulator

UIButtons mit intrinsicContentSize

Quelle: https://riptutorial.com/ios/example/16418/get-uibutton-s-size-strictly-based-on-its-text-and-font

Ich habe einige zusätzliche Bedürfnisse im Zusammenhang mit diesem Beitrag, sizeToFitdie nicht gelöst werden können. Ich musste die Schaltfläche unabhängig vom Text an ihrer ursprünglichen Position zentrieren. Ich möchte auch nie, dass der Knopf größer als seine ursprüngliche Größe ist.

Also gestalte ich die Schaltfläche auf ihre maximale Größe, speichere diese Größe im Controller und verwende die folgende Methode, um die Größe der Schaltfläche zu ändern, wenn sich der Text ändert:

+ (void) sizeButtonToText:(UIButton *)button availableSize:(CGSize)availableSize padding:(UIEdgeInsets)padding {    

     CGRect boundsForText = button.frame;

    // Measures string
    CGSize stringSize = [button.titleLabel.text sizeWithFont:button.titleLabel.font];
    stringSize.width = MIN(stringSize.width + padding.left + padding.right, availableSize.width);

    // Center's location of button
    boundsForText.origin.x += (boundsForText.size.width - stringSize.width) / 2;
    boundsForText.size.width = stringSize.width;
    [button setFrame:boundsForText];
 }

Diese Schaltflächenklasse mit automatischer Größenanpassung für Text (für Xamarin, kann jedoch für eine andere Sprache umgeschrieben werden)

[Register(nameof(ResizableButton))]
public class ResizableButton : UIButton
{
    NSLayoutConstraint _heightConstraint;
    public bool NeedsUpdateHeightConstraint { get; private set; } = true;

    public ResizableButton(){}

    public ResizableButton(UIButtonType type) : base(type){}

    public ResizableButton(NSCoder coder) : base(coder){}

    public ResizableButton(CGRect frame) : base(frame){}

    protected ResizableButton(NSObjectFlag t) : base(t){}

    protected internal ResizableButton(IntPtr handle) : base(handle){}

    public override void LayoutSubviews()
    {
        base.LayoutSubviews();
        UpdateHeightConstraint();
        InvalidateIntrinsicContentSize();
    }

    public override void SetTitle(string title, UIControlState forState)
    {
        NeedsUpdateHeightConstraint = true;
        base.SetTitle(title, forState);
    }

    private void UpdateHeightConstraint()
    {
        if (!NeedsUpdateHeightConstraint)
            return;
        NeedsUpdateHeightConstraint = false;
        var labelSize = TitleLabel.SizeThatFits(new CGSize(Frame.Width - TitleEdgeInsets.Left - TitleEdgeInsets.Right, float.MaxValue));

        var rect = new CGRect(Frame.X, Frame.Y, Frame.Width, labelSize.Height + TitleEdgeInsets.Top + TitleEdgeInsets.Bottom);

        if (_heightConstraint != null)
            RemoveConstraint(_heightConstraint);

        _heightConstraint = NSLayoutConstraint.Create(this, NSLayoutAttribute.Height, NSLayoutRelation.Equal, 1, rect.Height);
        AddConstraint(_heightConstraint);
    }

     public override CGSize IntrinsicContentSize
     {
         get
         {
             var labelSize = TitleLabel.SizeThatFits(new CGSize(Frame.Width - TitleEdgeInsets.Left - TitleEdgeInsets.Right, float.MaxValue));
             return new CGSize(Frame.Width, labelSize.Height + TitleEdgeInsets.Top + TitleEdgeInsets.Bottom);
         }
     }
}

Aus irgendeinem Grund func sizeToFit()funktioniert das bei mir nicht. Mein Setup ist, dass ich eine Schaltfläche in a verwende UITableViewCellund das automatische Layout verwende.

Was für mich funktioniert hat ist:

1. Holen Sie sich die Breitenbeschränkung
2. Holen Sie sich die intrinsicContentSizeBreite, weil laut diesem Dokument das automatische Layout nicht bekannt ist intrinsicContentSize. Stellen Sie die Breitenbeschränkung auf die intrinsicContentSizeBreite ein

Hier sind zwei Titel aus dem Debug View Hierachry

Um ehrlich zu sein, finde ich es wirklich schade, dass es im Storyboard kein einfaches Kontrollkästchen gibt, das besagt, dass Sie die Größe der Schaltflächen ändern möchten, um den Text aufzunehmen. OK Was solls.

Hier ist die einfachste Lösung mit Storyboard.

1. Platzieren Sie UIView und legen Sie Einschränkungen dafür fest. Beispiel:

2. Platzieren Sie UILabel in UIView. Legen Sie Einschränkungen fest, um es an Kanten von UIView anzuhängen.

3. Platzieren Sie Ihren UIButton in UIView. Legen Sie dieselben Einschränkungen fest, um es an die Ränder von UIView anzuhängen.

4. Setzen Sie 0 für die Anzahl der Zeilen von UILabel.

5. Richten Sie die Steckdosen ein.

    @IBOutlet var button: UIButton!
    @IBOutlet var textOnTheButton: UILabel!

6. Holen Sie sich einen langen, langen, langen Titel.

    let someTitle = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

7. Legen Sie in viewDidLoad den Titel sowohl für UILabel als auch für UIButton fest.

    override func viewDidLoad() {
        super.viewDidLoad()
        textOnTheButton.text = someTitle
        button.setTitle(someTitle, for: .normal)
        button.titleLabel?.numberOfLines = 0
    }

8. Führen Sie es aus, um sicherzustellen, dass die Größe der Schaltfläche geändert wird und gedrückt werden kann.