¿Cómo puedo crear un UIButton grande y rojo con el SDK de iPhone?

Question

Con el SDK de iPhone, ¿cómo podría crear un botón rojo "eliminar" similar al que se usa al eliminar contactos en el iPhone?

Answer 1

Lo que empieza con una imagen estirable:

alt text http://grab.by/4lP

luego de hacer un botón con la imagen estirada como fondo y aplicar texto.

UIButton *sampleButton = [UIButton buttonWithType:UIButtonTypeCustom]; 
[sampleButton setFrame:CGRectMake(kLeftMargin, 10, self.view.bounds.size.width - kLeftMargin - kRightMargin, 52)]; 
[sampleButton setTitle:@"Button Title" forState:UIControlStateNormal]; 
[sampleButton setFont:[UIFont boldSystemFontOfSize:20]]; 
[sampleButton setBackgroundImage:[[UIImage imageNamed:@"redButton.png"] stretchableImageWithLeftCapWidth:10.0 topCapHeight:0.0] forState:UIControlStateNormal]; 
[sampleButton addTarget:self action:@selector(buttonPressed) forControlEvents:UIControlEventTouchUpInside]; 
[self.view addSubview:sampleButton]; 

Obviamente, tendrá que ajustar el origen del marco y el tamaño para adaptarse a su aplicación, así como el blanco, el selector, y el título.

Answer 2

Puede crear una sección separada en la vista de tabla agrupada, otorgar a esa sección solo una fila y establecer la imagen de fondo de esa celda en una imagen de degradado roja. Sin embargo, tendrás que recrear esa imagen por tu cuenta.

Answer 3

Probablemente la forma más sencilla de hacerlo es enganchar this iPhone GUI Photoshop file que contiene muchos elementos de UI en capas de PSD, luego cambie el tinte del botón grande en Photoshop y guárdelo como PNG.

Una ventaja de hacerlo de esta manera es que también puede crear versiones para el botón seleccionado y/o resaltar el estado y asignar las imágenes a un UIButton estándar.

Answer 4

He hecho esto, recientemente, también, y la creación de este botón para ello (and some Monotouch example code para cualquier monotouchers):

alt text http://www.yetanotherchris.me/storage/downloads/uiglassbutton-template.png

Tiene menos de un bisel que funciona mejor en cualquier fondo, pero doesn' t coincide con el iPhone UIGlassButton exactamente.

Answer 5

Creo que esas son las mejores (y que se ven bien en la pantalla de la retina también):

.png generarse de este muy buen archivo .psd: http://www.teehanlax.com/blog/2010/08/12/iphone-4-gui-psd-retina-display/

Y luego úselo como una imagen stretchable para el fondo de su UIButton:

 
UIImage* greenButton = [UIImage imageNamed:@"UIButton_green.png"]; 
UIImage *newImage = [greenButton stretchableImageWithLeftCapWidth:greenButton.size.width/2 topCapHeight:greenButton.size.height/2]; 
[callButton setBackgroundImage:newImage forState:UIControlStateNormal]; 

Answer 6

Para facilitar cualquier color, he creado mi propio renderizado para UIButton que le permite establecer un tinte personalizado.

Para los interesados, que se puede encontrar en GitHub en

https://github.com/appsinyourpants/Pants-Framework/blob/master/Classes/Views/PFTintedButton.m

Answer 7

He añadido algunas imágenes de los botones disponibles libremente bajo la licencia MIT a mi sitio, que responden a más de cerca los botones de cristal IOS. (Pero este foro no me deja publicar imágenes de b/c soy nuevo)

Para descargar ellos y por código de ejemplo, ver:

http://www.geneticmistakes.com/articles/1000/stretchable-dynamic-images-for-buttons

Answer 8

También he hecho algunos botones. ..retina y versiones que no son de retina

Si desea utilizarlos en una celda sólo tiene que utilizar el siguiente código en cellForRowAtIndexPath:

UIButton *sampleButton = [UIButton buttonWithType:UIButtonTypeCustom]; 
[sampleButton setFrame:[cell.contentView frame]]; 
[sampleButton setFrame:CGRectMake(0, 0, cell.bounds.size.width-20, 44)]; 
[sampleButton setBackgroundImage:[UIImage imageNamed:@"button_red.png"] forState:UIControlStateNormal]; 
[cell addSubview:sampleButton]; 

Answer 9

