221 votes

Dégradés sur UIView et UILabels sur iPhone

Double Possible:
Manuellement le dessin d'un gradient dans les applications de l'iPhone?

Mon application doit afficher du texte dans un UIView ou UILabel mais le fond doit être dégradé par opposition à un vrai UIColor. À l'aide d'un programme graphique pour créer le look désiré n'est pas bon que le texte peut varier selon les données renvoyées par un serveur.

Quelqu'un sait-il le moyen le plus rapide pour remédier à cette situation? Vos pensées sont grandement appréciés.

780voto

Mirko Froehlich Points 10074

Je me rends compte, il s’agit d’un vieux filet, mais pour un usage ultérieur :

À partir de l’iPhone avec le SDK 3.0, dégradés personnalisés peuvent être exécutés très facilement, sans le sous-classement ou d’images, en utilisant le nouveau `` :

Jetez un oeil à la documentation de CAGradientLayer. Vous pouvez éventuellement spécifier les points de début et fin (dans le cas vous ne voulez pas un dégradé linéaire qui va tout droit du haut vers le bas), ou même des emplacements spécifiques qui correspondent à chacune des couleurs.

122voto

Brad Larson Points 122629

Vous pouvez utiliser des Graphiques de Base pour tracer le dégradé, comme l'a souligné dans son intervention. Comme un exemple plus détaillé, vous pouvez créer un UIView sous-classe à utiliser comme arrière-plan pour votre UILabel. Dans cette UIView sous-classe, remplacer l' drawRect: méthode et insérez le code semblable au suivant:

- (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 crée un blanc, brillant style de gradient qui est établi à partir du haut de l' UIView de son centre vertical. Vous pouvez définir l' UIViews' backgroundColor de ce que vous voulez et ce brillant sera tiré sur le dessus de cette couleur. Vous pouvez également dessiner un dégradé radial à l'aide de l' CGContextDrawRadialGradient fonction.

Vous avez juste besoin de la taille de cette UIView de façon appropriée et d'ajouter votre UILabel comme une sous-vue pour obtenir l'effet que vous désirez.

EDIT (4/23/2009): Par St3fan de la suggestion, j'ai remplacé le point de vue de l'image avec ses limites dans le code. Cela corrige pour le cas où le point de vue de l'origine n'est pas (0,0).

73voto

ThomasW Points 8078

Lorsque vous utilisez , par opposition à , le dégradé n’est pas lisse, mais a une intensification notable à elle. Voir this example:

Pour obtenir des résultats plus attrayants, il est préférable d’utiliser `` .

45voto

Vous pourriez également utiliser un pixel d’une image graphique large que le dégradé et affectez à la propriété view pour agrandir le graphique afin de combler la vue (en supposant que vous pensez d’un dégradé linéaire simple et pas une sorte de graphique radial).

24voto

Robert Wagstaff Points 978

Réponse de Mirko Froehlich a fonctionné pour moi, sauf quand j’ai voulu utiliser des couleurs personnalisées. L’astuce consiste à spécifier la couleur de l’interface utilisateur avec teinte, saturation et luminosité au lieu de RVB.

Pour obtenir la teinte, la Saturation et la luminosité d’une couleur, utiliser le xcode construit en sélecteur de couleur et allez à l’onglet TSL Hue est mesuré en degrés dans ce point de vue, donc diviser la valeur de 360 pour obtenir la valeur que vous voulez entrer dans le code.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X