Fondo del botón personalizado de Interface Builder (iPhone dev) La imagen no respeta la configuración de Estiramiento

Question

Estoy intentando crear un botón personalizado usando una imagen de fondo en el Interface Builder. La imagen tiene partes estirables y no estirables para que se pueda cambiar el tamaño.

IB expone las propiedades de Estiramiento para permitir esto, sin embargo, ningún valor que agregue afectará la forma en que aparece el botón. Siempre está completamente extendido para llenar el tamaño del marco.

¿Es esta una característica no admitida en IB o en UIButton quizás?

http://img.skitch.com/20100103-rjabkq2c2jkqynw47crxepdtwb.jpg

(Nota: Los valores de estiramiento antes mencionados no son los que van a trabajar con la imagen correctamente, pero sólo los valores que me estaba metiendo con en el momento de la captura de pantalla)

Answer 1

En el ejemplo Comenzando en iPhone 3 Desarrollo sólo se usan los UIImage leftCapWidth y topCapHeight, y se crea la imagen/establecer mediante programación, por lo que es un método alternativo si contentStretch no está funcionando.

Answer 2

En los casos en que desea que se estire más de un píxel (es decir, un patrón en el centro del botón), el UIImage estirable no funciona.

El contenido de UIButton tampoco funciona correctamente.

Cómo lo resolví: subclase UIButton y agregué un UIImageView *backgroundImageView como propiedad y lo coloqué en el índice 0 como una subvista dentro del UIButton. Luego aseguro en layoutSubviews que encaja completamente en el botón y establece los estados resaltados de imageView. Todo lo que necesita hacer es entregar un UIImageView con el contentStretch y contentMode correctos aplicados.

archivo .h

@interface ButtonWithBackgroundImage : UIButton { 
    UIImageView *backgroundImageView; 
} 
@property (retain) UIImageView *backgroundImageView; 
+ (ButtonWithBackgroundImage*)button; 
@end 

archivo .m

@implementation ButtonWithBackgroundImage 
@synthesize backgroundImageView; 

+ (ButtonWithBackgroundImage*)button { 
return [self buttonWithType:UIButtonTypeCustom]; 
} 
- (void)setBackgroundImageView:(UIImageView*)img { 
    [backgroundImageView removeFromSuperview]; 
    [backgroundImageView release]; 

    backgroundImageView = [img retain]; 

    if(backgroundImageView){ 
     [self insertSubview:backgroundImageView atIndex:0]; 
     [self setNeedsLayout]; 
    } 
} 

- (void)setSelected:(BOOL)select { 
    [super setSelected:select]; 
    // we subclass the setSelect method to highlight the background imageview 
[backgroundImageView setHighlighted:select||self.highlighted]; 
} 
- (void)setHighlighted:(BOOL)highl { 
    [super setHighlighted:highl]; 

    // we subclass the setHighlighted method to highlight the background imageview  
    [backgroundImageView setHighlighted:highl||self.selected]; 
} 

- (void)layoutSubviews { 
    [super layoutSubviews]; 

    self.backgroundImageView.frame = self.bounds; 
} 

- (void)dealloc { 
    [backgroundImageView release]; 
    backgroundImageView = nil; 
    [super dealloc]; 
} 
@end 

Answer 3

lo tengo trabajando !!! Los valores mágicos para mí son 0.2 y 0.2.

Mi imagen es una caja dentro de una caja, ambas con esquinas redondeadas.

Cuando es 0,2 y 0,8, deja la parte superior de la imagen sin estirar, pero la parte inferior se estira y distorsiona.

Supongo que el primer 0.2 es el desplazamiento que significa cuánto no estirar, y el segundo es probablemente cuánto estirar. Al menos, 0.2 y 0.6 también funcionan.

En principio, puede hacer un experimento: tomar una imagen de un enrejado o círculos concéntricos o un degradado de color y estirarlo. Si lo hace, publique la imagen :).

Answer 4

La imagen de fondo del botón siempre se redimensionará para llenar el cuadro; la imagen de primer plano no cambiará de tamaño (si no hay texto, está centrada). La lógica del estiramiento es que cambia el tamaño del medio dejando intactos los bordes; por ejemplo, para un rectángulo redondeado, esto significa que las esquinas redondeadas no se distorsionarán.

Answer 5

Utilice la función de Xcode rebanar para especificar las dimensiones de un área central de tamaño variable de la imagen y especificar opcionalmente tapas de los extremos, que son áreas de la imagen que no debe ser llenado por el área de tamaño variable. Ver About Asset Catalogs