web-dev-qa-db-fra.com

donner une marge de texte/remplissage à l'UiButton sur l'Iphone

J'ai la mise en page suivante, et j'essaye d'ajouter un rembourrage à gauche et à droite ..

les contrôles sont certains Uibutton désactivé. enter image description here

Mon code pour créer un bouton est le suivant:

        UIButton *buttonTime = [[UIButton alloc] initWithFrame:CGRectMake(90, 10, 50, 20)]; 
        [buttonTime setBackgroundImage:[[UIImage imageNamed:@"bubble.png"] stretchableImageWithLeftCapWidth:9 topCapHeight:13] forState:UIControlStateDisabled];

        [buttonTime setTitle:@"27 feb, 2011 11:10 PM" forState:UIControlStateDisabled];             
        [buttonTime setTitleColor:[UIColor blackColor] forState:UIControlStateDisabled];
        buttonTime.titleLabel.font=[UIFont fontWithName:@"Helvetica" size:8.0]; 
        buttonTime.titleLabel.lineBreakMode= UILineBreakModeWordWrap;
        [buttonTime setEnabled:FALSE];
        [scrollView addSubview:buttonTime];
        [buttonTime release];
iphoneuibuttonpaddingmargin
52
PartySoft
@property(nonatomic) UIEdgeInsets titleEdgeInsets;

Utilisez cette propriété pour redimensionner et repositionner le rectangle de dessin effectif pour le titre du bouton. Vous pouvez spécifier une valeur différente pour chacune des quatre encarts (haut, gauche, bas, droite). Une valeur positive réduit ou insère ce bord, le rapprochant du centre du bouton. Une valeur négative développe ou confine ce bord. Utilisez la fonction UIEdgeInsetsMake pour créer une valeur pour cette propriété. La valeur par défaut est UIEdgeInsetsZero.

69
AechoLiu

La réponse de Toro est parfaite. Vous pouvez également définir les valeurs d'insertion à partir de l'inspecteur de taille dans le storyboard ou xib.

enter image description here

80
Egor T

La définition des incrustations content empêchera le titre de la UIButton de se réduire/être tronqué, ce qui donnera à la marge du texte un remplissage.

 content edges

27
J. Doe

Le problème avec la réponse acceptée est que définir la titleEdgeInsets est la limitation, comme indiqué dans la documentation d'Apple:

Cette propriété est utilisée uniquement pour positionner le titre lors de la mise en page. Le bouton> n'utilise pas cette propriété pour déterminer les propriétés intrinsicContentSize et> sizeThatFits (_ :).

Cela signifie que la définition des marges ne fonctionne que si le bouton est explicitement dimensionné pour correspondre au libellé du titre et aux marges. Si un titre est trop long ou si les marges sont trop grandes, le texte du titre peut être tronqué. Cela convient pour un bouton dont vous connaissez le titre au moment de la compilation, mais pour un titre de bouton de longueur variable, peut poser problème.

Une autre approche permettant d’adapter la longueur du titre variable consiste à laisser la valeur titleEdgeInsets comme valeur par défaut. Une fois que le titre du bouton est défini, ajoutez des contraintes explicites de largeur et de hauteur adaptées au libellé de titre du bouton et aux marges supplémentaires. Par exemple:

let margin: CGFloat = 10.0

let button = UIButton()

button.setTitle("My Button Title", for .normal)

button.widthAnchor.constraint(equalToConstant: button.titleLabel!.intrinsicContentSize.width + margin * 2.0).isActive = true

button.heightAnchor.constraint(equalToConstant: button.titleLabel!.intrinsicContentSize.height + margin * 2.0).isActive = true

Positionnez le bouton sans ajouter d'autres contraintes de hauteur ou de largeur et il apparaîtra correctement quelle que soit la longueur du titre.

6
user3847320

Cette option est également viable si ce n’est pas trop ennuyeux d’utiliser une sous-classe UIButton

class Button: UIButton {
    override var intrinsicContentSize: CGSize {
        get {
            let baseSize = super.intrinsicContentSize
            return CGSize(width: baseSize.width + titleEdgeInsets.left + titleEdgeInsets.right,
                          height: baseSize.height + titleEdgeInsets.top + titleEdgeInsets.bottom)
        }
    }
}

Puis utilisez titleEdgeInsets comme vous le souhaitez

 let button = Button()
 ... configure button
 button.titleEdgeInsets = ...
3
wfbarksdale

this link fonctionne comme un charme avec la propriété contentHorizontalAlignment

2
Abhilash Reddy

Swift 4 Remarque: utilisez contentEdgeInsets et non titleEdgeInsets

btn.contentEdgeInsets =  UIEdgeInsetsMake(8, 8, 8, 8)
btn.titleLabel?.lineBreakMode = .byWordWrapping

Cela fera en sorte que le bouton enveloppe son texte et le garde une ligne tant qu'il y aura de la place pour le bouton + un peu de rembourrage

2
Daniel Raouf

J'ai trouvé un moyen simple et rapide d'ajouter des bordures aux boutons de texte (et des marges gauche/droite):

  1. Créer un bouton avec titre.

  2. Placez le bouton dans le storyboard, alignez où vous voulez, puis ajoutez une contrainte de largeur forcée qui est un nombre pair (j'ai utilisé 20, donc il ajoute 10 points de chaque côté). Cela forcera la bordure autour de la largeur que vous avez créée.

  3. Utilisez le code pour créer une bordure. par exemple:

    myTextButton.backgroundColor = .clear
myTextButton.layer.cornerRadius = 5
myTextButton.layer.borderWidth = 2
myTextButton.layer.borderColor = UIColor.white.cgColor

  4. Définissez titleInset de gauche sur 2 via l'éditeur (maintenant sous Inspecteur de taille) ou par code. Cela semble centrer le texte, mais cette valeur peut être différente pour différents textes et tailles de texte.

Ce post est pour XCode 8.1 et Swift 3.

1
Abhi

Avec les solutions ci-dessus, une partie du texte a été coupée si vous avez une bordure autour du bouton. Par exemple, une étiquette de bouton nommée "Supprimer quelque chose" affiche finalement "Suppression ...". Si vous rencontrez ce problème, voici la solution: 

aButton.contentEdgeInsets = UIEdgeInset.init(top: 0, left: 8, bottom: 0, right: 8)
0
Joseph Francis