¿Cómo se agrega texto multilínea a un UIButton?

votos
313

Tengo el siguiente código...

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

... la idea es que puedo tener texto de varias líneas para el botón, pero el texto siempre está oscurecido por la imagen de fondo del UIButton. Una llamada de registro para mostrar las subvistas del botón muestra que se ha agregado UILabel, pero el texto en sí no se puede ver. ¿Es esto un error en UIButton o estoy haciendo algo mal?

Publicado el 03/03/2009 a las 01:22
fuente por usuario
En otros idiomas...                            


26 respuestas

votos
618

Para iOS 6 y superior, use lo siguiente para permitir líneas múltiples:

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

Para iOS 5 y siguientes, utiliza lo siguiente para permitir líneas múltiples:

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

2017, para iOS9 adelante ,

En general, solo haz estas dos cosas:

  1. elige "Texto Atribuido"
  2. en la ventana emergente "Salto de línea", seleccione "Ajustar palabra"
Respondida el 01/12/2009 a las 23:34
fuente por usuario

votos
114

La respuesta seleccionada es correcta, pero si usted prefiere hacer este tipo de cosas en el Interface Builder usted puede hacer esto:

Foto

Respondida el 14/05/2014 a las 16:36
fuente por usuario

votos
53

Para IOS 6:

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

Como

UILineBreakModeWordWrap and UITextAlignmentCenter

ya no son aprobadas en iOS 6 en adelante ..

Respondida el 08/10/2012 a las 08:14
fuente por usuario

votos
41

Si desea agregar un botón con el título centrado con múltiples líneas, establecer los ajustes de la interfaz del generador para el botón:

[ aquí]

Respondida el 21/10/2015 a las 06:03
fuente por usuario

votos
28

Para volver a formular la sugerencia de Roger Nolan, pero con código explícito, esta es la solución general:

button.titleLabel?.numberOfLines = 0
Respondida el 28/10/2010 a las 16:45
fuente por usuario

votos
17

SWIFT 3

button.titleLabel?.lineBreakMode = .byWordWrapping
button.titleLabel?.textAlignment = .center  
button.setTitle("Button\nTitle",for: .normal)
Respondida el 08/05/2017 a las 06:56
fuente por usuario

votos
10

Hay una manera mucho más fácil:

someButton.lineBreakMode = UILineBreakModeWordWrap;

(Editar para iOS 3 y posteriores :)

someButton.titleLabel.lineBreakMode = UILineBreakModeWordWrap;
Respondida el 25/10/2009 a las 20:48
fuente por usuario

votos
9

Alinear a la izquierda en iOS7 con el diseño automático:

button.titleLabel.lineBreakMode = NSLineBreakByWordWrapping;
button.titleLabel.textAlignment = NSTextAlignmentLeft;
button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;
Respondida el 28/06/2013 a las 20:07
fuente por usuario

votos
7

En primer lugar, debe tener en cuenta que UIButton ya tiene un UILabel dentro. Puedes configurarlo usando –setTitle:forState:.

El problema con su ejemplo es que debe establecer la numberOfLinespropiedad de UILabel en un valor distinto a su valor predeterminado de 1. También debe revisar la lineBreakModepropiedad.

Respondida el 03/03/2009 a las 09:35
fuente por usuario

votos
4

Respuestas aquí te dicen cómo lograr título del botón de varias líneas mediante programación.

Sólo quería añadir que si está utilizando guiones gráficos, puede escribir [Ctrl + Enter] para forzar un salto de línea en un campo de título botón.

HTH

Respondida el 01/05/2013 a las 10:50
fuente por usuario

votos
4

Para aquellos que están usando Xcode guión gráfico de 4, puede hacer clic en el botón, y en el lado derecho panel de Utilidades en Atributos de Inspector, verá una opción para salto de línea. Elija Ajuste de línea, y usted debe ser bueno para ir.

Respondida el 09/05/2012 a las 19:12
fuente por usuario

votos
3

En cuanto a la idea de Brent de poner el título UILabel como punto de vista de hermanos, no me parece una muy buena idea. Sigo pensando en problemas de interacción con UILabel debido a que sus eventos táctiles no pasan por la vista de UIButton.

Por otro lado, con una UILabel como subvista del UIButton, estoy bastante cómodo sabiendo que los eventos táctiles siempre se propagarán a la supervista de UILabel.

Tomé este enfoque y no noté ninguno de los problemas reportados con backgroundImage. Agregué este código en el -titleRectForContentRect: de una subclase UIButton, pero el código también se puede colocar en la rutina de dibujo de la supervista UIButton, que en ese caso debe reemplazar todas las referencias a self con la variable 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;
}

Me tomé el tiempo y escribí un poco más sobre esto aquí . Allí, también apunto una solución más corta, aunque no encaja en todos los escenarios e involucra algunas pirateo de vistas privadas. También allí, puede descargar una subclase UIButton lista para ser utilizada.

Respondida el 09/03/2009 a las 15:25
fuente por usuario

votos
2

Usted tiene que añadir este código:

buttonLabel.titleLabel.numberOfLines = 0;
Respondida el 21/02/2018 a las 08:41
fuente por usuario

votos
2

Si usa la disposición automática.

