Comment puis-je créer un grand UIButton rouge avec le SDK iPhone?

Comment utiliser le SDK iPhone pour créer un button rouge "supprimer" similaire à celui utilisé lors de la suppression de contacts sur l'iPhone?

Vous commencez par une image extensible:

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

Ensuite, vous créez un button avec l'image étirée en arrière-plan et appliquez du text.

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

Évidemment, vous devrez ajuster l'origine et la taille du cadre pour qu'il corresponde à votre application, ainsi qu'à la cible, au sélecteur et au titre.

J'ai aussi fait des buttons … Retina et non-Retina

Si vous voulez les utiliser dans une cellule, utilisez simplement le code suivant dans 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]; 

Bouton vert Normal

Bouton rouge Normal

Bouton gris Normal

Bouton vert RetinaBouton rouge RetinaBouton gris Retina

Je pense que ceux-ci sont meilleurs (et ils ont l'air bien sur l'affichage de la rétine aussi):

texte alttexte alt

.png généré à partir de ce très joli file .psd: http://www.teehanlax.com/blog/2010/08/12/iphone-4-gui-psd-retina-display/

Et ensuite utilisez-le comme une image strechable pour l'arrière-plan de votre UIButton :

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

J'ai ajouté quelques images de button disponibles librement sous la licence MIT à mon site, qui correspondent plus étroitement aux buttons de verre iOS. (mais ce forum ne me laissera pas postr des images b / c je suis nouveau)

Pour les download et pour un exemple de code, voir:

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

Je l'ai fait récemment aussi, et en créant ce button pour cela ( et un exemple de code Monotouch pour les monotouchers):

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

Il a less d'un biseau qui fonctionne mieux sur n'importe quel fond, mais ne correspond pas exactement à l'iPhone UIGlassButton .

Pour rendre toute couleur facile j'ai créé mon propre rendu pour UIButton qui vous permet de définir une teinte personnalisée.

Pour ceux qui sont intéressés, il peut être trouvé sur github à

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

Probablement le moyen le plus simple de le faire est d'accrocher ce file iPhone GUI Photoshop qui contient beaucoup d'éléments d'interface user dans les couches PSD, puis modifiez la teinte du gros button dans Photoshop et enregistrez-le comme un file PNG.

Un avantage de cette façon est que vous pouvez également créer des versions pour le button sélectionné et / ou l'état de surbrillance et affecter les images à un UIButton standard.

Vous pouvez créer une section distincte dans votre vue groupée, ne donner qu'une seule ligne à cette section et définir l'image d'arrière-plan de cette cellule sur une image dégradée rouge. Cependant, vous devrez recréer cette image par vous-même.

Je souhaite apporter une solution qui n'utilise pas d'images mais qui donne le même aspect que le button 'supprimer' dans Contacts. Dans l'exemple ci-dessous, je vais utiliser un UITableView avec des cellules statiques groupées , conçues dans le storyboard. Faire une des sections ont seulement une seule cellule. Cette cellule sera le button 'supprimer'. Donner à la cellule une couleur de fond rouge (par exemple Red 221, Green 0, Blue 2)

Ce que nous allons faire, c'est append deux GradientLayers à la cellule. Le premier couvrira la moitié supérieure de la cellule. La seconde couvrira la moitié inférieure.

Ajoutez QuartzCore à votre file d'implémentation:

 #import <QuartzCore/QuartzCore.h> 

Commencez par faire un exutoire à cette cellule:

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

Créez une méthode dans laquelle la cellule sera formatée:

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

Ce qui précède donnera à votre cellule l'apparence du verre comme le button 'supprimer' dans Contacts. Mais nous voulons aussi qu'il change de couleur lorsque l'user tape dessus. C'est ce que fera le dernier morceau de code de la méthode ci-dessus. Il va définir une vue différente avec une couleur plus foncée que la vue arrière-plan sélectionnée.

Après avoir appuyé sur la cellule restra sélectionné et gardera sa couleur sombre. Pour désélectionner automatiquement la cellule, nous procédons comme suit:

Commencez avec une constante qui définit la section nr de votre cellule de suppression:

 static NSInteger const SECTION_DELETE = 1; 

(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath maintenant la (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath méthode (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath (définie dans 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]; */ }