Comment ajouter plusieurs lignes de texte à un UIButton?

voix
313

J'ai le code suivant...

UILabel *buttonLabel = [[UILabel alloc] initWithFrame:targetButton.bounds];
buttonLabel.text = @Long text string;
[targetButton addSubview:buttonLabel];
[targetButton bringSubviewToFront:buttonLabel];

... l'idée étant que je peux avoir plusieurs lignes de texte pour le bouton, mais le texte est toujours obscurci par le backgroundImage du UIButton. Un appel d'enregistrement pour afficher les sous-vues du bouton montre que la UILabel a été ajouté, mais le texte lui-même ne peut pas être vu. Est-ce un bogue dans UIButton ou que je fais quelque chose de mal?

Créé 03/03/2009 à 01:22
source utilisateur
Dans d'autres langues...                            


26 réponses

voix
618

Pour iOS 6 et plus, utilisez les touches suivantes pour permettre à plusieurs lignes:

button.titleLabel.lineBreakMode = NSLineBreakByWordWrapping;
// you probably want to center it
button.titleLabel.textAlignment = NSTextAlignmentCenter; // if you want to 
[button setTitle: @"Line1\nLine2" forState: UIControlStateNormal];

Pour iOS 5 et au-dessous utilisez les touches suivantes pour permettre à plusieurs lignes:

button.titleLabel.lineBreakMode = UILineBreakModeWordWrap;
// you probably want to center it
button.titleLabel.textAlignment = UITextAlignmentCenter;
[button setTitle: @"Line1\nLine2" forState: UIControlStateNormal];

2017, pour iOS9 avant ,

En règle générale, le faire ces deux choses:

  1. choisissez « Attribuée texte »
  2. dans la fenêtre contextuelle « Pause ligne » , sélectionnez « Retour à la ligne »
Créé 01/12/2009 à 23:34
source utilisateur

voix
114

La réponse correcte est sélectionnée, mais si vous préférez faire ce genre de chose dans Interface Builder, vous pouvez le faire:

pic

Créé 14/05/2014 à 16:36
source utilisateur

voix
53

Pour IOS 6:

button.titleLabel.lineBreakMode = NSLineBreakByWordWrapping;
button.titleLabel.textAlignment = NSTextAlignmentCenter;

Comme

UILineBreakModeWordWrap and UITextAlignmentCenter

sont désapprouvée dans IOS 6 partir ..

Créé 08/10/2012 à 08:14
source utilisateur

voix
41

Si vous souhaitez ajouter un bouton avec le titre centré avec plusieurs lignes, définir les paramètres de votre Interface Builder pour le bouton:

[ ici]

Créé 21/10/2015 à 09:03
source utilisateur

voix
28

Pour retraiter la suggestion de Roger Nolan, mais avec le code explicite, c'est la solution générale:

button.titleLabel?.numberOfLines = 0
Créé 28/10/2010 à 16:45
source utilisateur

voix
17

SWIFT 3

button.titleLabel?.lineBreakMode = .byWordWrapping
button.titleLabel?.textAlignment = .center  
button.setTitle("Button\nTitle",for: .normal)
Créé 08/05/2017 à 09:56
source utilisateur

voix
10

Il y a une façon beaucoup plus facile:

someButton.lineBreakMode = UILineBreakModeWordWrap;

(Edit pour iOS 3 et plus tard :)

someButton.titleLabel.lineBreakMode = UILineBreakModeWordWrap;
Créé 25/10/2009 à 20:48
source utilisateur

voix
9

Aligner à gauche sur iOS 7 avec autolayout:

button.titleLabel.lineBreakMode = NSLineBreakByWordWrapping;
button.titleLabel.textAlignment = NSTextAlignmentLeft;
button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;
Créé 28/06/2013 à 20:07
source utilisateur

voix
7

Tout d' abord, vous devez savoir que UIButton a déjà une UILabel à l' intérieur. Vous pouvez définir à l'aide –setTitle:forState:.

