web-dev-qa-db-fra.com

Comment puis-je créer un gros UIButton rouge avec iOS?

En utilisant iOS, comment pourrais-je créer un bouton rouge "Supprimer" similaire à celui utilisé lors de la suppression des contacts sur l'iPhone?

iosobjective-cuitableviewuibutton
52
igul222

Vous commencez d'abord avec une image extensible:

texte alternatif http://grab.by/4lP

Ensuite, vous créez 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 la cible, le sélecteur et le titre.

85
coneybeare

J'ai aussi fait quelques boutons ... versions rétine et non-rétine

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

Green Button Normal

Red Button Normal

Grey Button Normal

Green Button RetinaRed Button RetinaGrey Button Retina

62
Staeff

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

alt textalt text

.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 puis utilisez-le comme une image extensible pour 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];
22
yonel

La manière la plus simple de le faire est probablement d'accroche ce fichier Photoshop GUI Photoshop qui contient beaucoup d'éléments d'interface utilisateur dans les couches PSD, puis modifiez la teinte du gros bouton dans Photoshop et enregistrez-le au format PNG.

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

2
Ramin

Vous pouvez créer une section distincte dans votre vue de table groupée, donner à cette section 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 par vous-même.

0
Tim

Je voudrais apporter une solution qui n'utilise pas d'images mais qui donne le même aspect que le bouton "supprimer" dans les contacts. Dans l'exemple ci-dessous, j'utiliserai supposer une UITableView avec grouped, des cellules statiques, 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 d'arrière-plan rouge (par ex. Rouge 221, vert 0, bleu 2)

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

Ajoutez QuartzCore à votre fichier d'implémentation:

#import <QuartzCore/QuartzCore.h>

Commencez par créer une sortie 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 l'apparence du verre comme le bouton "supprimer" dans les contacts. Mais nous voulons é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 comme la vue d'arrière-plan sélectionnée.

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

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

static NSInteger const SECTION_DELETE = 1;

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

}
0
Brabbeldas