如何重新创建UITabBarItem图像过滤器? [英] How to recreate the UITabBarItem image filter?
问题描述
我正在写一个自定义UITabBar替换,我想知道如何重新创建内置实现与UITabBarItem图像过滤器 - 选定的选项卡上的蓝色和未选择的灰色渐变。我想这是一个问题,使用源图像alpha值作为掩码,并覆盖它与预先制作的蓝色(或任何颜色)闪亮的图像和另一个灰色的,但我想知道什么是最好的方法从代码的观点。
I'm writing a custom UITabBar replacement, and I would like to know how to recreate the filter that the built-in implementation does with the UITabBarItem image - that blue shining on selected tabs and gray gradient on unselected ones. I guess it's a matter of using the source image alpha value as a mask and overlay it with a pre-made blue (or whatever color) shining image and another one grayed out, but I would like to know what is the best approach from a code point of view.
最好,
推荐答案
蓝色过滤器有点
Edit2:清理灰色过滤器
Fixed up the blue filter a little
Cleaned up the grey filter
我需要的代码来做这些效果,所以我写了几个函数
I required code to do these effects, so I wrote a couple functions for them:
UIImage *grayTabBarItemFilter(UIImage *image) {
int width = image.size.width, height = image.size.height;
UIImage *result = image;
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
if (colorSpace == NULL) {
return result;
}
CGContextRef context = CGBitmapContextCreate(NULL, width, height, 8, width * 4, colorSpace, kCGImageAlphaPremultipliedLast);
if (context == NULL) {
CGColorSpaceRelease(colorSpace);
return result;
}
CGFloat colors[8] = {80/255.0,80/255.0,80/255.0,1, 175/255.0,175/255.0,175/255.0,1};
CGGradientRef gradient = CGGradientCreateWithColorComponents(colorSpace, colors, NULL, 2);
CGContextDrawLinearGradient(context, gradient, CGPointMake(0,-(32-height)/2.0), CGPointMake(0,height+(32-height)/2.0), 0);
CGGradientRelease(gradient);
CGContextSetBlendMode(context, kCGBlendModeDestinationIn);
CGContextDrawImage(context, CGRectMake(0,0,width,height), image.CGImage);
CGImageRef newImage = CGBitmapContextCreateImage(context);
if (newImage != NULL) {
result = [UIImage imageWithCGImage:newImage];
CGImageRelease(newImage);
}
CGContextRelease(context);
CGColorSpaceRelease(colorSpace);
return result;
}
struct RGBA {
unsigned char red;
unsigned char green;
unsigned char blue;
unsigned char alpha;
};
#define BLUE_ALPHA_THRESHOLD 128
#define BLUE_BRIGHTNESS_ADJUST 30
UIImage *blueTabBarItemFilter(UIImage *image) {
int width = image.size.width,
height = image.size.height;
UIImage *result = image;
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
if (colorSpace == NULL) {
return result;
}
CGContextRef context = CGBitmapContextCreate(NULL, width, height, 8, width * 4, colorSpace, kCGImageAlphaPremultipliedLast);
if (context == NULL) {
CGColorSpaceRelease(colorSpace);
return result;
}
UIImage *gradient = [UIImage imageNamed:@"selection_gradient.png"];
CGContextDrawImage(context, CGRectMake(-(gradient.size.width - width) / 2.0, -(gradient.size.height - height) / 2.0, gradient.size.width, gradient.size.height), gradient.CGImage);
CGContextSetBlendMode(context, kCGBlendModeDestinationIn);
CGContextDrawImage(context, CGRectMake(0,0,width,height), image.CGImage);
struct RGBA *pixels = CGBitmapContextGetData(context);
if (pixels != NULL) {
for (int y = 0; y < height; y++) {
for (int x = 0; x < width; x++) {
int offset = x+y*width;
if (pixels[offset].alpha >= BLUE_ALPHA_THRESHOLD &&
((x == 0 || x == width-1 || y == 0 || y == height-1) ||
(pixels[x+(y-1)*width].alpha < BLUE_ALPHA_THRESHOLD) ||
(pixels[x+1+y*width].alpha < BLUE_ALPHA_THRESHOLD) ||
(pixels[x+(y+1)*width].alpha < BLUE_ALPHA_THRESHOLD) ||
(pixels[x-1+y*width].alpha < BLUE_ALPHA_THRESHOLD))) {
pixels[offset].red = MIN(pixels[offset].red + BLUE_BRIGHTNESS_ADJUST,255);
pixels[offset].green = MIN(pixels[offset].green + BLUE_BRIGHTNESS_ADJUST,255);
pixels[offset].blue = MIN(pixels[offset].blue + BLUE_BRIGHTNESS_ADJUST,255);
}
}
}
CGImageRef image = CGBitmapContextCreateImage(context);
if (image != NULL) {
result = [UIImage imageWithCGImage:image];
CGImageRelease(image);
}
}
CGContextRelease(context);
CGColorSpaceRelease(colorSpace);
return result;
}
要使蓝色滤镜效果生效,您需要将此图片您的项目为selection_gradient.png:
此外,您可能想要播放与定义得到的效果完全如何你喜欢,我没有花很多时间来完善他们,虽然他们对我看起来不错。
To make the blue filter effect work you'll need to include this image in your project as "selection_gradient.png":
Also, you may want to play with the defines to get the effect exactly how you like, I didn't take much time to perfect them, though they look good enough to me.
当然,我不知道苹果应用的确切的过滤器,但我客人他们,他们看起来对我很好。我不知道这些功能是否与iPhone 4兼容,因为我只是在iPad应用程序中使用它们,但它不会很难根据您的喜好编辑它们。
Of course I don't know the exact filters that Apple applied, but I "guestimated" them and they look alright to me. I'm not sure if these functions are iPhone 4 compatible because I'm only using them in an iPad app, but it wouldn't be hard to edit them to your liking.
这篇关于如何重新创建UITabBarItem图像过滤器?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!