Me gustaría aportar una solución que no utilice imágenes pero que tenga el mismo aspecto que el botón 'eliminar' en Contactos. En el siguiente ejemplo usaré una UITableView con agrupada, celdas estáticas, diseñadas en guiones gráficos. Haga que una de las secciones tenga solo una celda. Esa celda será el botón 'eliminar'. Proporcione a la celda un color de fondo rojo (por ejemplo, Rojo 221, Verde 0, Azul 2)

Lo que haremos es agregar dos GradientLayers a la celda. El primero cubrirá la mitad superior de la celda. El segundo cubrirá la mitad inferior.

Añadir QuartzCore a su archivo de aplicación:

#import <QuartzCore/QuartzCore.h> 

de inicio con la fabricación de una salida a esta celda:

@property (strong, nonatomic) IBOutlet UITableViewCell *cellDelete; 

crear un método en el que se dará formato de la celda:

- (void)formatCellDelete 
{ 
    // Top Gradient // 
    CAGradientLayer *gradientTop = [CAGradientLayer layer]; 

    // Make a frame for the layer based on the size of the cells contentView 
    // Make it half the height 
    // The width will be -20 so the gradient will not overflow 
    CGRect frame = CGRectMake(0, 0, _cellDelete.contentView.frame.size.width - 20, _cellDelete.contentView.frame.size.height/2); 
    gradientTop.frame = frame; 

    gradientTop.cornerRadius = 8; 

    UIColor* topColor = [UIColor colorWithWhite:1.0f alpha:0.75f]; 
    UIColor* bottomColor = [UIColor colorWithWhite:1.0f alpha:0.0f]; 
    gradientTop.colors = [NSArray arrayWithObjects:(id)[topColor CGColor], (id)[bottomColor CGColor], nil]; 

    [_cellDelete.contentView.layer setMasksToBounds:YES]; 
    [_cellDelete.contentView.layer insertSublayer:gradientTop atIndex:0]; 



    // Bottom Gradient // 
    CAGradientLayer *gradientBottom = [CAGradientLayer layer]; 

    // Make a frame for the layer based on the size of the cells contentView 
    // Make it half the height 
    // The width will be -20 so the gradient will not overflow 
    frame = CGRectMake(0, 0, _cellDelete.contentView.frame.size.width - 20, _cellDelete.contentView.frame.size.height/2); 
    // And move to bottom 
    frame.origin.y = frame.size.height; 
    gradientBottom.frame = frame; 

    topColor = [UIColor colorWithWhite:0.0f alpha:0.05f]; //0.20 
    bottomColor = [UIColor colorWithWhite:0.0f alpha:0.0f]; 
    gradientBottom.colors = [NSArray arrayWithObjects:(id)[topColor CGColor], (id)[bottomColor CGColor], nil]; 

    [_cellDelete.contentView.layer setMasksToBounds:YES]; 
    [_cellDelete.contentView.layer insertSublayer:gradientBottom atIndex:0]; 


    // Define a selected-backgroundColor so the cell changes color when the user tabs it 
    UIView *bgColorView = [[UIView alloc] init]; 
    [bgColorView setBackgroundColor:[UIColor colorWithRed:(float)(0.502) green:0.0 blue:0.0 alpha:1.000]]; 
    bgColorView.layer.cornerRadius = 10; 
    [_cellDelete setSelectedBackgroundView:bgColorView]; 
} 

Lo anterior le dará a su celda el aspecto del cristal como el botón 'eliminar' en Contactos. Pero también queremos que cambie de color cuando el usuario lo toque. Esto es lo que hará la última pieza de código en el método anterior. Establecerá una vista diferente con un color más oscuro como selectedBackgroundView.

Después de tocar la celda, permanecerá seleccionada y mantendrá su color oscuro. Para anular la selección automática de la célula hacemos lo siguiente:

de inicio con una constante que define la sección nr de la celda de borrado:

static NSInteger const SECTION_DELETE = 1; 

Ahora implementar el método (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath (definido en UITableViewDelegate):

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath 
{ 

    if(indexPath.section == SECTION_DELETE){ 

     [tableView deselectRowAtIndexPath:indexPath animated:YES]; 
    } 


    // Navigation logic may go here. Create and push another view controller. 
    /* 
     *detailViewController = [[ alloc] initWithNibName:@"" bundle:nil]; 
    // ... 
    // Pass the selected object to the new view controller. 
    [self.navigationController pushViewController:detailViewController animated:YES]; 
    */ 

}