Come posso creare un grande UIButton rosso con iOS?

Question

Usando iOS, come potrei fare per creare un rosso " elimina " pulsante simile a quello utilizzato durante l'eliminazione dei contatti su iPhone?

Answer 1

Per prima cosa inizi con un'immagine estensibile:

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

Quindi si crea un pulsante con l'immagine allungata come sfondo e si applica il testo.

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];

Ovviamente, dovrai regolare l'origine e le dimensioni della cornice in modo che corrispondano alla tua app, nonché alla destinazione, al selettore e al titolo.

Answer 2

Ho anche creato alcuni pulsanti ... versioni retina e non retina

Se vuoi usarli in una cella, usa il seguente codice in 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 3

Penso che quelli siano migliori (e stanno bene anche sul display della retina ):

.png generato da questo bellissimo file .psd: http://www.teehanlax.com/blog/2010/08/12/iphone-4-gui-psd-retina-display/

E poi usalo come immagine flessibile per lo sfondo del tuo 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 4

Probabilmente il modo più semplice per farlo è quello di afferrare questo file Photoshop della GUI di iPhone che contiene molti elementi dell'interfaccia utente nei livelli PSD, quindi cambia la tonalità del pulsante grande in Photoshop e salvalo come PNG.

Un vantaggio nel farlo in questo modo è che puoi anche creare versioni per il pulsante selezionato e / o evidenziare lo stato e assegnare le immagini a un UIButton standard.

Answer 5

Puoi creare una sezione separata nella vista della tabella raggruppata, assegnare a quella sezione solo una riga e impostare l'immagine di sfondo di quella cella su un'immagine sfumata rossa. Dovrai ricreare quell'immagine da solo, però.

Answer 6

Vorrei contribuire con una soluzione che non utilizza immagini ma che ha lo stesso aspetto del pulsante "Elimina" in Contatti. Nell'esempio che segue userò un UITableView con raggruppate , celle statiche, progettate nello storyboard. Crea una delle sezioni con una sola cella. Quella cella sarà il pulsante "Elimina". Dai alla cella un colore di sfondo rosso (ad es. Rosso 221, Verde 0, Blu 2)

Quello che faremo è aggiungere due GradientLayer alla cella. Il primo coprirà la metà superiore della cella. Il secondo riguarderà la metà inferiore.

Aggiungi QuartzCore al tuo file di implementazione:

#import <QuartzCore/QuartzCore.h>

Inizia a creare uno sbocco su questa cella:

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

Crea un metodo in cui la cella verrà formattata:

- (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];
}

Quanto sopra darà alla tua cella l'aspetto del vetro come il pulsante 'Elimina' in Contatti. Ma vogliamo anche che cambi colore quando l'utente lo tocca. Questo è ciò che farà l'ultimo pezzo di codice nel metodo sopra. Imposterà una vista diversa con un colore più scuro come la vista di sfondo selezionata.

Dopo aver toccato la cella rimarrà selezionata e manterrà il suo colore scuro. Per deselezionare automaticamente la cella facciamo quanto segue:

Inizia con una costante che definisce la sezione nr della tua cella di eliminazione:

static NSInteger const SECTION_DELETE = 1;

Ora implementa il (void) tableView: (UITableView *) tableView didSelectRowAtIndexPath: (NSIndexPath *) indexPath (definito in 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];
     */

}