ios - buttons - create view programmatically swift 4

Autolayout: el tamaño intrínseco de UIButton no incluye los títulos del título

Question

Si tengo un UIButton dispuesto usando el autolayout, su tamaño se ajusta muy bien para ajustarse a su contenido.

Si configuro una imagen como button.image , el tamaño intrínseco parece dar cuenta de esto.

Sin embargo, si titleEdgeInsets del botó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 representa el recuadro?

Editar:

Estoy usando lo siguiente:

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

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

Answer 1

¿Por qué no reemplazar el método intrinsicContentSize 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 decirle al sistema de autodiseño 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.

Answer 2

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

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

¡En combinación con las restricciones de autodiseño correctas, terminas con un botón de cambio de tamaño automático que contiene una imagen y texto! A continuación, se desiredLeftPadding establecido en 10.

Botón con imagen y texto corto

Botón con imagen y texto largo

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

Answer 3

La opción también está disponible en el constructor de interfaz. Ver el recuadro. Ajusté a la izquierda y derecha a 3. Funciona como un amuleto.

Answer 4

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 la siguiente manera:

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

Donde 8 es el inserto que sea.

Answer 5

No ha especificado cómo está configurando las inserciones, así que supongo que está usando titleEdgeInsets porque veo el mismo efecto que está obteniendo. Si utilizo 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];
}

Answer 6

Para Swift 3 según la respuesta de :

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)

    }

}

Answer 7

Puede hacer que esto funcione en Interface Builder (sin escribir ningún código), mediante el uso de una combinación de Ingreso de Título y Contenido negativo y positivo.

Actualización : Xcode 7 tiene un error en el que no puede ingresar valores negativos en el campo de recuadro Right , pero puede usar el control de pasos junto a él 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:

Answer 8

Puede resolver esto sin tener que anular ningún método ni 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 ícono más los márgenes 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 recuadro de contenido izquierdo, se calcula en relación con el texto, no con el ícono de texto +.

• Si configura un recuadro negativo de la imagen de la izquierda, la imagen se desplazará hacia la izquierda, pero el ancho total del botón no se verá afectado.

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

Por lo tanto, proporciona un recuadro de contenido izquierdo lo suficientemente grande como para crear espacio para el recuadro izquierdo deseado y el relleno interno entre el icono y el texto, y luego desplace el icono al duplicar la cantidad de relleno que desea entre el icono y el texto. El resultado es un botón con la misma cantidad de insertos de contenido izquierdo y derecho, y un par de iconos y texto 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)

Answer 9

Quería agregar un espacio de 5 pt entre mi icono 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 y imageEdgeInsets se relacionan entre sí requiere un pequeño intercambio de información de cada recuadro. Entonces, si agrega algunas inserciones a la izquierda del título, debe agregar un recuadro negativo a la derecha y proporcionar más espacio (a través de un recuadro positivo) en el contenido de la derecha.

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

Answer 10

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

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

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

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

Answer 11

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