iOS: cambio de tamaño de UIButton según la longitud del texto

En el creador de interfaces, al mantener presionado Command+ se =cambiará el tamaño de un botón para que se ajuste a su texto. Me preguntaba si esto era posible hacerlo mediante programación antes de agregar el botón a la vista.

UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button.titleLabel setFont:[UIFont fontWithName:@"Arial-BoldMT" size:12]];
[button addTarget:self action:@selector(buttonTapped:) forControlEvents:UIControlEventTouchUpInside];
// I need to know the width needed to accomodate NSStringVariable
[button setTitle:NSStringVariable forState:UIControlStateNormal]; 
// So that I can set the width property of the button before addSubview
[button setFrame:CGRectMake(10, 0, width, fixedHeight)];
[subNavigation addSubview:button];

En Xcode 4.5 y versiones posteriores, esto ahora se puede hacer usando ' Diseño automático / Restricciones '.

Las principales ventajas son que:

1. ¡No necesita establecer marcos mediante programación!
2. Si se hace correctamente, no necesita preocuparse por restablecer marcos para cambios de orientación.
3. Además, los cambios en el dispositivo no tienen por qué molestarte (lee, no es necesario codificar por separado para diferentes tamaños de pantalla).

Algunas desventajas:

1. No es compatible con versiones anteriores: funciona solo para iOS 6 y superior.
2. Necesita familiarizarse (pero ahorrará tiempo más adelante).

Lo mejor es que podemos centrarnos en declarar una intención como:

• Quiero que estos dos botones sean del mismo ancho; o
• Necesito que esta vista esté centrada verticalmente y se extienda a un máximo de 10 puntos desde el borde de la supervista; o incluso,
• ¡Quiero que este botón / etiqueta cambie de tamaño de acuerdo con la etiqueta que está mostrando!

Aquí hay un tutorial simple para iniciarse en el diseño automático.

Para más detalles .

Al principio lleva algo de tiempo, pero parece que valdrá la pena el esfuerzo.

En UIKit, hay adiciones a la clase NSString para obtener de un objeto NSString dado el tamaño que tomará cuando se represente en una fuente determinada.

Docs estuvo aquí . Ahora está aquí en desuso.

En resumen, si vas:

CGSize stringsize = [myString sizeWithFont:[UIFont systemFontOfSize:14]]; 
//or whatever font you're using
[button setFrame:CGRectMake(10,0,stringsize.width, stringsize.height)];

... habrá configurado el marco del botón a la altura y el ancho de la cadena que está renderizando.

Probablemente quiera experimentar con un poco de espacio de búfer alrededor de ese CGSize, pero comenzará en el lugar correcto.

La forma de hacer esto en código es:

[button sizeToFit];

Si está subclasificando y desea agregar reglas adicionales, puede anular:

- (CGSize)sizeThatFits:(CGSize)size;

Si su botón se creó con Interface Builder y está cambiando el título del código, puede hacer esto:

[self.button setTitle:@"Button Title" forState:UIControlStateNormal];
[self.button sizeToFit];

Rápido:

Lo importante aquí es cuándo llamarás al .sizeToFit(), debe ser después de configurar el texto para que se muestre para que pueda leer el tamaño necesario, si luego actualizas el texto, vuelve a llamarlo.

var button = UIButton()
button.setTitle("Length of this text determines size", forState: UIControlState.Normal)
button.sizeToFit()
self.view.addSubview(button)

Para lograr esto usando autolayout, intente establecer una restricción de ancho variable:

También es posible que necesite ajustar su Content Hugging Priorityy Content Compression Resistance Priorityobtener los resultados que necesita.

UILabel es completamente automático :

Este UILabel simplemente está configurado para centrarse en la pantalla (solo dos restricciones, horizontal / vertical):

Cambia los anchos de forma totalmente automática:

No es necesario establecer ningún ancho o alto, es totalmente automático.

Observe que los pequeños cuadrados amarillos simplemente se unen ("espaciado" de cero). Se mueven automáticamente a medida que UILabel cambia de tamaño.

Agregar una restricción "> =" establece un ancho mínimo para UILabel:

Si desea cambiar el tamaño del texto en lugar del botón, puede usar ...

button.titleLabel.adjustsFontSizeToFitWidth = YES;
button.titleLabel.minimumScaleFactor = .5;
// The .5 value means that I will let it go down to half the original font size 
// before the texts gets truncated

// note, if using anything pre ios6, you would use I think
button.titleLabel.minimumFontSize = 8;

sizeToFit no funciona correctamente. en lugar:

myButton.size = myButton.sizeThatFits(CGSize.zero)

También puedes agregar contentInsetal botón:

myButton.contentEdgeInsets = UIEdgeInsetsMake(8, 8, 4, 8)

Simplemente:

1. Cree UIViewcomo envoltorio con diseño automático para vistas alrededor.
2. Poner UILabel dentro de esa envoltura. Agregue restricciones que peguen su etiqueta a los bordes del contenedor.
3. Colóquelo UIButtondentro de su contenedor, luego simplemente agregue las mismas restricciones que lo hizo para UILabel.
4. Disfruta de tu botón autosized junto con el texto.

Swift 4.2

Gracias a Dios, esto está resuelto. Después de configurar un texto para el botón, puede recuperar intrinsicContentSize, que es el tamaño natural de una UIView (el documento oficial está aquí ). Para UIButton, puede usarlo como a continuación.

