personalizar - ¿Cómo puedo establecer un color de fondo de botón en iPhone?

no puedo salir del acceso guiado

Question

¿Cómo puedo establecer un color de fondo personalizado de un botón?

Interface Builder no parece tener una interfaz para hacer esto.

¿Está solo disponible programáticamente? Si es así, ¿puedes dar un ejemplo, por favor?

Answer 1

¿Puedo entender mal tu pregunta, pero a continuación no funciona para ti?

texto alternativo http://img.skitch.com/20081216-fgi9eew577fncx2k3bbw3yc28d.png

Answer 2

Descubrí que necesitaba usar una imagen estirable para lograr esto. El ejemplo de UICatalog de Apple tiene uno o más botones de colores que se dibujan de esta manera. Podría usar su imagen de plantilla y volver a colorearla para que se ajuste a las necesidades de su botón.

No estoy seguro de hacer esto en Interface Builder, pero pude crear un botón y usar una imagen para su contenido usando el siguiente código:

downloadButton = [[UIButton alloc] initWithFrame:CGRectMake(36, 212, 247, 37)];
downloadButton.contentVerticalAlignment = UIControlContentVerticalAlignmentCenter;
downloadButton.contentHorizontalAlignment = UIControlContentHorizontalAlignmentCenter;
[downloadButton setTitle:NSLocalizedStringFromTable(@"Download", @"Localized", nil) forState:UIControlStateNormal];
[downloadButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
[downloadButton setFont:[UIFont boldSystemFontOfSize:14.0]];
UIImage *newImage = [[UIImage imageNamed:@"greenButton.png"] stretchableImageWithLeftCapWidth:12.0f topCapHeight:0.0f];
[downloadButton setBackgroundImage:newImage forState:UIControlStateNormal];
[downloadButton addTarget:self action:@selector(downloadNewItem) forControlEvents:UIControlEventTouchDown];
downloadButton.backgroundColor = [UIColor clearColor];
[downloadDisplayView addSubview:downloadButton];

Answer 3

Establecer el color de fondo de la vista para un botón de rectitud redondeada no cambiará el color de fondo del botón. Intente hacer que el botón sea un botón personalizado (el primer menú desplegable del inspector) y luego establezca el color de fondo. Obtendrás el efecto deseado :)

Answer 4

Establezca el tipo de botón en "personalizado" en la paleta de atributos de botones. Esto le dará un botón cuadrado con cualquier color que elija para el fondo.

Si desea un botón que se parece más a un botón tradicional, pero tiene un color diferente, necesitará ir a algún tipo de software de edición de imágenes y crearlo (utilizo Photoshop para botones personalizados).

Answer 5

keremk tenía razón cuando dijo que cambiara el color de fondo de ''vista'' cuando hagas clic en el botón y haya entrado en el inspector. Esto cambia las esquinas pequeñas en cualquier color que elijas.

Answer 6

Resolví este problema creando mi propio botón en Fireworks. Dibujé un rectángulo redondeado de aproximadamente el tamaño que quería, con el color de relleno y el color del borde que quería. Recorte el lienzo y guárdelo como PNG. En XCode, agregue el archivo a la carpeta de Recursos. Puede usar un botón personalizado en Interface Builder y especificar la imagen como ese PNG. Cambiará el tamaño según sea necesario, colocará el texto en la parte superior, etc. La curva de las esquinas se puede distorsionar si tiene que cambiar el tamaño del original.

Answer 7

Leí su pregunta para solicitar (como lo hago) una forma programática de establecer el color del botón. Es una omisión flagrante del UIKit, y no pude hacer que el UIGlassButton indocumentado funcione.

He resuelto esto con un solo segmento UISegmentedControl , que te permite configurar el tintColor :

UISegmentedControl * btn = [[UISegmentedControl alloc] initWithItems:[NSArray arrayWithObject:name]];
btn.momentary = YES;
btn.segmentedControlStyle = UISegmentedControlStyleBar;
btn.tintColor = color;
[btn addTarget:self action:@selector(action:) forControlEvents:UIControlEventValueChanged];

