UIButton avec deux lignes de texte dans le titre (numberOfLines = 2)

86

J'essaye de faire un UIButtonJ'essaye qui a deux lignes de texte dans son titleLabel. Voici le code que j'utilise:

    UIButton *titleButton = [[UIButton alloc] initWithFrame:CGRectMake(15, 10, frame.size.width-100, 100)];
    titleButton.titleLabel.font = [UIFont boldSystemFontOfSize:24.0];
    [titleButton setTitle:@"This text is very long and should get truncated at the end of the second line" forState:UIControlStateNormal];
    titleButton.titleLabel.lineBreakMode = UILineBreakModeTailTruncation;
    titleButton.titleLabel.numberOfLines = 2;
    [self addSubview:titleButton];

Lorsque j'essaye ceci, le texte n'apparaît que sur une seule ligne. Il semble que le seul moyen d'obtenir plus d'une ligne de texte enUIButton.titleLabel consiste à définir numberOfLines=0et à utiliser UILineBreakModeWordWrap. Mais cela ne garantit pas que le texte comporte exactement deux lignes.

Utiliser une plaine UILabelCependant, l' fonctionne:

    UILabel *titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(15, 10, frame.size.width-100, 100)];
    titleLabel.font = [UIFont boldSystemFontOfSize:24.0];
    titleLabel.text = @"This text is very long and should get truncated at the end of the second line";
    titleLabel.numberOfLines = 2;
    titleLabel.lineBreakMode = UILineBreakModeTailTruncation;
    [self addSubview:titleLabel];

Est-ce que quelqu'un sait comment faire le UIButtontravail avec deux lignes? La seule solution consiste-t-elle à créer UILabelun élément séparé pour contenir le texte et à l'ajouter en tant que sous-vue du bouton?

— marketeur
source

1

Avez-vous vu cette ? - stackoverflow.com/questions/604632/…

— Viraj

Viraj, oui, si vous définissez numberOfLines=0et utilisez UILineBreakModeWordWrap, vous pouvez obtenir plusieurs lignes. Le problème avec cela est que cela pourrait donner plus de deux lignes si le texte est trop long. Je veux exactement deux solitaires avec des élipses à la fin de la deuxième ligne (si le texte est trop long).

— marketer

Oh, alors je suppose que l'ajout d'une sous-vue est peut-être la seule façon de procéder.

— Viraj

87

Réponse mise à jour pour les versions iOS plus récentes

Comme c'est la réponse acceptée, ajoutez la réponse de @ Sean ici:

Définissez ces propriétés sur le titleLabel de votre bouton.

button.titleLabel.lineBreakMode = NSLineBreakByWordWrapping;
button.titleLabel.numberOfLines = 2; // if you want unlimited number of lines put 0

Swift 3 et 4:

button.titleLabel?.lineBreakMode = .byWordWrapping
button.titleLabel?.numberOfLines = 2 // if you want unlimited number of lines put 0

Réponse originale pour une ancienne version d'iOS

Si vous voulez 2 lignes de texte au-dessus de votre, UIButtonvous devez ajouter un UIlabeldessus qui fait précisément cela.

UILabel *titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(15, 10, frame.size.width-100, 100)];
titleLabel.font = [UIFont boldSystemFontOfSize:24.0];
titleLabel.text = @"This text is very long and should get truncated at the end of the second line";
titleLabel.numberOfLines = 2;
titleLabel.lineBreakMode = UILineBreakModeTailTruncation;
[myButton addSubview:titleLabel]; //add label to button instead.

Mise à jour pour la solution de création d'interface

Ajout de la réponse de @Borut Tomazin pour une réponse plus complète. Mise à jour de cette partie depuis que la réponse de @Borut Tomazin a été améliorée.

Vous pouvez le faire beaucoup plus facilement, sans code requis. Dans Interface Builder, définissez Line BreakUIButton sur Word Wrap. Ensuite, vous pouvez insérer plusieurs lignes de titre. Option + ReturnAppuyez simplement sur les touches pour créer une nouvelle ligne. Vous devrez également l'ajouter à l'attribut d'exécution défini par l'utilisateur dans Interface Builder:

titleLabel.textAlignment Number [1]

— Totumus Maximus
source

5

UILineBreakModesont obsolètes, utilisez-les à la NSLineBreakModeplace

— guillaume

2

Cela est inutile dans les versions récentes d'iOS. Voir la réponse de @ sean.

— cbowns

146

Vous n'avez pas besoin d'ajouter un UILabel à l'UIButton. Ce ne sont que des objets et du travail supplémentaires.

Définissez ces propriétés sur le titleLabel de votre bouton.

button.titleLabel.lineBreakMode = NSLineBreakByWordWrapping;
button.titleLabel.numberOfLines = 2;//if you want unlimited number of lines put 0

Rapide:

