Comment créer un gros UIButton rouge avec iOS?

Question

Avec iOS, comment procéder pour créer un " delete " rouge bouton similaire à celui utilisé lors de la suppression de contacts sur l'iPhone?

Answer 1

Vous commencez d'abord par une image extensible:

texte de remplacement http://grab.by/4lP

Vous créez ensuite un bouton avec l'image étirée comme arrière-plan et appliquez du texte.

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 en fonction de votre application, ainsi que de la cible, du sélecteur et du titre.

Answer 2

J'ai aussi créé des boutons ... Versions rétinienne et non rétinienne

Si vous souhaitez 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];

Answer 3

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

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

Et utilisez-le ensuite comme image lisible à l'arrière-plan de votre 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

La manière la plus simple de le faire est probablement de ce fichier Photoshop avec interface graphique pour iPhone contient de nombreux éléments d'interface utilisateur dans les calques PSD, puis modifie la teinte du gros bouton dans Photoshop et enregistrez-le au format PNG.

L’un des avantages de cette méthode est que vous pouvez également créer des versions pour le bouton sélectionné et / ou mettre en surbrillance l’état et attribuer les images à un bouton UIB standard.

Answer 5

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

Answer 6

J'aimerais apporter une solution qui n'utilise pas d'images, mais qui a le même aspect que le bouton "Supprimer" de Contacts. Dans l'exemple ci-dessous, je vais utiliser l'hypothèse d'une UITableView avec des cellules statiques groupées , conçues dans le storyboard. Assurez-vous que l'une des sections ne comporte qu'une seule cellule. Cette cellule sera le bouton "supprimer". Donnez à la cellule une couleur de fond rouge (par exemple, rouge 221, vert 0, bleu 2)

Nous allons ajouter deux GradientLayers à la cellule. Le premier couvrira la moitié supérieure de la cellule. La seconde couvrira la moitié inférieure.

Ajoutez QuartzCore à votre fichier d'implémentation:

#import <QuartzCore/QuartzCore.h>

Commencez par créer un point de vente vers 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 une apparence de verre comme le bouton "Supprimer" de Contacts. Mais nous souhaitons également qu'il change de couleur lorsque l'utilisateur appuie dessus. C'est ce que fera le dernier morceau de code de la méthode ci-dessus. Il définira une vue différente avec une couleur plus foncée que celle sélectionnéeBackgroundView.

Après avoir appuyé sur, la cellule restera sélectionnée et conservera sa couleur sombre. Pour désélectionner automatiquement la cellule, procédez comme suit:

Commencez par une constante qui définit le numéro de section de votre cellule de suppression:

static NSInteger const SECTION_DELETE = 1;

Maintenant, implémentez la méthode (void) tableView: (UITableView *) tableView didSelectRowAtIndexPath: (NSIndexPath *) indexPath (défini 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];
     */

}