Come posso creare un UIButton grande e rosso con l'SDK dell'iPhone?

Question

Utilizzando l'iPhone SDK, come potrei fare per creare un pulsante "Elimina" rosso simile a quello utilizzato quando si eliminano i contatti su iPhone?

Answer 1

si inizia con un'immagine estensibile:

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

Poi fate un pulsante con l'immagine allungata come sfondo e applicare 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, è necessario regolare l'origine telaio e le dimensioni per soddisfare la vostra applicazione, così come l'obiettivo, selettore, e il titolo.

Answer 2

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

Answer 3

Probabilmente il modo più semplice per eseguire questa operazione consiste nell'impugnare this iPhone GUI Photoshop file che contiene molti elementi dell'interfaccia utente nei livelli PSD, quindi modificare la tonalità del pulsante grande in Photoshop e salvarlo come PNG.

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

Answer 4

Ho fatto questo di recente anche, e la creazione di questo pulsante per esso (and some Monotouch example code per qualsiasi monotouchers):

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

Ha meno di uno smusso, che funziona meglio su qualsiasi sfondo, ma doesn' t corrisponde esattamente all'iPhone UIGlassButton.

Answer 5

penso che quelle sono meglio (e si guardano bene su display retina troppo):

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

E quindi utilizzalo come immagine per lo sfondo dello 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

Per rendere più semplice qualsiasi colore, ho creato il mio rendering per UIButton che consente di impostare una tinta personalizzata.

Per chi è interessato, si può trovare su github al

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

Answer 7

ho aggiunto alcune immagini dei pulsanti disponibili liberamente sotto licenza MIT al mio sito, che corrispondono più da vicino i pulsanti di vetro iOS. (Ma questo forum non mi permette di inserire delle immagini b/c io sono nuovo)

di scaricarli e per codice di esempio, si veda:

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

Answer 8

Ho anche fatto alcuni pulsanti. ..retina e le versioni non-retina

Se si desidera utilizzarli in una cella basta utilizzare il seguente codice nel 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

Vorrei contribuire con una soluzione che non utilizza immagini ma che dà lo stesso aspetto del pulsante "Elimina" in Contatti. Nell'esempio seguente verrà utilizzato un UITableView con raggruppato, celle statiche, progettato nello storyboard. Rendere una delle sezioni ha solo una singola cella. Quella cella sarà il pulsante 'cancella'. Dare alla cella un colore di sfondo rosso (ad esempio Rosso 221, Verde 0, Blu 2)

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

Aggiungi QuartzCore al file di implementazione:

#import <QuartzCore/QuartzCore.h> 

Inizia con fare uno sbocco a questa cella:

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

Creare un metodo in cui verrà formattato della cella:

- (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à al tuo cellulare 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 il selezionato BackgroundView.

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

Inizia con una costante che definisce il nr sezione del tuo cellulare cancellazione:

static NSInteger const SECTION_DELETE = 1; 

ora implementare il metodo (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]; 
    */ 

}