Le problème avec votre exemple est que vous devez définir de UILabel numberOfLinespropriété autre chose que sa valeur par défaut de 1. Vous devriez également examiner la lineBreakModepropriété.

Créé 03/03/2009 à 09:35
source utilisateur

voix
4

Les réponses vous disent ici comment obtenir le titre de bouton multiligne programme.

Je voulais juste ajouter que si vous utilisez storyboards, vous pouvez taper [Ctrl + Entrée] pour forcer un retour à la ligne sur un champ de titre du bouton.

HTH

Créé 01/05/2013 à 10:50
source utilisateur

voix
4

Pour ceux qui utilisent le story-board de Xcode 4, vous pouvez cliquer sur le bouton, et sur le côté droit fenêtre Utilitaires sous Attributs Inspecteur, vous verrez une option pour Line Break. Choisissez Word Wrap, et vous devriez être bon d'aller.

Créé 09/05/2012 à 19:12
source utilisateur

voix
3

Quant à l'idée de Brent de mettre le UILabel titre comme vue frères et soeurs, il ne me semble pas être une très bonne idée. Je continue à penser à des problèmes d'interaction avec le UILabel en raison de ses événements tactiles ne passe pas la vue du UIButton.

D'autre part, avec un UILabel comme sous-vue du UIButton, je suis assez confortable sachant que les événements tactiles seront toujours propagées au superview du UILabel.

Je ne prends cette approche et n'a pas remarqué aucun des problèmes signalés avec backgroundImage. J'ai ajouté ce code dans le -titleRectForContentRect: d'une sous-classe UIButton mais le code peut également être placé dans la routine de dessin de la superview UIButton, qui, dans ce cas, vous remplace toutes les références à l'auto avec la variable du UIButton.

#define TITLE_LABEL_TAG 1234

- (CGRect)titleRectForContentRect:(CGRect)rect
{   
    // define the desired title inset margins based on the whole rect and its padding
    UIEdgeInsets padding = [self titleEdgeInsets];
    CGRect titleRect = CGRectMake(rect.origin.x    + padding.left, 
                                  rect.origin.x    + padding.top, 
                                  rect.size.width  - (padding.right + padding.left), 
                                  rect.size.height - (padding.bottom + padding].top));

    // save the current title view appearance
    NSString *title = [self currentTitle];
    UIColor  *titleColor = [self currentTitleColor];
    UIColor  *titleShadowColor = [self currentTitleShadowColor];

    // we only want to add our custom label once; only 1st pass shall return nil
    UILabel  *titleLabel = (UILabel*)[self viewWithTag:TITLE_LABEL_TAG];


    if (!titleLabel) 
    {
        // no custom label found (1st pass), we will be creating & adding it as subview
        titleLabel = [[UILabel alloc] initWithFrame:titleRect];
        [titleLabel setTag:TITLE_LABEL_TAG];

        // make it multi-line
        [titleLabel setNumberOfLines:0];
        [titleLabel setLineBreakMode:UILineBreakModeWordWrap];

        // title appearance setup; be at will to modify
        [titleLabel setBackgroundColor:[UIColor clearColor]];
        [titleLabel setFont:[self font]];
        [titleLabel setShadowOffset:CGSizeMake(0, 1)];
        [titleLabel setTextAlignment:UITextAlignmentCenter];

        [self addSubview:titleLabel];
        [titleLabel release];
    }

    // finally, put our label in original title view's state
    [titleLabel setText:title];
    [titleLabel setTextColor:titleColor];
    [titleLabel setShadowColor:titleShadowColor];

    // and return empty rect so that the original title view is hidden
    return CGRectZero;
}

J'ai pris le temps et écrit un peu plus sur ce ici . Là, je tiens également à une solution plus courte, mais il ne correspond pas tout à fait tous les scénarios et implique des vues privées hacking. Là aussi, vous pouvez télécharger une sous - classe UIButton prêt à être utilisé.

Créé 09/03/2009 à 15:25
source utilisateur

