Reproduire l'éclat de l'icône de Springboard avec WebKit

Question

Quelqu'un at-il des idées sur la façon de reproduire le gloss des icônes de l'application iPhone en utilisant WebKit et CSS3 et/ou une image de superposition transparente? Est-ce seulement possible?

Answer 1

iPhone OS utilise les images suivantes pour composer l'icône:

1. AppIconMask.png
2. AppIconShadow.png
3. AppIconOverlay.png (en option)

Answer 2

Voilà comment je l'ai mis en œuvre ci-dessus en utilisant uniquement la AppIconOverlay.png dans mon application. J'aime un peu l'effet désiré.

Il n'a pas l'ombre, mais je suis sûr que si vous le vouliez vraiment, vous pourriez modifier le code afin de répondre à vos besoins. En termes de AppIconMask.png je ne pouvais pas vraiment besoin de l'utiliser puisque j'utilise le #import <QuartzCore/QuartzCore.h> cadre afin d'obtenir l'effet désiré en ajoutant un layer.masksToBounds et layer.cornerRadius.

J'espère que cela fonctionne pour tous ceux qui sont intéressés par l'effet de superposition Apple Springboard. Oh et merci à rpetrich pour fournir ces images. Je m'excuse pour le manque de commentaires dans le code. C'est le point culminant du code provenant d'implémentations existantes similaires dispersées sur Internet. Je tiens donc à remercier toutes ces personnes d'avoir fourni ces morceaux de code qui sont également utilisés.

- (UIImage *)getIconOfSize:(CGSize)size icon:(UIImage *)iconImage withOverlay:(UIImage *)overlayImage { 
UIImage *icon = [self scaleImage:iconImage toResolution:size.width]; 

CGRect iconBoundingBox = CGRectMake (0, 0, size.width, size.height); 
CGRect overlayBoundingBox = CGRectMake (0, 0, size.width, size.height); 

CGContextRef myBitmapContext = [self createBitmapContextOfSize:size]; 

CGContextSetRGBFillColor (myBitmapContext, 1, 1, 1, 1); 
CGContextFillRect (myBitmapContext, iconBoundingBox); 
CGContextDrawImage(myBitmapContext, iconBoundingBox, icon.CGImage); 
CGContextDrawImage(myBitmapContext, overlayBoundingBox, overlayImage.CGImage); 
UIImage *result = [UIImage imageWithCGImage: CGBitmapContextCreateImage (myBitmapContext)]; 
CGContextRelease (myBitmapContext); 

return result; 
} 

- (CGContextRef)createBitmapContextOfSize:(CGSize)size { 
CGContextRef context = NULL; 
CGColorSpaceRef colorSpace; 
void *   bitmapData; 
int    bitmapByteCount; 
int    bitmapBytesPerRow; 

bitmapBytesPerRow = (size.width * 4); 
bitmapByteCount  = (bitmapBytesPerRow * size.height); 

colorSpace = CGColorSpaceCreateDeviceRGB(); 
bitmapData = malloc(bitmapByteCount); 

if (bitmapData == NULL) { 
    fprintf (stderr, "Memory not allocated!"); 
    return NULL; 
} 

context = CGBitmapContextCreate (bitmapData, 
      size.width, 
      size.height, 
      8,  // bits per component 
      bitmapBytesPerRow, 
      colorSpace, 
      kCGImageAlphaPremultipliedLast); 

CGContextSetAllowsAntialiasing (context,NO); 

if (context== NULL) { 
    free (bitmapData); 
    fprintf (stderr, "Context not created!"); 
    return NULL; 
} 

CGColorSpaceRelease(colorSpace); 

return context; 
} 

- (UIImage *)scaleImage:(UIImage *)image toResolution:(int)resolution { 
CGFloat width = image.size.width; 
CGFloat height = image.size.height; 
CGRect bounds = CGRectMake(0, 0, width, height); 

    // If already at the minimum resolution, return the original image, otherwise scale. 
    if (width <= resolution && height <= resolution) { 
     return image; 
    } else { 
     CGFloat ratio = width/height; 

     if (ratio > 1) { 
      bounds.size.width = resolution; 
      bounds.size.height = bounds.size.width/ratio; 
     } else { 
      bounds.size.height = resolution; 
      bounds.size.width = bounds.size.height * ratio; 
     } 
    } 

    UIGraphicsBeginImageContext(bounds.size); 
    [image drawInRect:CGRectMake(0.0, 0.0, bounds.size.width, bounds.size.height)]; 
    UIImage *imageCopy = UIGraphicsGetImageFromCurrentImageContext(); 
    UIGraphicsEndImageContext(); 

    return imageCopy; 
} 

Utilisation:

UIImage *overlayImage = [UIImage imageNamed:@"AppIconOverlay.png"]; 
UIImage *profileImage = [Helper getIconOfSize:CGSizeMake(59, 60) icon:image withOverlay:overlayImage]; 
[profilePictureImageView setImage:profileImage]; 

profilePictureImageView.layer.masksToBounds = YES; 
profilePictureImageView.layer.cornerRadius = 10.0; 
profilePictureImageView.layer.borderColor = [[UIColor grayColor] CGColor]; 
profilePictureImageView.layer.borderWidth = 1.0;