Reproducción automática: el tamaño intrínseco de UIButton no incluye inserciones de título

Si tengo un UIButton arreglado usando autolayout, su tamaño se ajusta muy bien para adaptarse a su contenido.

Si configuro una imagen como button.image, el tamaño intrínseco nuevamente parece explicar esto.

Sin embargo, si modifico el titleEdgeInsetsbotón, el diseño no tiene en cuenta esto y en su lugar trunca el título del botón.

¿Cómo puedo asegurarme de que el ancho intrínseco del botón tenga en cuenta el recuadro?

Editar:

Estoy usando lo siguiente:

[self.backButton setTitleEdgeInsets:UIEdgeInsetsMake(0, 5, 0, 0)];

El objetivo es agregar cierta separación entre la imagen y el texto.

Puede resolver esto sin tener que anular ningún método o establecer una restricción de ancho arbitraria. Puede hacerlo todo en Interface Builder de la siguiente manera.

• El ancho del botón intrínseco se deriva del ancho del título más el ancho del icono más las inserciones de los bordes de contenido izquierdo y derecho .

• Si un botón tiene una imagen y un texto, están centrados como un grupo, sin relleno entre ellos.

• Si agrega un contenido de contenido izquierdo, se calcula en relación con el texto, no con el icono de texto +.

• Si establece un recuadro negativo en la imagen izquierda, la imagen se extrae hacia la izquierda pero el ancho general del botón no se ve afectado.

• Si establece un recuadro negativo en la imagen izquierda, el diseño real usa la mitad de ese valor. Entonces, para obtener un recuadro izquierdo de -20 puntos, debe usar un valor de recuadro izquierdo de -40 puntos en Interface Builder.

Por lo tanto, proporciona una inserción de contenido izquierda lo suficientemente grande como para crear espacio para la inserción izquierda deseada y el relleno interno entre el icono y el texto, y luego desplaza el icono a la izquierda duplicando la cantidad de relleno que desea entre el icono y el texto. El resultado es un botón con insertos de contenido iguales a la izquierda y a la derecha, y un par de texto e íconos que se centran como un grupo, con una cantidad específica de relleno entre ellos.

Algunos valores de ejemplo:

// Produces a button with the layout:
// |-20-icon-10-text-20-|
// AutoLayout intrinsic width works as you'd desire.
button.contentEdgeInsets = UIEdgeInsetsMake(10, 30, 10, 20)
button.imageEdgeInsets = UIEdgeInsetsMake(0, -20, 0, 0)

Puede hacer que esto funcione en Interface Builder (sin escribir ningún código), mediante el uso de una combinación de títulos y contenidos negativos y positivos.

Actualización : Xcode 7 tiene un error en el que no puede ingresar valores negativos en el Rightcampo Insertar, pero puede usar el control paso a paso al lado para disminuir el valor. (Gracias Stuart)

Hacer esto agregará 8 puntos de espacio entre la imagen y el título y aumentará el ancho intrínseco del botón en la misma cantidad. Me gusta esto:

¿Por qué no anular el intrinsicContentSizemétodo en UIView? Por ejemplo:

- (CGSize) intrinsicContentSize
{
    CGSize s = [super intrinsicContentSize];

    return CGSizeMake(s.width + self.titleEdgeInsets.left + self.titleEdgeInsets.right,
                      s.height + self.titleEdgeInsets.top + self.titleEdgeInsets.bottom);
}

Esto debería indicarle al sistema de distribución automática que debería aumentar el tamaño del botón para permitir las inserciones y mostrar el texto completo. No estoy en mi propia computadora, así que no he probado esto.

No ha especificado cómo está configurando las inserciones, por lo que supongo que está usando titleEdgeInsets porque veo el mismo efecto que está obteniendo. Si uso contentEdgeInsets en su lugar, funciona correctamente.

- (IBAction)ChangeTitle:(UIButton *)sender {
    self.button.contentEdgeInsets = UIEdgeInsetsMake(0,20,0,20);
    [self.button setTitle:@"Long Long Title" forState:UIControlStateNormal];
}