button.titleLabel?.adjustsFontSizeToFitWidth = true
button.titleLabel?.numberOfLines = 2
Respondida el 09/12/2016 a las 07:55
fuente por usuario

votos
2

Configuración lineBreakMode a NSLineBreakByWordWrapping (ya sea en IB o código) hace multilínea etiqueta del botón, pero no afecta el marco de botón.

Si el botón tiene el título dinámico, hay un truco: poner UILabel oculto con mismo tipo de letra y corbata es la altura a la altura del botón con el diseño; cuando se establece en el texto de botón y la etiqueta y el diseño automático hará todo el trabajo.

Nota

tamaño altura intrínseca del botón de una línea es más grande que la etiqueta de, por lo que para evitar que la altura de la etiqueta retráctil que es vertical, la prioridad que abraza el contenido debe ser mayor que contenido verticales del botón de Resistencia a la Compresión.

Respondida el 31/08/2015 a las 20:21
fuente por usuario

votos
2

Si usa la disposición automática en iOS 6 también podría ser necesario para establecer la preferredMaxLayoutWidthpropiedad:

button.titleLabel.lineBreakMode = NSLineBreakByWordWrapping;
button.titleLabel.textAlignment = NSTextAlignmentCenter;
button.titleLabel.preferredMaxLayoutWidth = button.frame.size.width;
Respondida el 01/05/2013 a las 19:45
fuente por usuario

votos
2

Funciona perfectamente.

Añadir a usar esto con el archivo de configuración como Plist, es necesario utilizar CDATA para escribir el título multilined, así:

<string><![CDATA[Line1
Line2]]></string>
Respondida el 11/05/2011 a las 11:04
fuente por usuario

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

self.btnError.titleLabel?.textAlignment = .center

self.btnError.setTitle("Title", for: .normal)
Respondida el 03/08/2017 a las 06:40
fuente por usuario

votos
0

En Swift 5,0 y Xcode 10,2

SharedClass ejemplo, escribir una vez y utiliza todos los utensilios

Esta es su clase compartida (como este se utiliza todas las propiedades de componentes)

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

En su ViewController llamada como ésta

button.btnMultipleLines()//This is your button
Respondida el 29/04/2019 a las 07:54
fuente por usuario

votos
0

Tuve un problema con la disposición automática, después de habilitar varias líneas el resultado fue de esta manera: por lo que el tamaño no afecta el tamaño del botón He añadido basa en (en este caso era contentEdgeInsets (10, 10, 10, 10 ) después de llamar a : espero que usted (5.0 veloz ayuda):
introducir descripción de la imagen aquí
titleLabel
ConstraintscontentEdgeInsets
makeMultiLineSupport()
introducir descripción de la imagen aquí

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

}
Respondida el 11/04/2019 a las 21:25
fuente por usuario

votos
0

En estos días, si realmente necesita este tipo de cosas para ser accesible en constructor de interfaces en una base de caso por caso, puede hacerlo con una simple extensión de esta manera:

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

A continuación, puede configurar numberOfLines como un atributo en cualquier UIButton o UIButton subclase como si se tratara de una etiqueta. Lo mismo ocurre con toda una serie de otros valores generalmente inaccesibles, como el radio de la esquina de la capa de una vista o los atributos de la sombra que proyecta.

Respondida el 17/11/2018 a las 07:12
fuente por usuario

votos
0

En Xcode 9.3 se puede hacer mediante el uso del guión gráfico como el de abajo,

introducir descripción de la imagen aquí

Es necesario establecer TextAlignment título botón para centrar

button.titleLabel?.textAlignment = .center

No es necesario para establecer el texto del título con la nueva línea (\ n), como a continuación,

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

Basta con establecer título,

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

Aquí está el resultado,

introducir descripción de la imagen aquí

Respondida el 31/05/2018 a las 03:14
fuente por usuario

votos
0

He incorporado la respuesta de jessecurry dentro STAButton que es parte de mis STAControls biblioteca de código abierto. Actualmente uso dentro de una de las aplicaciones que estoy desarrollando y funciona para mis necesidades. No dude en abrir cuestiones sobre cómo mejorar o enviarlo me tire solicitudes.

Respondida el 05/05/2018 a las 20:27
fuente por usuario

votos
0

4.0 veloz

btn.titleLabel?.lineBreakMode = .byWordWrapping
btn.titleLabel?.textAlignment = .center
btn.setTitle( "Line1\nLine2", for: .normal)
Respondida el 25/03/2018 a las 09:50
fuente por usuario

votos
0

Tira tu propia clase de botón. Es, de lejos, la mejor solución a largo plazo. UIButton y otras clases de UIKit son muy restrictivas en cómo puedes personalizarlas.

Respondida el 10/03/2009 a las 14:16
fuente por usuario

votos
-3

Aunque está bien agregar una subvista a un control, no hay garantía de que funcione, porque es posible que el control no espere que esté allí y, por lo tanto, se comporte mal. Si puede salirse con la suya, simplemente agregue la etiqueta como una vista de hermanos del botón y establezca su marco para que se superponga al botón; siempre y cuando esté configurado para aparecer en la parte superior del botón, nada de lo que pueda hacer el botón lo oscurecerá.

En otras palabras:

[button.superview addSubview:myLabel];
myLabel.center = button.center;
Respondida el 03/03/2009 a las 13:04
fuente por usuario

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