Tenga en cuenta que las propiedades momentary y segmentedControlStyle de NSString * sí importan y que se puede usar una imagen en lugar de un nombre NSString * .

Una imagen extensible con tapas finales funciona bien si puede usar un conjunto finito de imágenes enlatadas, ¡pero eso no se ajusta al requisito! P.ej,

buttonImage = [[UIImage imageNamed:@"button.png"] stretchableImageWithLeftCapWidth:26 topCapHeight:16];

Answer 8

Este enlace proporciona una solución elegante a su problema ... http://www.cimgf.com/2010/01/28/fun-with-uibuttons-and-core-animation-layers/

Answer 9

La solución de Tim James (un control segmentado de un solo segmento) funcionó para mí cuando quería un botón simple de "Guardar" con un fondo degradado azul decente. Simplemente creé un control de 2 segmentos en el plumín, configuré el primer segmento como lo quería y luego eliminé programáticamente el segundo segmento en -vistaAparcaré usando [mySegmentedControl removeSegmentAtIndex: 1 animado: NO]. Para mis propósitos, ''Momentáneo'' necesitaba estar activo (marcado) para el primer segmento del Control Segmentado en el plumín y ''Seleccionado'' no estaba activo para ninguno de los segmentos. ''Valor modificado'' es la acción del control segmentado para conectarse.

Answer 10

http://github.com/dermdaly/ButtonMaker

Puede generar una imagen de botón UI usando esta aplicación ... y puede configurarla como imagen de fondo de su botón

Answer 11

Aquí hay una aplicación gratuita que creé y que crea imágenes de UIGlassButton. Establezca el tipo de botón en personalizado. http://itunes.apple.com/us/app/uibutton-builder/id408204223?mt=8

Answer 12

Lo hice de la siguiente manera para crear un botón como el botón de eliminación del sistema como en uitableview

UIButton *h=[[UIButton alloc]init];
[[h layer] setCornerRadius:8.0f];
[[h layer] setMasksToBounds:YES];
[[h layer] setBorderWidth:1.0f];
CAGradientLayer *gradientLayer = [[CAGradientLayer alloc] init];
[gradientLayer setBounds:[h bounds]];
[gradientLayer setPosition:CGPointMake([h bounds].size.width/2, [h bounds].size.height/2)];
[gradientLayer setColors:[NSArray arrayWithObjects:
(id)[[UIColor darkGrayColor]CGColor],(id)[[UIColor blackColor] CGColor], nil]];
[[h layer] insertSublayer:gradientLayer atIndex:0];

libera todos los objetos e importa QuartzCore / QuartzCore.h y agrega este marco a tu proyecto.

Answer 13

Si no desea utilizar imágenes y desea que se vea exactamente como el estilo Rectángulo redondeado, intente esto. Simplemente coloque un UIView sobre el UIButton, con un cuadro idéntico y máscara de cambio de tamaño automático, establezca el alfa en 0.3 y configure el fondo en un color. A continuación, utilice el fragmento siguiente para recortar los bordes redondeados de la vista de superposición de color. Además, desmarque la casilla de verificación ''Interacción del usuario habilitada'' en IB en UIView para permitir que los eventos táctiles entren en cascada al UIButton que se encuentra debajo.

Un efecto secundario es que su texto también se coloreará.

#import <QuartzCore/QuartzCore.h>
colorizeOverlayView.layer.cornerRadius = 10.0f;
colorizeOverlayView.layer.masksToBounds = YES;

Answer 14

Parece que ese color de botón todavía es un problema. La siguiente categoría establece la imagen de fondo de un botón completamente mediante un método de instancia que toma un parámetro UIColor. No es necesario crear archivos de fondo de imagen de botón. Conserva el comportamiento del botón basado en UIControlState. Y mantiene las esquinas redondeadas.

