Autolayout: la dimensione intrinseca di UIButton non include gli inserimenti del titolo

Se ho un UIButton organizzato usando il layout automatico, le sue dimensioni si adattano perfettamente al contenuto.

Se imposto un'immagine come button.image , le dimensioni dell'istruttore sembrano giustificare nuovamente questo.

Tuttavia, se modifico il titleEdgeInsets pulsante, il layout non tiene conto di questo e tronca invece il titolo del pulsante.

Come posso garantire che la larghezza intrinseca del pulsante sia responsabile dell'inserzione?

Modificare:

Sto usando il seguente:

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

L'obiettivo è quello di aggiungere una certa separazione tra l'immagine e il testo.

Puoi risolverlo senza dover sostituire alcun metodo o impostare un vincolo di larghezza arbitrario. Puoi fare tutto in Interface Builder come segue.

• La larghezza intrinseca del pulsante è derivata dalla larghezza del titolo più la larghezza dell'icona più le inserzioni dei bordi del contenuto sinistro e destro .

• Se un pulsante ha sia un'immagine che un testo, sono centrati come un gruppo, senza riempimento.

• Se aggiungi un inserto di contenuto sinistro, viene calcolato in relazione al testo, non al testo + icona.

• Se si imposta un inserto di immagine a sinistra negativo, l'immagine viene estratta a sinistra ma la larghezza complessiva del pulsante non viene modificata.

• Se si imposta un inserto di immagine a sinistra negativo, il layout effettivo utilizza metà di quel valore. Quindi per ottenere un inserto a sinistra di -20 punti, è necessario utilizzare un valore di inserzione a sinistra di -40 punti in Interface Builder.

Quindi fornisci un inserto di contenuto sinistro abbastanza grande da creare spazio sia per l'inserto sinistro desiderato che per l'imbottitura interna tra l'icona e il testo, e quindi spostare l'icona di sinistra raddoppiando la quantità di imbottitura che si desidera tra l'icona e il testo. Il risultato è un pulsante con uguali inserimenti di contenuto sinistro e destro e una coppia di testo e icona centrata come un gruppo, con una specifica quantità di riempimento tra di loro.

Alcuni valori di esempio:

// 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)

Puoi farlo funzionare in Interface Builder (senza scrivere alcun codice), usando una combinazione di titoli e inserimenti di contenuti negativi e positivi.

Aggiornamento : Xcode 7 ha un bug in cui non è possibile inserire valori negativi nel Rightcampo Inset, ma è possibile utilizzare il controllo stepper accanto ad esso per ridurre il valore. (Grazie Stuart)

In questo modo si aggiungono 8pt di spaziatura tra l'immagine e il titolo e si aumenta la larghezza intrinseca del pulsante della stessa quantità. Come questo:

Perché non sovrascrivere il intrinsicContentSizemetodo su UIView? Per esempio:

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

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

Questo dovrebbe dire al sistema di autolayout che dovrebbe aumentare le dimensioni del pulsante per consentire l'inserzione e mostrare il testo completo. Non sono sul mio computer, quindi non l'ho provato.

Non hai specificato come stai impostando gli inserti, quindi immagino che stai usando titleEdgeInsets perché vedo lo stesso effetto che stai ottenendo. Se uso contentEdgeInsets invece funziona correttamente.

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

E per Swift ha funzionato così:

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

Love U Swift

Questo thread è un po 'vecchio, ma mi sono appena imbattuto in questo me stesso e sono stato in grado di risolverlo utilizzando un inserto negativo. Ad esempio, sostituisci i valori di imbottitura desiderati qui:

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

Combinato con i giusti vincoli di autolayout, si finisce con un pulsante di ridimensionamento automatico che contiene un'immagine e testo! Visto di seguito con desiredLeftPaddingimpostato su 10.

Puoi vedere che la cornice effettiva del pulsante non comprende l'etichetta (poiché l'etichetta viene spostata di 10 punti a destra, fuori dai limiti), ma abbiamo ottenuto 10 punti di riempimento tra il testo e l'immagine.

Per Swift 3 basato sulla risposta di 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)

    }

}

Tutto sopra non ha funzionato per iOS 9+ , quello che ho fatto è:

• Aggiungi un vincolo di larghezza (per una larghezza minima quando il pulsante non ha testo. Il pulsante si ridimensionerà automaticamente se viene fornito il testo)
• imposta la relazione su Maggiore o uguale

Ora per aggiungere un bordo attorno al pulsante basta usare il metodo:

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

Volevo aggiungere uno spazio 5pt tra la mia icona UIButton e l'etichetta. Ecco come l'ho raggiunto:

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

Il modo in cui contentEdgeInsets, titleEdgeInsets e imageEdgeInsets si relazionano tra loro richiede un piccolo dare e avere da ogni inserto. Quindi, se aggiungi alcuni inserti a sinistra del titolo, devi aggiungere un inserto negativo a destra e fornire un po 'più di spazio (tramite un inserto positivo) sul contenuto a destra.

Aggiungendo un giusto inserto di contenuto per adattarsi allo spostamento delle inserzioni del titolo, il mio testo non va oltre i limiti del pulsante.

L'opzione è disponibile anche nel generatore di interfaccia. Vedi l'inserto. Ho impostato sinistra e destra su 3. Funziona come un fascino.

La soluzione che uso è aggiungere un vincolo di larghezza al pulsante. Quindi da qualche parte nell'inizializzazione, dopo aver impostato il testo, aggiorna il vincolo di larghezza in questo modo:

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

Dove 8 è qualunque sia la tua inserzione.

chiamando sizeToFit () si assicura che contentEdgeInset sia attivo

extension UIButton {

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