iphone - settitle - uibutton right image

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

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

Creo que esos son mejores (y se ven bien en la pantalla Retina también):

.png generado a partir de este muy bonito archivo .psd: http://www.teehanlax.com/blog/2010/08/12/iphone-4-gui-psd-retina-display/

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

#import <QuartzCore/QuartzCore.h>

Answer 2

He agregado algunas imágenes de botón disponibles libremente bajo la licencia de MIT a mi sitio, que se asemejan más a los botones de cristal de iOS. (pero este foro no me deja publicar imágenes b / c Soy nuevo)

Para descargarlos y para el código de muestra, ver:

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

Answer 3

Me gustaría aportar una solución que no use imágenes pero que tenga el mismo aspecto que el botón ''eliminar'' en Contactos. En el siguiente ejemplo usaré una UITableView con células estáticas agrupadas , diseñadas en el guión gráfico. Haga que una de las secciones tenga solo una celda. Esa celda será el botón ''eliminar''. Dale a la celda un color de fondo rojo (fe 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.

Agregue QuartzCore a su archivo de implementación:

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

Comience con hacer una salida a esta 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];
}

Cree un método en el que se formateará la celda:

static NSInteger const SECTION_DELETE = 1;

Lo anterior le dará a su celda el cristal, se parece al 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 deseleccionar automáticamente la celda, hacemos lo siguiente:

Comience con una constante que define la sección nr de su celda de eliminación:

- (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];
     */

}

Ahora implemente el (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath 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]; */ }

Answer 4

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

Para aquellos interesados, se puede encontrar en github en

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

Answer 5

Primero comienza con una imagen extensible:

texto alternativo http://grab.by/4lP

A continuación, crea un botón con la imagen estirada como fondo y aplica 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 y el tamaño del marco para que coincida con su aplicación, así como el destino, el selector y el título.

Answer 6

Probablemente la forma más sencilla de hacerlo es enganchar este archivo de Photoshop GUI de iPhone que contiene muchos elementos UI en capas 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 7

Puede crear una sección separada en su vista de tabla agrupada, darle 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 8

También he hecho esto recientemente y he creado este botón para él ( y algunos códigos de ejemplo de Monotouch para cualquier monotouchers):

texto alternativo http://www.yetanotherchris.me/storage/downloads/uiglassbutton-template.png

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

Answer 9

También hice algunos botones ... versiones de retina y no retina

Si desea usarlos en una Celda, solo use 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];