Mise en page automatique - la taille intrinsèque de UIButton n'inclut pas les encarts de titre

Si j'ai un UIButton arrangé en utilisant la mise en page automatique, sa taille s'ajuste bien pour s'adapter à son contenu.

Si je mets une image en tant que button.image, la taille intrinsèque semble à nouveau expliquer cela.

Cependant, si je modifie le titleEdgeInsetsbouton, la mise en page ne tient pas compte de cela et tronque le titre du bouton.

Comment puis-je m'assurer que la largeur intrinsèque du bouton représente l'encart?

Éditer:

J'utilise les éléments suivants:

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

Le but est d'ajouter une certaine séparation entre l'image et le texte.

Vous pouvez résoudre ce problème sans avoir à remplacer les méthodes ou à définir une contrainte de largeur arbitraire. Vous pouvez tout faire dans Interface Builder comme suit.

• La largeur intrinsèque du bouton est dérivée de la largeur du titre plus la largeur de l'icône plus les encarts de bord de contenu gauche et droit .

• Si un bouton contient à la fois une image et du texte, ils sont centrés en groupe, sans aucun remplissage entre eux.

• Si vous ajoutez un encart de contenu gauche, il est calculé par rapport au texte, pas au texte + icône.

• Si vous définissez une incrustation d'image gauche négative, l'image est tirée vers la gauche mais la largeur globale du bouton n'est pas affectée.

• Si vous définissez un encart d'image gauche négatif, la mise en page réelle utilise la moitié de cette valeur. Donc, pour obtenir un encart gauche de -20 points, vous devez utiliser une valeur d'encart gauche de -40 points dans Interface Builder.

Vous fournissez donc un encart de contenu gauche suffisamment grand pour créer de l'espace pour l'encart gauche souhaité et le remplissage intérieur entre l'icône et le texte, puis déplacez l'icône vers la gauche en doublant la quantité de remplissage souhaitée entre l'icône et le texte. Le résultat est un bouton avec des encarts de contenu égaux à gauche et à droite, et une paire de texte et d'icônes qui sont centrés en tant que groupe, avec une quantité spécifique de remplissage entre eux.

Quelques exemples de valeurs:

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

Vous pouvez le faire fonctionner dans Interface Builder (sans écrire de code), en utilisant une combinaison de titres et de contenus négatifs et positifs.

Mise à jour : Xcode 7 a un bug où vous ne pouvez pas entrer de valeurs négatives dans le Rightchamp Encart, mais vous pouvez utiliser le contrôle pas à pas à côté de lui pour diminuer la valeur. (Merci Stuart)

Faire cela ajoutera 8 pt d'espacement entre l'image et le titre et augmentera la largeur intrinsèque du bouton de la même quantité. Comme ça:

Pourquoi ne pas remplacer la intrinsicContentSizeméthode sur UIView? Par exemple:

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

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

Cela devrait indiquer au système de mise en page automatique qu'il doit augmenter la taille du bouton pour permettre les encarts et afficher le texte intégral. Je ne suis pas sur mon propre ordinateur, je n'ai donc pas testé cela.

Vous n'avez pas spécifié comment vous définissez les encarts, donc je suppose que vous utilisez titleEdgeInsets parce que je vois le même effet que vous obtenez. Si j'utilise contentEdgeInsets à la place, cela fonctionne correctement.

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

Et pour Swift a travaillé ceci:

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

Ce fil est un peu ancien, mais je l'ai rencontré moi-même et j'ai pu le résoudre en utilisant un encart négatif. Par exemple, remplacez ici les valeurs de remplissage souhaitées:

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

Combiné avec les bonnes contraintes de mise en page automatique, vous vous retrouvez avec un bouton de redimensionnement automatique qui contient une image et du texte! Vu ci-dessous avec un desiredLeftPaddingréglage sur 10.

Vous pouvez voir que le cadre réel du bouton ne comprend pas l'étiquette (puisque l'étiquette est décalée de 10 points vers la droite, en dehors des limites), mais nous avons atteint 10 points de remplissage entre le texte et l'image.

Pour Swift 3 basé sur la réponse de 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)

    }

}

Tout ce qui précède ne fonctionnait pas pour iOS 9+ , ce que j'ai fait est:

• Ajouter une contrainte de largeur (pour une largeur minimale lorsque le bouton n'a pas de texte. Le bouton sera automatiquement mis à l'échelle si du texte est fourni)
• définir la relation avec Supérieur ou égal à

Maintenant, pour ajouter une bordure autour du bouton, utilisez simplement la méthode:

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

Je voulais ajouter un espace de 5 points entre mon icône UIButton et l'étiquette. Voici comment je l'ai réalisé:

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

La façon dont contentEdgeInsets, titleEdgeInsets et imageEdgeInsets se rapportent les uns aux autres nécessite un peu de compromis de chaque encart. Donc, si vous ajoutez des encarts à gauche du titre, vous devez ajouter un encart négatif à droite et fournir plus d'espace (via un encart positif) à droite du contenu.

En ajoutant une insertion de contenu à droite pour correspondre au décalage des insertions de titre, mon texte ne sort pas des limites du bouton.

L'option est également disponible dans le générateur d'interface. Voir l'encart. J'ai mis à gauche et à droite à 3. Fonctionne comme un charme.

La solution que j'utilise est d'ajouter une contrainte de largeur sur le bouton. Puis quelque part dans l'initialisation, une fois votre texte défini, mettez à jour la contrainte de largeur comme suit:

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

Où 8 correspond à votre encart.

l'appel de sizeToFit () garantit que contentEdgeInset est pris en compte

extension UIButton {

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