voix
2

Vous devez ajouter ce code:

buttonLabel.titleLabel.numberOfLines = 0;
Créé 21/02/2018 à 11:41
source utilisateur

voix
2

Si vous utilisez la configuration automatique.

button.titleLabel?.adjustsFontSizeToFitWidth = true
button.titleLabel?.numberOfLines = 2
Créé 09/12/2016 à 10:55
source utilisateur

voix
2

Réglage lineBreakMode à NSLineBreakByWordWrapping (dans IB ou code) rend l'étiquette de bouton multiligne, mais ne touche pas le cadre de bouton.

Si le bouton a un titre dynamique, il y a une astuce: mettre UILabel cachée avec la même police et l'attacher sa hauteur à la hauteur du bouton avec la mise en page; lorsque de texte à bouton et l'étiquette et autolayout fera tout le travail.

Remarque

hauteur de la taille du bouton Intrinsèque d'une ligne est plus grande que celle de l'étiquette, afin d'empêcher la hauteur de l'étiquette il est rétrécir Priorité contenu étreignant verticale doit être supérieure à contenu vertical bouton Résistance à la compression.

Créé 31/08/2015 à 20:21
source utilisateur

voix
2

Si vous utilisez sur iOS 6 auto-mise en page que vous devrez peut -être également définir la preferredMaxLayoutWidthpropriété:

button.titleLabel.lineBreakMode = NSLineBreakByWordWrapping;
button.titleLabel.textAlignment = NSTextAlignmentCenter;
button.titleLabel.preferredMaxLayoutWidth = button.frame.size.width;
Créé 01/05/2013 à 19:45
source utilisateur

voix
2

Il fonctionne parfaitement.

Ajouter à utiliser avec le fichier de configuration comme Plist, vous devez utiliser CDATA pour écrire le titre multilined, comme ceci:

<string><![CDATA[Line1
Line2]]></string>
Créé 11/05/2011 à 11:04
source utilisateur

voix
1
self.btnError.titleLabel?.lineBreakMode = NSLineBreakMode.byWordWrapping

self.btnError.titleLabel?.textAlignment = .center

self.btnError.setTitle("Title", for: .normal)
Créé 03/08/2017 à 09:40
source utilisateur

voix
0

Dans Swift 5.0 et Xcode 10.2

SharedClass exemple écrire une fois et utilisez tous les articles

Ceci est votre classe partagée (comme cela, vous utilisez toutes les propriétés des composants)

import UIKit

class SharedClass: NSObject {

     static let sharedInstance = SharedClass()

     private override init() {

     }
  }

//UIButton extension
extension UIButton {
     //UIButton properties
     func btnMultipleLines() {
         titleLabel?.numberOfLines = 0
         titleLabel?.lineBreakMode = .byWordWrapping
         titleLabel?.textAlignment = .center        
     }
}

Dans votre ViewController appel comme celui - ci

button.btnMultipleLines()//This is your button
Créé 29/04/2019 à 07:54
source utilisateur

voix
0

J'ai eu un problème avec la configuration automatique, après l' activation de plusieurs lignes le résultat était comme ça: si la taille ne modifie pas la taille du bouton J'ai ajouté sur la base (dans ce contentEdgeInsets de cas était (10, 10, 10, 10 ) après avoir appelé : espérons que cela vous aidera (5.0 rapide):
entrez la description d'image ici
titleLabel
ConstraintscontentEdgeInsets
makeMultiLineSupport()
entrez la description d'image ici

extension UIButton {

