iOS: ridimensionamento del pulsante UIB in base alla lunghezza del testo

Nel builder di interfacce, tenendo premuto Command+ =si ridimensionerà un pulsante per adattarlo al testo. Mi chiedevo se fosse possibile farlo a livello di codice prima che il pulsante fosse aggiunto alla vista.

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 e versioni successive, questo può essere fatto ora usando ' Auto-layout / Vincoli '.

I principali vantaggi sono che:

1. Non è necessario impostare programmaticamente frame!
2. Se fatto bene, non è necessario preoccuparsi di ripristinare i frame per i cambiamenti di orientamento.
3. Inoltre, le modifiche al dispositivo non devono disturbarti (leggi, non è necessario codificare separatamente per schermi di dimensioni diverse).

Alcuni svantaggi:

1. Non compatibile con le versioni precedenti: funziona solo per iOS 6 e versioni successive.
2. Devi familiarizzare (ma risparmierai tempo in seguito).

La cosa più bella è che ci concentriamo sulla dichiarazione di un intento come:

• Voglio che questi due pulsanti abbiano la stessa larghezza; o
• Ho bisogno che questa vista sia centrata verticalmente e si estenda fino a un massimo di 10 punti dal bordo della superview; o anche,
• Voglio che questo pulsante / etichetta si ridimensioni in base all'etichetta che sta visualizzando!

Ecco un semplice tutorial per essere introdotti al layout automatico.

Per maggiori dettagli .

All'inizio ci vuole un po 'di tempo, ma sembra che ne varrà la pena.

In UIKit, ci sono aggiunte alla classe NSString per ottenere da un determinato oggetto NSString la dimensione che occuperà quando viene eseguito il rendering in un determinato font.

Docs era qui . Ora è qui sotto obsoleto.

In breve, se vai:

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

... avrai impostato la cornice del pulsante all'altezza e alla larghezza della stringa che stai eseguendo il rendering.

Probabilmente vorrai sperimentare un po 'di spazio buffer attorno a quel CGSize, ma inizierai nel posto giusto.

Il modo per farlo nel codice è:

[button sizeToFit];

Se stai eseguendo la sottoclasse e desideri aggiungere ulteriori regole, puoi sostituire:

- (CGSize)sizeThatFits:(CGSize)size;

Se il tuo pulsante è stato creato con Interface Builder e stai modificando il titolo nel codice, puoi farlo:

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

Swift:

La cosa importante qui è quando lo chiamerai .sizeToFit(), dovrebbe essere dopo aver impostato il testo da visualizzare in modo che possa leggere le dimensioni necessarie, se in seguito aggiorni il testo, quindi chiamalo di nuovo.

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

Per eseguire ciò utilizzando il layout automatico, prova a impostare un vincolo di larghezza variabile:

Potrebbe anche essere necessario modificare il proprio Content Hugging Prioritye Content Compression Resistance Priorityper ottenere i risultati necessari.

UILabel si auto-dimensiona completamente automaticamente :

Questo UILabel è semplicemente impostato per essere centrato sullo schermo (solo due vincoli, orizzontale / verticale):

Cambia larghezze in modo totalmente automatico:

Non è necessario impostare alcuna larghezza o altezza: è totalmente automatico.

Notare che i quadratini gialli sono semplicemente attaccati ("spaziatura" di zero). Si spostano automaticamente quando UILabel si ridimensiona.

L'aggiunta di un vincolo "> =" imposta una larghezza minima per UILabel:

Se vuoi ridimensionare il testo rispetto al pulsante, puoi usare ...

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 non funziona correttamente. anziché:

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

puoi anche aggiungere contentInsetal pulsante:

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

Semplicemente:

1. Creare UIView come wrapper con layout automatico per visualizzare in giro.
2. Metti UILabeldentro quell'involucro. Aggiungi vincoli che attaccheranno la tua etichetta ai bordi del wrapper.
3. Inserisci UIButtonnel tuo wrapper, quindi aggiungi semplicemente gli stessi vincoli che hai fatto per UILabel.
4. Goditi il ​​tuo pulsante di ridimensionamento automatico insieme al testo.

Rapido 4.2

Grazie a Dio, questo risolto. Dopo aver impostato un testo sul pulsante, è possibile recuperare intrinsicContentSize che è la dimensione naturale da una vista UIV (il documento ufficiale è qui ). Per UIButton, puoi usarlo come di seguito.

button.intrinsicContentSize.width

Per tua informazione, ho regolato la larghezza per farla apparire correttamente.

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

Simulatore

UIButtons con intrinsicContentSize

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

Ho alcune esigenze aggiuntive legate a questo post che sizeToFitnon risolvono. Avevo bisogno di mantenere il pulsante centrato nella posizione originale, indipendentemente dal testo. Inoltre, non voglio mai che il pulsante sia più grande della sua dimensione originale.

Quindi, layout il pulsante per la sua dimensione massima, salvo quella dimensione nel controller e utilizzo il seguente metodo per ridimensionare il pulsante quando il testo cambia:

+ (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];
 }

Questa classe di pulsanti con altezza viene ridimensionata automaticamente per il testo (per Xamarin ma può essere riscritta per un'altra lingua)

[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);
         }
     }
}

Per qualche motivo, func sizeToFit()non funziona per me. La mia configurazione è che sto usando un pulsante all'interno di a UITableViewCelle sto usando il layout automatico.

Ciò che ha funzionato per me è:

1. ottenere il vincolo di larghezza
2. ottenere la intrinsicContentSizelarghezza perché in base a questo documento il layout automatico non è a conoscenza di intrinsicContentSize. Impostare il vincolo di intrinsicContentSizelarghezza sulla larghezza

Ecco due titoli dal Debug View Hierachry

Ad essere sincero, penso che sia davvero un peccato che non ci sia una semplice casella di controllo nello storyboard per dire che vuoi ridimensionare i pulsanti per adattarli al testo. Beh ... qualunque cosa.

Ecco la soluzione più semplice utilizzando lo storyboard.

1. Posiziona UIView e metti vincoli per esso. Esempio:

2. Posiziona UILabel all'interno di UIView. Imposta i vincoli per collegarlo ai bordi di UIView.

3. Posiziona il tuo UIButton all'interno di UIView. Imposta gli stessi vincoli per collegarlo ai bordi di UIView.

4. Impostare 0 per il numero di righe di UILabel.

5. Impostare gli sbocchi.

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

6. Ottieni un titolo lungo, lungo, lungo.

    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. On viewDidLoad imposta il titolo sia per UILabel che per UIButton.

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

8. Eseguirlo per assicurarsi che il pulsante sia ridimensionato e possa essere premuto.