button.titleLabel!.lineBreakMode = NSLineBreakMode.ByWordWrapping
button.titleLabel!.numberOfLines = 2//if you want unlimited number of lines put 0

— Sean
source

6

C'est le 2013 et à partir d'aujourd'hui, c'est la solution de pointe.

— Klaas

@Blip vous ne pouvez malheureusement pas et devez le faire dans le code. Cela pourrait valoir la peine de déposer un rapport de bogue auprès d'Apple demandant cette fonctionnalité.

— bpapa

@bpapa Oui, je suis d'accord, les storyboards devraient être plus flexibles.

— Blip

6

Cela fonctionne pour moi, mais cela rompt le comportement par défaut du bouton intrinsicContentSize, qui renvoie toujours une hauteur qui correspond à une seule ligne de texte. Je l'ai corrigé en remplaçant le bouton intrinsicContentSizelà où je définissais la hauteur [self.titleLabel sizeThatFits(CGSizeMake(self.titleLabel.frame.size.width, CGFLOAT_MAX)].height.

— Elise le

@WillVonUllrich car vous ne pouvez modifier la réponse acceptée que lorsqu'elle est modifiée. J'ai ajouté ces réponses à la réponse acceptée pour aider les personnes qui ne cherchent pas plus loin que la réponse acceptée.

— Totumus Maximus

88

Vous pouvez le faire beaucoup plus facilement, sans code requis. Dans Interface Builder, définissez Line BreakUIButton sur Word Wrap. Ensuite, vous pouvez insérer plusieurs lignes de titre. Option + ReturnAppuyez simplement sur les touches pour créer une nouvelle ligne. Vous devrez également l'ajouter à l'attribut d'exécution défini par l'utilisateur dans Interface Builder:

titleLabel.textAlignment Number [1]

C'est si simple. J'espère que cela aide...

— Borut Tomazin
source

1

Cette solution est meilleure (moins d'objets, de code) que celle actuellement acceptée, pour les cas simples.

— Jonathan Zhan

1

Vous définissez exactement les mêmes propriétés que vous le feriez par programme afin que votre argument "moins d'objets" ne soit pas valide. Le code est peut-être moins. Mais c'est plus lisible. Faites votre choix;)

— Totumus Maximus

Oh, je n'étais pas clair je pense. Merci d'essayer de clarifier. N'était pas tellement préoccupé par le fait que cela se fasse dans IB vs Code. Plus à voir avec le fait que vous n'avez pas besoin d'ajouter une étiquette supplémentaire avec la solution de Borut, et qu'elle accomplit également la même chose. Mais oui, les deux fonctionnent très bien. :)

— Jonathan Zhan

c'est vraiment écrasant de devoir passer au code derrière pour une tâche aussi basique.

— Can Poyrazoğlu

3

Vous pouvez atteindre le même objectif à 100% sans code en ajoutant l' titleLabel.textAlignment attribut d'exécution défini par l' utilisateur dans Interface Builder et en le définissant sur Number = 1 (valeur de NSTextAlignmentCenter).

— 0xcédé

21

 button.titleLabel.lineBreakMode = NSLineBreakByWordWrapping;

button.titleLabel.textAlignment = NSTextAlignmentCenter;

[button setTitle: @"Line1\nLine2" forState: UIControlStateNormal];

— Suraj K Thomas
source

Parfait! Vous n'avez pas à fendre l' NSStringintérieur setTitle. `` WordWrapping`` fait cela pour vous!

— Alex Cio

Pour moi, j'ai dû séparer la chaîne à l'intérieur du titre du set. Sans cela, cela n'a pas fonctionné

— user1960169

9

Pour éviter complètement le besoin de modifier le code, et donc le besoin de sous-classer votre vue, dans Xcode5 et supérieur, vous pouvez suivre la suggestion de Borut Tomazin:

Dans Interface Builder (ou storyboard), définissez Saut de ligne sur Word Wrap. Ensuite, vous pouvez insérer plusieurs lignes de titre. Appuyez simplement sur les touches Option+ Returnpour créer une nouvelle ligne.

puis, dans les attributs d'exécution définis par l' utilisateur, vous pouvez ajouter

Chemin clé: titleLabel.textAlignment
Type: Number
Valeur:1

Remarque: ce n'est peut-être pas complètement «à l'épreuve du temps» puisque nous traduisons la UITextAlignmentCenterconstante en sa valeur numérique (et cette constante peut changer à mesure que de nouvelles versions iOS sont publiées), mais cela semble sûr dans un proche avenir.

— furines
source

0

Vous pouvez modifier la valeur requise directement depuis Storyboard. Sélectionnez le bouton, accédez à l'inspecteur d'identité et ajoutez la paire clé-valeur suivante dans la section "Attributs d'exécution définis par l'utilisateur":

— Arik Segal
source