    func makeMultiLineSupport() {
        guard let titleLabel = titleLabel else {
            return
        }
        titleLabel.numberOfLines = 0
        titleLabel.setContentHuggingPriority(.required, for: .vertical)
        titleLabel.setContentHuggingPriority(.required, for: .horizontal)
        addConstraints([
            .init(item: titleLabel,
                  attribute: .top,
                  relatedBy: .greaterThanOrEqual,
                  toItem: self,
                  attribute: .top,
                  multiplier: 1.0,
                  constant: contentEdgeInsets.top),
            .init(item: titleLabel,
                  attribute: .bottom,
                  relatedBy: .greaterThanOrEqual,
                  toItem: self,
                  attribute: .bottom,
                  multiplier: 1.0,
                  constant: contentEdgeInsets.bottom),
            .init(item: titleLabel,
                  attribute: .left,
                  relatedBy: .greaterThanOrEqual,
                  toItem: self,
                  attribute: .left,
                  multiplier: 1.0,
                  constant: contentEdgeInsets.left),
            .init(item: titleLabel,
                  attribute: .right,
                  relatedBy: .greaterThanOrEqual,
                  toItem: self,
                  attribute: .right,
                  multiplier: 1.0,
                  constant: contentEdgeInsets.right)
            ])
    }

}
Créé 11/04/2019 à 21:25
source utilisateur

voix
0

Ces jours-ci, si vous avez vraiment besoin de ce genre de chose pour être accessible à constructeur d'interface sur une base au cas par cas, vous pouvez le faire avec une simple extension comme ceci:

extension UIButton {
    @IBInspectable var numberOfLines: Int {
        get { return titleLabel?.numberOfLines ?? 1 }
        set { titleLabel?.numberOfLines = newValue }
    }
}

Ensuite, vous pouvez simplement définir NumberOfLines comme un attribut sur une sous-classe UIButton ou UIButton comme si elle était une étiquette. La même chose vaut pour une foule d'autres valeurs habituellement inaccessibles, comme le rayon d'angle de la couche de vue, ou les attributs de l'ombre qu'il projette.

Créé 17/11/2018 à 07:12
source utilisateur

voix
0

Dans Xcode 9.3 , vous pouvez le faire en utilisant storyboard comme ci - dessous,

entrez la description d'image ici

Vous devez définir le bouton titre TextAlignment au centre

button.titleLabel?.textAlignment = .center

Vous n'avez pas besoin de définir le texte du titre avec une nouvelle ligne (\ n) comme ci-dessous,

button.setTitle("Good\nAnswer",for: .normal)

titre Il suffit de définir,

button.setTitle("Good Answer",for: .normal)

Voici le résultat,

entrez la description d'image ici

Créé 31/05/2018 à 06:14
source utilisateur

voix
0

J'ai intégré la réponse de jessecurry au sein STAButton qui fait partie de mes STAControls bibliothèque open source. J'utilise actuellement il dans l' une des applications que je développe et travaille pour mes besoins. Ne hésitez pas à ouvrir des questions sur la façon d'améliorer ou envoyez - moi des demandes tirer.

Créé 05/05/2018 à 23:27
source utilisateur

voix
0

rapide 4.0

btn.titleLabel?.lineBreakMode = .byWordWrapping
btn.titleLabel?.textAlignment = .center
btn.setTitle( "Line1\nLine2", for: .normal)
Créé 25/03/2018 à 12:50
source utilisateur

voix
0

Réaliser votre propre classe de bouton. Il est de loin la meilleure solution à long terme. UIButton et d'autres classes UIKit sont très restrictives dans la façon dont vous pouvez les personnaliser.

Créé 10/03/2009 à 14:16
source utilisateur

voix
-3

Bien qu'il soit correct d'ajouter un sous-vue à un contrôle, il n'y a aucune garantie que cela va réellement fonctionner, parce que le contrôle pourrait ne pas attendre qu'il soit là et pourrait donc se comporter mal. Si vous pouvez vous en sortir avec elle, il suffit d'ajouter l'étiquette en vue de frères et soeurs du bouton et définir le cadre de manière à ce qu'elle chevauche le bouton; tant qu'il est défini pour apparaître au-dessus du bouton, rien sur le bouton peut faire s'obscurcir.

En d'autres termes:

[button.superview addSubview:myLabel];
myLabel.center = button.center;
Créé 03/03/2009 à 13:04
source utilisateur

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more