web-dev-qa-db-fra.com

Est-il possible de changer la couleur de fond d'un UIButtons?

Celui-ci m'a laissé perplexe.

Est-il possible de changer la couleur de fond d'un UIButton dans Cocoa for iPhone. J'ai essayé de définir la couleur d'arrière-plan mais cela ne change que les angles. setBackgroundColor: semble être la seule méthode disponible pour de telles choses.

[random setBackgroundColor:[UIColor blueColor]];
[random.titleLabel setBackgroundColor:[UIColor blueColor]];
objective-ciphonecocoa-touchuibutton
105
dubbeat

Cela peut être fait par programme en faisant une réplique:

    loginButton = [UIButton buttonWithType:UIButtonTypeCustom];
    [loginButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    loginButton.backgroundColor = [UIColor whiteColor];
    loginButton.layer.borderColor = [UIColor blackColor].CGColor;
    loginButton.layer.borderWidth = 0.5f;
    loginButton.layer.cornerRadius = 10.0f;

edit: ofcourse, il faudrait #import <QuartzCore/QuartzCore.h>

edit: pour tous les nouveaux lecteurs, vous devriez également considérer quelques options ajoutées comme "une autre possibilité". pour vous considération.

Comme il s'agit d'une vieille réponse, je recommande vivement de lire les commentaires pour le dépannage

158
Stian Storrvik

J'ai une approche différente,

[btFind setTitle:NSLocalizedString(@"Find", @"") forState:UIControlStateNormal];    
[btFind setBackgroundImage:[CommonUIUtility imageFromColor:[UIColor cyanColor]] 
        forState:UIControlStateNormal];
btFind.layer.cornerRadius = 8.0;
btFind.layer.masksToBounds = YES;
btFind.layer.borderColor = [UIColor lightGrayColor].CGColor;
btFind.layer.borderWidth = 1;

De CommonUIUtility,

+ (UIImage *) imageFromColor:(UIColor *)color {
    CGRect rect = CGRectMake(0, 0, 1, 1);
    UIGraphicsBeginImageContext(rect.size);
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetFillColorWithColor(context, [color CGColor]);
    //  [[UIColor colorWithRed:222./255 green:227./255 blue: 229./255 alpha:1] CGColor]) ;
    CGContextFillRect(context, rect);
    UIImage *img = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return img;
}

N'oubliez pas de #import <QuartzCore/QuartzCore.h>

59
karim

Je suppose que vous parlez d'un UIButton avec UIButtonTypeRoundedRect? Vous ne pouvez pas changer la couleur de fond de cela. Lorsque vous essayez de changer sa couleur d'arrière-plan, vous modifiez plutôt la couleur du rect sur lequel le bouton est dessiné (ce qui est généralement clair) . Il y a donc deux façons de procéder. Soit vous sous-classez UIButton et écrasez sa méthode -drawRect:, soit vous créez des images pour les différents états de bouton (ce qui est tout à fait correct à faire).

Si vous définissez les images d’arrière-plan dans Interface Builder, vous remarquerez probablement que IB ne prend pas en charge la définition d’images pour tous les états possibles du bouton. Je vous recommande donc de définir les images dans le code de la manière suivante:

UIButton *myButton = [UIButton buttonWithType:UIButtonTypeCustom];
[myButton setBackgroundImage:[UIImage imageNamed:@"normal.png"] forState:UIControlStateNormal];
[myButton setBackgroundImage:[UIImage imageNamed:@"disabled.png"] forState:UIControlStateDisabled];
[myButton setBackgroundImage:[UIImage imageNamed:@"selected.png"] forState:UIControlStateSelected];
[myButton setBackgroundImage:[UIImage imageNamed:@"higligted.png"] forState:UIControlStateHighlighted];
[myButton setBackgroundImage:[UIImage imageNamed:@"highlighted+selected.png"] forState:(UIControlStateHighlighted | UIControlStateSelected)];

La dernière ligne montre comment définir une image pour l’état sélectionné et mis en surbrillance (c’est celui que l’IB ne peut pas définir) . Vous n’avez pas besoin des images sélectionnées (lignes 4 et 6) si vous êtes touchez au dos. pas besoin d'un état sélectionné.

32
stigi

Une autre possibilité:

  1. Créez un UIButton dans le générateur Interface.
  2. Donnez-lui un type 'Personnalisé'
  3. Maintenant, dans IB, il est possible de changer la couleur de fond

Cependant, le bouton est carré et ce n'est pas ce que nous voulons. Créez un IBOutlet avec une référence à ce bouton et ajoutez ce qui suit à la méthode viewDidLoad:

[buttonOutlet.layer setCornerRadius:7.0f];
[buttonOutlet.layer setClipToBounds:YES];

N'oubliez pas d'importer QuartzCore.h

28
wubbe

Sous-classe UIButton et substitution des méthodes setHighlighted et setSelected

-(void) setHighlighted:(BOOL)highlighted {

  if(highlighted) {
    self.backgroundColor = [self.mainColor darkerShade];
  } else {
    self.backgroundColor = self.mainColor;
  }
  [super setHighlighted:highlighted];
}

-(void) setSelected:(BOOL)selected {

  if(selected) {
    self.backgroundColor = [self.mainColor darkerShade];
  } else {
    self.backgroundColor = self.mainColor;
  }
  [super setSelected:selected];
}

Ma méthode darkerShade est dans une catégorie UIColor comme celle-ci.

-(UIColor*) darkerShade {

  float red, green, blue, alpha;
  [self getRed:&red green:&green blue:&blue alpha:&alpha];

  double multiplier = 0.8f;
  return [UIColor colorWithRed:red * multiplier green:green * multiplier blue:blue*multiplier alpha:alpha];
}
17
Mugunth

colored UIButton

Essayez ceci si vous ne voulez pas utiliser d'images et que vous voulez que cela ressemble exactement au style Rounded Rect. Placez simplement un UIView sur l'UIButton, avec un cadre et un masque de redimensionnement automatique identiques, définissez l'alpha sur 0,3 et définissez le fond sur une couleur. Utilisez ensuite l'extrait de code ci-dessous pour couper les bords arrondis de la vue superposée colorée. Décochez également la case "Interaction utilisateur activée" dans IB sur UIView pour permettre aux événements tactiles d’être transmis en cascade au-dessous de UIButton. 

Un effet secondaire est que votre texte sera également colorisé.

#import <QuartzCore/QuartzCore.h>

colorizeOverlayView.layer.cornerRadius = 10.0f;
colorizeOverlayView.layer.masksToBounds = YES;
7
Jacob Jennings

Une autre possibilité (le meilleur et le plus beau à mon goût):

Créez un UISegmentedControl avec 2 segments dans la couleur d'arrière-plan requise dans Interface Builder. Définissez le type sur 'bar'. Ensuite, changez-le pour n'avoir qu'un seul segment. Le générateur d'interface n'accepte pas un segment, vous devez donc le faire par programme.

Par conséquent, créez un IBOutlet pour ce bouton et ajoutez-le au viewDidLoad de votre vue:

[segmentedButton removeSegmentAtIndex:1 animated:NO];

Vous avez maintenant un beau bouton brillant et coloré avec la couleur d'arrière-plan spécifiée . Pour les actions, utilisez l'événement 'valeur modifiée'.

(J'ai trouvé ceci sur http://chris-software.com/index.php/2009/05/13/creating-a-Nice-glass-buttons/ ). Merci Chris!

7
wubbe

Eh bien, je suis positif à 99% sur le fait que vous ne pouvez pas simplement changer la couleur de fond d'un bouton UIB. Au lieu de cela, vous devez modifier vous-même les images d'arrière-plan, ce qui me semble pénible. Je suis étonné que je devais faire cela.

Si je me trompe ou s'il existe un meilleur moyen de ne pas définir d'images d'arrière-plan, veuillez me le faire savoir.

[random setBackgroundImage:[UIImage imageNamed:@"toggleoff.png"] forState:UIControlStateNormal];
    [random setTitleColor:[UIColor darkTextColor] forState:UIControlStateNormal];


[random setBackgroundImage:[UIImage imageNamed:@"toggleon.png"] forState:UIControlStateNormal];
    [random setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
5
dubbeat

Selon la suggestion de @EthanB et la création par @karim d'un rectangle rempli, je viens de créer une catégorie pour le UIButton. 

Il suffit de déposer le code de catégorie: https://github.com/zmonteca/UIButton-PLColor

Usage:

[button setBackgroundColor:uiTextColor forState:UIControlStateDisabled];

Facultatif pour les états à utiliser:

UIControlStateNormal
UIControlStateHighlighted
UIControlStateDisabled
UIControlStateSelected
2
zmonteca

Vous pouvez également ajouter une couche CALayer au bouton. Vous pouvez faire beaucoup de choses avec ces fonctions, y compris une superposition de couleurs. Cet exemple utilise une couche de couleur unie que vous pouvez également graduer facilement. Sachez que les couches ajoutées masquent celles du dessous

+(void)makeButtonColored:(UIButton*)button color1:(UIColor*) color
{

    CALayer *layer = button.layer;
    layer.cornerRadius = 8.0f;
    layer.masksToBounds = YES;
    layer.borderWidth = 4.0f;
    layer.opacity = .3;//
    layer.borderColor = [UIColor colorWithWhite:0.4f alpha:0.2f].CGColor;

    CAGradientLayer *colorLayer = [CAGradientLayer layer];
    colorLayer.cornerRadius = 8.0f;
    colorLayer.frame = button.layer.bounds;
    //set gradient colors
    colorLayer.colors = [NSArray arrayWithObjects:
                         (id) color.CGColor,
                         (id) color.CGColor,
                         nil];

    //set gradient locations
    colorLayer.locations = [NSArray arrayWithObjects:
                            [NSNumber numberWithFloat:0.0f],
                            [NSNumber numberWithFloat:1.0f],
                            nil];


    [button.layer addSublayer:colorLayer];

}
2
gheese

ajoutez une deuxième cible pour UIButton pour UIControlEventTouched et modifiez la couleur d'arrière-plan UIButton. Puis changez-le dans la cible UIControlEventTouchUpInside;

1
Shaun

Je sais que cela a été demandé il y a longtemps et qu'il existe maintenant un nouveau système UIButtonTypeSystem. Mais les nouvelles questions sont marquées comme des doublons de cette question. Voici donc ma réponse la plus récente dans le contexte d'un bouton système iOS 7, utilisez la propriété .tintColor. 

let button = UIButton(type: .System)
button.setTitle("My Button", forState: .Normal)
button.tintColor = .redColor()
1
DonnaLea

Ce n'est pas aussi élégant que de sous-classer UIButton, cependant si vous voulez juste quelque chose de rapide - ce que j'ai fait était de créer un bouton personnalisé, puis une image de 1 pixel par 1 pixel avec la couleur souhaitée, et de définir le fond du bouton à cette image pour l'état en surbrillance - fonctionne pour mes besoins.

1
SMSidat

Pour les boutons professionnels et agréables, vous pouvez vérifier ce composant de boutons personnalisé . Vous pouvez l'utiliser directement dans vos vues et vues de table ou modifier le code source pour l'adapter à vos besoins. J'espère que cela t'aides.

1
Ahmet Ardal

Swift 3:

        static func imageFromColor(color: UIColor, width: CGFloat, height: CGFloat) -> UIImage {
            let rect = CGRect(x: 0, y: 0, width: width, height: height)
            UIGraphicsBeginImageContext(rect.size)
            let context = UIGraphicsGetCurrentContext()!
            context.setFillColor(color.cgColor)
            context.fill(rect)
            let img = UIGraphicsGetImageFromCurrentImageContext()!
            UIGraphicsEndImageContext()
            return img
        }

        let button = UIButton(type: .system)
        let image = imageFromColor(color: .red, width: 
        button.frame.size.width, height: button.frame.size.height)
        button.setBackgroundImage(image, for: .normal)
0
pawurb

[myButton setBackgroundColor:[UIColor blueColor]]; [myButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];

Il est possible de changer de cette façon ou d'aller sur Storyboard et de changer le fond des options dans le côté droit.

0
Vinicius Carvalho