Y para Swift trabajó esto:

extension UIButton {
    override open var intrinsicContentSize: CGSize {
        let intrinsicContentSize = super.intrinsicContentSize

        let adjustedWidth = intrinsicContentSize.width + titleEdgeInsets.left + titleEdgeInsets.right
        let adjustedHeight = intrinsicContentSize.height + titleEdgeInsets.top + titleEdgeInsets.bottom

        return CGSize(width: adjustedWidth, height: adjustedHeight)
    }
}

Love U Swift

Este hilo es un poco viejo, pero me encontré con esto y pude resolverlo usando un recuadro negativo. Por ejemplo, sustituya los valores de relleno deseados aquí:

UIButton* myButton = [[UIButton alloc] init];
// setup some autolayout constraints here
myButton.titleEdgeInsets = UIEdgeInsetsMake(-desiredBottomPadding,
                                            -desiredRightPadding,
                                            -desiredTopPadding,
                                            -desiredLeftPadding);

¡Combinado con las restricciones correctas de auto-distribución, terminas con un botón de redimensionamiento automático que contiene una imagen y texto! Visto a continuación con el desiredLeftPaddingconjunto a 10.

Puede ver que el marco real del botón no abarca la etiqueta (ya que la etiqueta se desplaza 10 puntos a la derecha, fuera de los límites), pero hemos logrado 10 puntos de relleno entre el texto y la imagen.

Para Swift 3 basado en la respuesta de pegpeg :

extension UIButton {

    override open var intrinsicContentSize: CGSize {

        let intrinsicContentSize = super.intrinsicContentSize

        let adjustedWidth = intrinsicContentSize.width + titleEdgeInsets.left + titleEdgeInsets.right
        let adjustedHeight = intrinsicContentSize.height + titleEdgeInsets.top + titleEdgeInsets.bottom

        return CGSize(width: adjustedWidth, height: adjustedHeight)

    }

}

Todo lo anterior no funcionó para iOS 9+ , lo que hice es:

• Agregue una restricción de ancho (para un ancho mínimo cuando el botón no tiene texto. El botón se escalará automáticamente si se proporciona texto)
• establecer la relación a mayor que o igual

Ahora para agregar un borde alrededor del botón solo use el método:

button.contentEdgeInsets = UIEdgeInsetsMake(0,20,0,20);

Quería agregar un espacio de 5 puntos entre mi ícono UIButton y la etiqueta. Así es como lo logré:

UIButton *infoButton = [UIButton buttonWithType:UIButtonTypeCustom];
// more button config etc
infoButton.contentEdgeInsets = UIEdgeInsetsMake(0, 0, 0, 5);
infoButton.titleEdgeInsets = UIEdgeInsetsMake(0, 5, 0, -5);

La forma en que contentEdgeInsets, titleEdgeInsets e imageEdgeInsets se relacionan entre sí requiere un poco de toma y daca de cada inserción. Entonces, si agrega algunas inserciones a la izquierda del título, debe agregar una inserción negativa a la derecha y proporcionar más espacio (a través de una inserción positiva) en el contenido a la derecha.

Al agregar un recuadro de contenido adecuado para que coincida con el cambio de las inserciones de título, mi texto no sale de los límites del botón.

La opción también está disponible en el generador de interfaces. Ver el recuadro. Puse izquierda y derecha en 3. Funciona como un encanto.

La solución que uso es agregar una restricción de ancho en el botón. Luego, en algún lugar de la inicialización, después de configurar el texto, actualice la restricción de ancho de esta manera:

self.buttonWidthConstraint.constant = self.shareButton.intrinsicContentSize.width + 8;

Donde 8 es cualquiera que sea tu inserción.

llamar a sizeToFit () se asegura de que contentEdgeInset tenga efecto

extension UIButton {

   open override func draw(_ rect: CGRect) { 
       self.contentEdgeInsets = UIEdgeInsets(top: 10, left: 40, bottom: 10, right: 40)
       self.sizeToFit()
   }
}