El archivo de encabezado UIButton + ColoredBackground.h

#import <UIKit/UIKit.h>
@interface UIButton (ColoredBackground)
- (void)setBackgroundImageByColor:(UIColor *)backgroundColor forState:(UIControlState)state;
@end

y el contenido de UIButton + ColoredBackground.m

#import "UIButton+ColoredBackground.h"
#import <QuartzCore/QuartzCore.h>
@implementation UIButton (ColoredBackground)
- (void)setBackgroundImageByColor:(UIColor *)backgroundColor forState:(UIControlState)state{
// tcv - temporary colored view
UIView *tcv = [[UIView alloc] initWithFrame:self.frame];
[tcv setBackgroundColor:backgroundColor];
// set up a graphics context of button''s size
CGSize gcSize = tcv.frame.size;
UIGraphicsBeginImageContext(gcSize);
// add tcv''s layer to context
[tcv.layer renderInContext:UIGraphicsGetCurrentContext()];
// create background image now
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
// set image as button''s background image for the given state
[self setBackgroundImage:image forState:state];
UIGraphicsEndImageContext();
// ensure rounded button
self.clipsToBounds = YES;
self.layer.cornerRadius = 8.0;
[tcv release];
}
@end

El nuevo método se llama justed en cada instancia de UIButton como:

[myButton setBackgroundImageByColor:[UIColor greenColor] forState:UIControlStateNormal];

Answer 15

Aquí hay una variación de la solución de @ user200212 (http://.com/a/8547424). Utiliza la clase UIBezierCurve para llenar el botón y dibujar un borde negro de 1px alrededor de él:

UIButton + ColoredBackground.h

// UIButton+ColoredBackground.h
#import <UIKit/UIKit.h>
@interface UIButton (ColoredBackground)
- (void)setBackgroundColor:(UIColor *)backgroundColor forState:(UIControlState)state;
+ (UIColor *) silverColor;
@end

UIButton + ColoredBackground.m

// UIButton+ColoredBackground.m
#import "UIButton+ColoredBackground.h"
#import <QuartzCore/QuartzCore.h>
@implementation UIButton (UIButton_ColoredBackground)
- (void)setBackgroundColor:(UIColor *)backgroundColor forState:(UIControlState)state{
CGSize gcSize = self.bounds.size;
UIGraphicsBeginImageContext(gcSize);
// Create a Bezier Path around the button, and fill it with the background color
UIBezierPath *outsideEdge = [UIBezierPath bezierPathWithRoundedRect:self.bounds cornerRadius:8.0f];
[backgroundColor setFill];
[[UIColor blackColor] setStroke];
outsideEdge.lineWidth = 1.0;
[outsideEdge fill];
[outsideEdge stroke];
// Create the background image
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
// Set image as button''s background image for the given state
[self setBackgroundImage:image forState:state];
// Ensure rounded button
self.clipsToBounds = YES;
self.layer.cornerRadius = 8.0;
}
@end

Uso:

[myButton setBackgroundImageByColor:[UIColor greenColor] forState:UIControlStateNormal];

Answer 16

He modificado un poco la versión del código de @Patch. El problema para mí fue que la versión anterior extendía el radio de la esquina un tanto sucio al cambiar de modo vertical a horizontal. Así que hice que esta versión use stretchableImageWithLeftCapWidth: topCapHeight Method.

#import "UIButton+ColoredBackground.h"
#import <QuartzCore/QuartzCore.h>
#define kCornerRadius 8.0f
#define kStrokeColor [UIColor blackColor]
#define kStrokeWidth 1.0f
@implementation UIButton (ColoredBackground)
- (void)setBackgroundImageByColor:(UIColor *)backgroundColor forState:(UIControlState)state{
CGSize gcSize = CGSizeMake(2*kCornerRadius +1, self.bounds.size.height);
UIGraphicsBeginImageContext(gcSize);
CGContextSetBlendMode(UIGraphicsGetCurrentContext(), kCGBlendModeOverlay);
CGColorSpaceRef rgb = CGColorSpaceCreateDeviceRGB();
UIColor *gradientStart = [UIColor colorWithRed:0.80 green:0.80 blue:0.80 alpha:0.2];
UIColor * gradientEnd = [UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:0.2];
NSArray *colors = [NSArray arrayWithObjects:(id)gradientStart.CGColor, (id)gradientEnd.CGColor, nil];
CGFloat locations[2] = { 0.0f, 1.0f };
CGGradientRef _gradient = CGGradientCreateWithColors(rgb, (__bridge CFArrayRef)colors, locations);
CGColorSpaceRelease(rgb);
CGContextDrawLinearGradient(UIGraphicsGetCurrentContext(), _gradient, CGPointMake(0.0, kStrokeWidth), CGPointMake(0.0, self.bounds.size.height-kStrokeWidth), 0);
UIBezierPath *outsideEdge = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0.0, 0.0, gcSize.width, gcSize.height) cornerRadius:kCornerRadius];
[backgroundColor setFill];
[kStrokeColor setStroke];
outsideEdge.lineWidth = kStrokeWidth;
[outsideEdge stroke];
[outsideEdge fill];
// Create the background image
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
// Set image as button''s background image (stretchable) for the given state
[self setBackgroundImage:[image stretchableImageWithLeftCapWidth:kCornerRadius topCapHeight:0.0] forState:state];
// Ensure rounded button
self.clipsToBounds = YES;
self.layer.cornerRadius = kCornerRadius;
}
@end