button.intrinsicContentSize.width

Para su información, ajusté el ancho para que se vea correctamente.

button.frame = CGRect(fx: xOffset, y: 0.0, width: button.intrinsicContentSize.width + 18, height: 40)

Simulador

Botones UIB con intrinsicContentSize

Fuente: https://riptutorial.com/ios/example/16418/get-uibutton-s-size-strictly-based-on-its-text-and-font

Tengo algunas necesidades adicionales relacionadas con esta publicación que sizeToFitno resuelve. Necesitaba mantener el botón centrado en su ubicación original, independientemente del texto. Tampoco quiero que el botón sea más grande que su tamaño original.

Entonces, diseño el botón para su tamaño máximo, guardo ese tamaño en el Controlador y uso el siguiente método para cambiar el tamaño del botón cuando cambia el texto:

+ (void) sizeButtonToText:(UIButton *)button availableSize:(CGSize)availableSize padding:(UIEdgeInsets)padding {    

     CGRect boundsForText = button.frame;

    // Measures string
    CGSize stringSize = [button.titleLabel.text sizeWithFont:button.titleLabel.font];
    stringSize.width = MIN(stringSize.width + padding.left + padding.right, availableSize.width);

    // Center's location of button
    boundsForText.origin.x += (boundsForText.size.width - stringSize.width) / 2;
    boundsForText.size.width = stringSize.width;
    [button setFrame:boundsForText];
 }

Esta clase de botón con altura de tamaño automático para texto (para Xamarin pero se puede reescribir para otro idioma)

[Register(nameof(ResizableButton))]
public class ResizableButton : UIButton
{
    NSLayoutConstraint _heightConstraint;
    public bool NeedsUpdateHeightConstraint { get; private set; } = true;

    public ResizableButton(){}

    public ResizableButton(UIButtonType type) : base(type){}

    public ResizableButton(NSCoder coder) : base(coder){}

    public ResizableButton(CGRect frame) : base(frame){}

    protected ResizableButton(NSObjectFlag t) : base(t){}

    protected internal ResizableButton(IntPtr handle) : base(handle){}

    public override void LayoutSubviews()
    {
        base.LayoutSubviews();
        UpdateHeightConstraint();
        InvalidateIntrinsicContentSize();
    }

    public override void SetTitle(string title, UIControlState forState)
    {
        NeedsUpdateHeightConstraint = true;
        base.SetTitle(title, forState);
    }

    private void UpdateHeightConstraint()
    {
        if (!NeedsUpdateHeightConstraint)
            return;
        NeedsUpdateHeightConstraint = false;
        var labelSize = TitleLabel.SizeThatFits(new CGSize(Frame.Width - TitleEdgeInsets.Left - TitleEdgeInsets.Right, float.MaxValue));

        var rect = new CGRect(Frame.X, Frame.Y, Frame.Width, labelSize.Height + TitleEdgeInsets.Top + TitleEdgeInsets.Bottom);

        if (_heightConstraint != null)
            RemoveConstraint(_heightConstraint);

        _heightConstraint = NSLayoutConstraint.Create(this, NSLayoutAttribute.Height, NSLayoutRelation.Equal, 1, rect.Height);
        AddConstraint(_heightConstraint);
    }

     public override CGSize IntrinsicContentSize
     {
         get
         {
             var labelSize = TitleLabel.SizeThatFits(new CGSize(Frame.Width - TitleEdgeInsets.Left - TitleEdgeInsets.Right, float.MaxValue));
             return new CGSize(Frame.Width, labelSize.Height + TitleEdgeInsets.Top + TitleEdgeInsets.Bottom);
         }
     }
}

Por alguna razón, func sizeToFit()no funciona para mí. Mi configuración es que estoy usando un botón dentro de UITableViewCellay estoy usando el diseño automático.

Lo que funcionó para mí es:

1. obtener la restricción de ancho
2. obtenga el intrinsicContentSizeancho porque de acuerdo con este documento, el diseño automático no conoce el intrinsicContentSize. Establecer la restricción de intrinsicContentSizeancho al ancho

Aquí hay dos títulos de Debug View Hierachry

Para ser sincero, creo que es realmente una pena que no haya una casilla de verificación simple en el guión gráfico para decir que desea cambiar el tamaño de los botones para acomodar el texto. Bueno lo que sea.

Aquí está la solución más simple usando storyboard.

1. Coloque UIView y ponga restricciones para ello. Ejemplo:

2. Coloque UILabel dentro de UIView. Establezca restricciones para adjuntarlo a los bordes de UIView.

3. Coloque su UIButton dentro de UIView. Establezca las mismas restricciones para adjuntarlo a los bordes de UIView.

4. Establezca 0 para el número de líneas de UILabel.

5. Configurar los puntos de venta.

    @IBOutlet var button: UIButton!
    @IBOutlet var textOnTheButton: UILabel!

6. Consigue un título largo, largo, largo.

    let someTitle = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

7. En viewDidLoad establezca el título tanto para UILabel como para UIButton.

    override func viewDidLoad() {
        super.viewDidLoad()
        textOnTheButton.text = someTitle
        button.setTitle(someTitle, for: .normal)
        button.titleLabel?.numberOfLines = 0
    }

8. Ejecútelo para asegurarse de que el botón cambia de tamaño y se puede presionar.