web-dev-qa-db-fra.com

Gradients sur UIView et UILabels sur iPhone

Duplicate possible:
Dessin manuel d'un dégradé dans les applications iPhone?

Mon application doit afficher du texte sous la forme UIView ou UILabel, mais l'arrière-plan doit être un dégradé, par opposition à un vrai UIColor. L'utilisation d'un programme graphique pour créer l'apparence souhaitée n'a pas d'importance, car le texte peut varier en fonction des données renvoyées par un serveur.

Est-ce que quelqu'un sait le moyen le plus rapide de s'y attaquer? Vos pensées sont fortes appréciées.

iphoneioscocoa-touchgradient
219
TonyNeallon

Vous pouvez également utiliser une image graphique d'un pixel de largeur en tant que dégradé et définir la propriété view pour développer le graphique afin de remplir la vue (en supposant que vous envisagez un simple dégradé linéaire et non une sorte de graphique radial).

44
Kendall Helmstetter Gelner

Je réalise que c'est un fil plus ancien, mais pour référence future:

À partir du iPhone SDK 3.0, les dégradés personnalisés peuvent être mis en oeuvre très facilement, sans sous-classement ni image, en utilisant le nouveau CAGradientLayer:

 UIView *view = [[[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 100)] autorelease];
 CAGradientLayer *gradient = [CAGradientLayer layer];
 gradient.frame = view.bounds;
 gradient.colors = [NSArray arrayWithObjects:(id)[[UIColor blackColor] CGColor], (id)[[UIColor whiteColor] CGColor], nil];
 [view.layer insertSublayer:gradient atIndex:0];

Jetez un coup d'œil à la documentation CAGradientLayer. Vous pouvez éventuellement spécifier des points de début et de fin (au cas où vous ne voudriez pas d'un dégradé linéaire allant du haut vers le bas), ou même des emplacements spécifiques mappés à chacune des couleurs.

779
Mirko Froehlich

Vous pouvez utiliser Core Graphics pour dessiner le dégradé, comme indiqué dans la réponse de Mike. Comme exemple plus détaillé, vous pouvez créer une sous-classe UIView à utiliser comme arrière-plan pour votre UILabel. Dans cette sous-classe UIView, substituez la méthode drawRect: et insérez un code similaire à celui-ci:

- (void)drawRect:(CGRect)rect 
{
    CGContextRef currentContext = UIGraphicsGetCurrentContext();

    CGGradientRef glossGradient;
    CGColorSpaceRef rgbColorspace;
    size_t num_locations = 2;
    CGFloat locations[2] = { 0.0, 1.0 };
    CGFloat components[8] = { 1.0, 1.0, 1.0, 0.35,  // Start color
         1.0, 1.0, 1.0, 0.06 }; // End color

    rgbColorspace = CGColorSpaceCreateDeviceRGB();
    glossGradient = CGGradientCreateWithColorComponents(rgbColorspace, components, locations, num_locations);

    CGRect currentBounds = self.bounds;
    CGPoint topCenter = CGPointMake(CGRectGetMidX(currentBounds), 0.0f);
    CGPoint midCenter = CGPointMake(CGRectGetMidX(currentBounds), CGRectGetMidY(currentBounds));
    CGContextDrawLinearGradient(currentContext, glossGradient, topCenter, midCenter, 0);

    CGGradientRelease(glossGradient);
    CGColorSpaceRelease(rgbColorspace); 
}

Cet exemple particulier crée un dégradé blanc, de style brillant, dessiné du haut du UIView à son centre vertical. Vous pouvez définir le UIView's backgroundColor comme bon vous semble et ce gloss sera dessiné par-dessus cette couleur. Vous pouvez également dessiner un dégradé radial en utilisant la fonction CGContextDrawRadialGradient.

Vous devez simplement dimensionner cette UIView de manière appropriée et ajouter votre UILabel comme sous-vue pour obtenir l’effet souhaité.

EDIT (23/04/2009): Selon la suggestion de St3fan, j'ai remplacé le cadre de la vue par ses limites dans le code. Ceci corrige le cas où l'origine de la vue n'est pas (0,0).

120
Brad Larson

Lorsque vous utilisez CAGradientLayer, par opposition à CGGradient, le dégradé n'est pas lisse, mais il présente une progression sensible. Voir this example:

Pour obtenir des résultats plus attrayants, il vaut mieux utiliser CGGradient.

72
ThomasW

La réponse de Mirko Froehlich a fonctionné pour moi, sauf lorsque je voulais utiliser des couleurs personnalisées. L'astuce consiste à spécifier la couleur de l'interface utilisateur avec la teinte, la saturation et la luminosité au lieu de RVB.

CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = myView.bounds;
UIColor *startColour = [UIColor colorWithHue:.580555 saturation:0.31 brightness:0.90 alpha:1.0];
UIColor *endColour = [UIColor colorWithHue:.58333 saturation:0.50 brightness:0.62 alpha:1.0];
gradient.colors = [NSArray arrayWithObjects:(id)[startColour CGColor], (id)[endColour CGColor], nil];
[myView.layer insertSublayer:gradient atIndex:0];

Pour obtenir la teinte, la saturation et la luminosité d'une couleur, utilisez le sélecteur de couleur intégré xcode et accédez à l'onglet HSB. La teinte est mesurée en degrés dans cette vue, divisez donc la valeur par 360 pour obtenir la valeur que vous souhaitez entrer dans le code.

24
Robert Wagstaff

C’est ce que j’ai obtenu en réglant UIButton dans l’IB de xCode sur transparent/clair et sans image bg.

UIColor *pinkDarkOp = [UIColor colorWithRed:0.9f green:0.53f blue:0.69f alpha:1.0];
UIColor *pinkLightOp = [UIColor colorWithRed:0.79f green:0.45f blue:0.57f alpha:1.0];

CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = [[shareWordButton layer] bounds];
gradient.cornerRadius = 7;
gradient.colors = [NSArray arrayWithObjects:
                   (id)pinkDarkOp.CGColor,
                   (id)pinkLightOp.CGColor,
                   nil];
gradient.locations = [NSArray arrayWithObjects:
                      [NSNumber numberWithFloat:0.0f],
                      [NSNumber numberWithFloat:0.7],
                      nil];

[[recordButton layer] insertSublayer:gradient atIndex:0];
15
Anna Billstrom

Je réalise cela dans une vue avec une sous-vue qui est un UIImageView. L'image sur laquelle ImageView pointe est un dégradé. Ensuite, je définis une couleur d’arrière-plan dans UIView et j’ai une vue en dégradé de couleur. Ensuite, j'utilise la vue comme il me faut et tout ce que je dessine sera sous cette vue en dégradé. En ajoutant une deuxième vue au-dessus de la vue Image, vous pouvez avoir certaines options si votre dessin sera au-dessus ou au-dessus du dégradé ...

3
mahboudz