iOS – Comment obtenir un effet de relief pour le texte sur UILabel?

MISE À JOUR POUR iOS 7.0

Dans iOS 7.0, Apple a ajouté un nouvel atsortingbut, NSTextEffectAtsortingbuteName , pour les chaînes atsortingbuées. Si votre cible de déploiement est iOS 7.0 ou une version ultérieure, vous pouvez définir cet atsortingbut sur NSTextEffectLetterpressStyle pour dessiner une chaîne atsortingbuée dans un style en relief.

ORIGINAL

Je ne peux pas dire avec certitude comment Apple dessine le texte en relief. Il me semble qu’ils remplissent les glyphes de cordes d’une couleur rougeâtre, puis appliquent une ombre autour des bords intérieurs des glyphes et appliquent également une ombre très faible sur les bords extérieurs supérieurs des glyphes. Je l’ai essayé et voici à quoi ça ressemble:

En haut est mon rendu. En dessous, il y a un simple UILabel avec une ombre comme Chris l’a suggéré dans sa réponse. Je mets une capture d’écran de l’application Rappels en arrière-plan.

Voici mon code.

Tout d’abord, vous avez besoin d’une fonction qui crée un masque d’image de votre chaîne. Vous utiliserez le masque pour dessiner la chaîne elle-même, puis pour dessiner une ombre qui apparaît uniquement autour des bords intérieurs de la chaîne. Cette image n’a qu’un canal alpha et aucun canal RVB.

 - (UIImage *)maskWithSsortingng:(NSSsortingng *)ssortingng font:(UIFont *)font size:(CGSize)size { CGRect rect = { CGPointZero, size }; CGFloat scale = [UIScreen mainScreen].scale; CGColorSpaceRef grayscale = CGColorSpaceCreateDeviceGray(); CGContextRef gc = CGBitmapContextCreate(NULL, size.width * scale, size.height * scale, 8, size.width * scale, grayscale, kCGImageAlphaOnly); CGContextScaleCTM(gc, scale, scale); CGColorSpaceRelease(grayscale); UIGraphicsPushContext(gc); { [[UIColor whiteColor] setFill]; [ssortingng drawInRect:rect withFont:font]; } UIGraphicsPopContext(); CGImageRef cgImage = CGBitmapContextCreateImage(gc); CGContextRelease(gc); UIImage *image = [UIImage imageWithCGImage:cgImage scale:scale orientation:UIImageOrientationDownMirrored]; CGImageRelease(cgImage); return image; } 

Deuxièmement, vous avez besoin d’une fonction qui inverse ce masque. Vous l’utiliserez pour que CoreGraphics dessine une ombre autour des bords internes de la chaîne. Cela doit être une image RGBA complète. (iOS ne semble pas prendre en charge les images en niveaux de gris et les images alpha.)

 - (UIImage *)invertedMaskWithMask:(UIImage *)mask { CGRect rect = { CGPointZero, mask.size }; UIGraphicsBeginImageContextWithOptions(rect.size, NO, mask.scale); { [[UIColor blackColor] setFill]; UIRectFill(rect); CGContextClipToMask(UIGraphicsGetCurrentContext(), rect, mask.CGImage); CGContextClearRect(UIGraphicsGetCurrentContext(), rect); } UIImage *image = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); return image; } 

Vous pouvez les utiliser dans une fonction qui dessine la chaîne en rouge et applique une ombre sur ses bords intérieurs.

 -(UIImage *)imageWithInteriorShadowAndSsortingng:(NSSsortingng *)ssortingng font:(UIFont *)font textColor:(UIColor *)textColor size:(CGSize)size { CGRect rect = { CGPointZero, size }; UIImage *mask = [self maskWithSsortingng:ssortingng font:font size:rect.size]; UIImage *invertedMask = [self invertedMaskWithMask:mask]; UIImage *image; UIGraphicsBeginImageContextWithOptions(rect.size, NO, [UIScreen mainScreen].scale); { CGContextRef gc = UIGraphicsGetCurrentContext(); // Clip to the mask that only allows drawing inside the ssortingng's image. CGContextClipToMask(gc, rect, mask.CGImage); // We apply the mask twice because we're going to draw through it twice. // Only applying it once would make the edges too sharp. CGContextClipToMask(gc, rect, mask.CGImage); mask = nil; // done with mask; let ARC free it // Draw the red text. [textColor setFill]; CGContextFillRect(gc, rect); // Draw the interior shadow. CGContextSetShadowWithColor(gc, CGSizeZero, 1.6, [UIColor colorWithWhite:.3 alpha:1].CGColor); [invertedMask drawAtPoint:CGPointZero]; invertedMask = nil; // done with invertedMask; let ARC free it image = UIGraphicsGetImageFromCurrentImageContext(); } UIGraphicsEndImageContext(); return image; } 

Ensuite, vous avez besoin d’une fonction qui prend une image et renvoie une copie avec une faible ombre scope.

 - (UIImage *)imageWithUpwardShadowAndImage:(UIImage *)image { UIGraphicsBeginImageContextWithOptions(image.size, NO, image.scale); { CGContextSetShadowWithColor(UIGraphicsGetCurrentContext(), CGSizeMake(0, -1), 1, [UIColor colorWithWhite:0 alpha:.15].CGColor); [image drawAtPoint:CGPointZero]; } UIImage *resultImage = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); return resultImage; } 

Enfin, vous pouvez combiner ces fonctions pour créer une image en relief de votre chaîne. J’ai mis mon image finale dans un UIImageView pour un test facile.

 - (void)viewDidLoad { [super viewDidLoad]; CGRect rect = self.imageView.bounds; NSSsortingng *ssortingng = @"Reminders"; UIFont *font = [UIFont systemFontOfSize:33]; UIImage *interiorShadowImage = [self imageWithInteriorShadowAndSsortingng:ssortingng font:font textColor:[UIColor colorWithHue:0 saturation:.9 brightness:.7 alpha:1] size:rect.size]; UIImage *finalImage = [self imageWithUpwardShadowAndImage:interiorShadowImage]; self.imageView.image = finalImage; } 

Cela ressemble à une ombre autour du texte. Vous la définissez dans IB dans la même zone où vous définissez la couleur du texte – choisissez une couleur appropriée pour l’ombre et définissez la manière dont vous souhaitez le décalage (dans l’exemple que vous avez publié, il semble que la couleur de l’ombre soit identique) comme le texte et le décaler 0 horizontal et -1 vertical (ce qui signifie un pixel plus haut).

Dans le code, les propriétés sont définies comme ceci (en supposant que vous avez déjà configuré un UILabel nommé, de manière appropriée, “label”:

 label.shadowColor = [UIColor blackColor]; // Choose your color here - in the example // posted, they probably chose a similar color // to the text color and then set the alpha // down around 0.7 or so so the shadow would be // faint. label.shadowOffset = CGSizeMake(0,-1); // First parameter is horizontal, second is vertical 

Vous pouvez configurer votre effet sur la base de cet exemple