El uso no cambió. Se ve más claro ahora en los bordes, y también aded un degradado para hacer más plástico. pero puedes eliminar esto también.

Answer 17

Continuando con @ Denny1989 He resuelto un problema al obtener errores (contexto inválido 0x0) al configurar el botón en viewDidLoad. El botón debe colocarse antes de que tenga un tamaño y, por lo tanto, no se puede depender de él hasta que aparezca la vista. Esta categoría agrega un color para UIControlStateNormal. Si otros estados de control son necesarios para su aplicación, debe agregarlos de manera similar a la categoría.

// UIButton+ColoredBackground.h
#import <UIKit/UIKit.h>
@interface UIButton (ColoredBackground)
@property (nonatomic, retain) UIColor *buttonColorNormal;
@property (nonatomic, retain) NSNumber *madeBackgroundImages;
- (void)setBackgroundColor:(UIColor *)backgroundColor forState:(UIControlState)state;
- (void)drawRect:(CGRect)rect;
- (void)awakeFromNib;
@end

y

// UIButton+ColoredBackground.m
#import "UIButton+ColoredBackground.h"
#import <QuartzCore/QuartzCore.h>
#import <objc/runtime.h>
#define kCornerRadius 8.0f
#define kStrokeColor [UIColor darkGrayColor]
#define kStrokeWidth 1.0f
@implementation UIButton (ColoredBackground)
static char UIB_ButtonColorNormal_KEY;
static char UIB_MadeBackgroundImages_KEY;
@dynamic buttonColorNormal;
-(void)setButtonColorNormal:(NSObject *)buttonColorNormal
{
objc_setAssociatedObject(self, &UIB_ButtonColorNormal_KEY, buttonColorNormal, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
}
-(NSObject*)buttonColorNormal
{
return (NSObject*)objc_getAssociatedObject(self, &UIB_ButtonColorNormal_KEY);
}
@dynamic madeBackgroundImages;
-(void)setMadeBackgroundImages:(NSObject *)madeBackgroundImages
{
objc_setAssociatedObject(self, &UIB_MadeBackgroundImages_KEY, madeBackgroundImages, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
}
-(NSObject*)madeBackgroundImages
{
return (NSObject*)objc_getAssociatedObject(self, &UIB_MadeBackgroundImages_KEY);
}
- (void)awakeFromNib {
[self setMadeBackgroundImages:[NSNumber numberWithBool:FALSE]];
[super awakeFromNib];
}
- (void)drawRect:(CGRect)rect {
// if background images were not created from color do so here
// if self.buttonColorNormal is not set behaves like normal button
if ((self.buttonColorNormal)&&(![[self madeBackgroundImages] boolValue])) {
[self setBackgroundColor:[self buttonColorNormal] forState:UIControlStateNormal];
[self setMadeBackgroundImages:[NSNumber numberWithBool:TRUE]];
}
[super drawRect:rect];
}
- (void)setBackgroundColor:(UIColor *)backgroundColor forState:(UIControlState)state {
gcSize = CGSizeMake(2*kCornerRadius +1, self.bounds.size.height);
UIGraphicsBeginImageContext(gcSize);
CGColorSpaceRef rgb = CGColorSpaceCreateDeviceRGB();
UIColor *gradientStart = [UIColor colorWithRed:0.80 green:0.80 blue:0.80 alpha:0.2];
UIColor * gradientEnd = [UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:0.5];
NSArray *colors = [NSArray arrayWithObjects:(id)gradientStart.CGColor, (id)gradientEnd.CGColor, nil];
CGFloat locations[2] = { 0.0f, 1.0f };
CGGradientRef _gradient = CGGradientCreateWithColors(rgb, (__bridge CFArrayRef)colors, locations);
CGColorSpaceRelease(rgb);
CGContextSetBlendMode(UIGraphicsGetCurrentContext(), kCGBlendModeOverlay);
CGContextDrawLinearGradient(UIGraphicsGetCurrentContext(), _gradient, CGPointMake(0.0, kStrokeWidth), CGPointMake(0.0, self.bounds.size.height-kStrokeWidth), 0);
UIBezierPath *outsideEdge = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0.0, 0.0, gcSize.width, gcSize.height) cornerRadius:kCornerRadius];
[backgroundColor setFill];
[kStrokeColor setStroke];
outsideEdge.lineWidth = kStrokeWidth;
[outsideEdge stroke];
[outsideEdge fill];
CFRelease(_gradient);
// Create the background image
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
// Set image as button''s background image (stretchable) for the given state
[self setBackgroundImage:[image stretchableImageWithLeftCapWidth:kCornerRadius topCapHeight:0.0] forState:state];
// Ensure rounded button
self.clipsToBounds = YES;
self.layer.cornerRadius = kCornerRadius;
// add colored border
self.layer.borderColor = kStrokeColor.CGColor;
self.layer.borderWidth = kStrokeWidth;
}
@end

uso

- (void)viewDidLoad
{
[myButton setButtonColorNormal:[UIColor redColor]];
}

Asegúrese de que el tipo de botón personalizado o drawRect no se invoque.

Answer 18

Entonces, encontré una solución increíblemente simple usando categorías. (¡Tan simple que creo que debo estar haciendo algo raro, pero no lo veo!)

Defina una categoría (si no sabe qué es eso, en resumen: es una forma de "extender" una clase mínimamente, es decir, agregar métodos a una clase pero sin propiedades) para UIButton, y crear un método " setBackgroundColor "que llama al método UButton''s superclase ''(UIControl) setBackgroundColor.

@implementation UIButton (coloredBackgroundButton)
-(void)setBackgroundColor:(UIColor *)backgroundColor {
[super setBackgroundColor:backgroundColor];
}

Dondequiera que use UIButtons, siempre que importe el archivo de encabezado en el que se declara esta categoría, en este caso,

#import "coloredBackgroundButton.h" 

puedes llamar a setBackgroundColor en ellos.

Answer 19

Para mantener el botón redondeado, ¿qué pasa con el uso

view.layer.cornerRadius = 8;

descrito aquí

¿Cómo creo un UILabel acorralado redondo en el iPhone?