重新创建选定的 UITabBarItem 边框

Question

我想重新创建一个标签栏，但我偶然发现了这个问题。正如您在下面的图像中看到的，我当前（右图）选择的选项卡栏项比 UITabBar 中的选项更不清晰或更锐利。请注意左侧图标周围的小 1 点边框（我不知道该怎么做）以及图标内部的渐变，这在我的身上很明显。我已经将 Core Graphics 和 Core Images Filters 视为可能的方法，但似乎无法获得这种效果。我找到了一个较旧的thread，这是我想要的，但答案似乎对我不起作用，需要手动循环遍历图像的像素（我不知道是否需要） .有人可以帮我吗？

这是我目前正在使用的代码，顺便说一句，如果您发现任何错误，欢迎您更正，因为我从 Core Graphics 开始：

- (void)drawRect:(CGRect)rect
{
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    CGContextSaveGState(context);
    {
        /* Adjust for different coordinate systems from UIKit and Core Graphics and center the image */
        CGContextTranslateCTM(context, self.bounds.size.width/2.0 - self.image.size.width/2.0, self.bounds.size.height - self.bounds.size.height/2.0 + self.image.size.height/2.0);
        CGContextScaleCTM(context, 1.0f, -1.0f);

        CGRect rect = CGRectMake(0, 0, self.image.size.width, self.image.size.height);

        /* Add a drop shadow */
        UIColor *dropShadowColor = [UIColor colorWithRed:0.0f green:0.0f blue:0.0f alpha:0.8f];
        CGContextSetShadowWithColor(context, CGSizeMake(0, 1), 5, dropShadowColor.CGColor);

        /* Draw the original image */
        CGContextDrawImage(context, rect, self.image.CGImage);

        /* Clip to the original image, so that we only draw the shadows on the
           inside of the image but nothing outside. */
        CGContextClipToMask(context, rect, self.image.CGImage);

        if(self.isSelected){
            /* draw background image */
            CGImageRef background = [UIImage imageNamed:@"UITabBarBlueGradient"].CGImage;
            CGContextDrawImage(context, rect, background);
        }
        else{
            /* draw background color to unselected items */
            CGColorRef backgroundColor = [UIColor colorWithRed:95/255.0 green:95/255.0 blue:95/255.0 alpha:1].CGColor;
            CGContextSetFillColorWithColor(context, backgroundColor);
            CGContextFillRect(context, rect);

            /* location of the gradient's colors */
            CGFloat locations[] = { 0.0, 1.0 };

            NSArray *colors = [NSArray arrayWithObjects:(id)[UIColor colorWithRed:1 green:1 blue:1 alpha:0].CGColor, (id)[UIColor colorWithRed:1 green:1 blue:1 alpha:0.6].CGColor, nil];

            /* create the gradient with colors and locations */
            CGGradientRef gradient = CGGradientCreateWithColors(colorSpace,(__bridge CFArrayRef) colors, locations);
            {
                /* start and end points of the gradient */
                CGPoint startPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMinY(rect));
                CGPoint endPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMaxY(rect));
                /* draw gradient */
                CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, 0);
            }
            CGGradientRelease(gradient);
        }
    }
    CGContextRestoreGState(context);
    CGColorSpaceRelease(colorSpace);
}

Answer 1

我也在努力解决这个问题，您可能可以进行的优化不是每次调用 drawrect 时都渲染 UIImage，您可以将 UIImage 对象保存在 ivar 中，只需更新 UIImageView.image 属性以显示它们。

我正在用这样的“闪耀”生成我的图像：

（plus_icon.png 是一个 30 x 30 的图像，4 px 宽的十字在透明背景上以黑色占据整个物体： 在 imageView 2 和 4 中呈现如下：

-(UIImage *)tabBarImage{

    UIGraphicsBeginImageContext(CGSizeMake(60, 60));

    UIImage *image = [UIImage imageNamed:@"plus_icon"];

    CGContextRef ctx = UIGraphicsGetCurrentContext();
    CGContextSetFillColorWithColor(ctx, [[UIColor clearColor] CGColor]);
    CGContextFillRect(ctx, CGRectMake(0, 0, 60, 60));

    CGRect imageRect = CGRectMake(15, 15, 30, 30);
    CGContextDrawImage(ctx, imageRect, [image CGImage]);

    image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return image;
}

-(UIImage *)sourceImage{
    UIGraphicsBeginImageContext(CGSizeMake(60.0, 60.0));

    CGContextRef context = UIGraphicsGetCurrentContext();

    size_t num_locations = 2;
    CGFloat locations[2] = { 0.3, 1.0 };

    CGFloat components[8] = {NC(72), NC(122), NC(229), 1.0, NC(110), NC(202), NC(255), 1.0 };

    CGColorSpaceRef cspace;
    CGGradientRef gradient;
    cspace = CGColorSpaceCreateDeviceRGB();
    gradient = CGGradientCreateWithColorComponents (cspace, components, locations, num_locations);

    CGPoint sPoint = CGPointMake(0.0, 15.0);
    CGPoint ePoint = CGPointMake(0.0, 45.0);
    CGContextDrawLinearGradient (context, gradient, sPoint, ePoint, kCGGradientDrawsBeforeStartLocation| kCGGradientDrawsAfterEndLocation);
    CGGradientRelease(gradient);
    CGColorSpaceRelease(cspace);
    [self addShineToContext:context];

    UIImage * image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();    

    return image;
}

-(void)addShineToContext:(CGContextRef) context{
    CGContextSaveGState(context);
    size_t num_locations = 2;
    CGFloat locations[2] = { 0.3, 0.7};
    CGFloat components[8] = {1.0, 1.0, 1.0, 0.8, 1.0, 1.0, 1.0, 0.0};//{0.82, 0.82, 0.82, 0.4,  0.92, 0.92, 0.92, .8 };

    CGColorSpaceRef cspace;
    CGGradientRef gradient;
    cspace = CGColorSpaceCreateDeviceRGB();
    gradient = CGGradientCreateWithColorComponents (cspace, components, locations, num_locations);

    CGPoint sPoint = CGPointMake(25.0f, 15.0);
    CGPoint ePoint = CGPointMake(35.0f, 44.0f);


    [self addShineClip:context];

    CGContextDrawLinearGradient(context, gradient, sPoint, ePoint, kCGGradientDrawsBeforeStartLocation);
//    CGContextSetFillColorWithColor(context, [[UIColor redColor] CGColor]);
//    CGContextFillRect(context, CGRectMake(15,15, 30, 30));

    CGColorSpaceRelease(cspace);
    CGGradientRelease(gradient);

    CGContextRestoreGState(context);

}

-(void)addShineClip:(CGContextRef)context{
    CGContextMoveToPoint(context, 15, 35);
    CGContextAddQuadCurveToPoint(context, 25, 30, 45, 28);
    CGContextAddLineToPoint(context, 45, 15);
    CGContextAddLineToPoint(context, 15, 15);
    CGContextClosePath(context);
    CGContextClip(context);
}

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    self.imageView1.image = [self compositeOverSlate:[self drawTabBarOverSourceWithBlend:kCGBlendModeSourceIn]];
    self.imageView2.image = [self compositeOverSlate:[self drawTabBarOverSourceWithBlend:kCGBlendModeDestinationIn]];
    self.imageView3.image = [self compositeOverSlate:[self drawTabBarOverSourceWithBlend:kCGBlendModeSourceAtop]];
    self.imageView4.image = [self compositeOverSlate:[self drawTabBarOverSourceWithBlend:kCGBlendModeDestinationAtop]];
}

-(UIImage *)compositeOverSlate:(UIImage *)image{
    UIGraphicsBeginImageContext(image.size);
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    CGRect imageRect = CGRectMake(0, 0, 0, 0);
    imageRect.size = image.size;

    CGContextSetFillColorWithColor(ctx, [[UIColor darkGrayColor] CGColor]);

    CGContextFillRect(ctx, imageRect);
    CGContextSetShadow(ctx, CGSizeMake(-1.0, 2.0), .5);
    CGContextDrawImage(ctx, imageRect, [image CGImage]);

    UIImage *result = UIGraphicsGetImageFromCurrentImageContext();

    UIGraphicsEndImageContext();
    return result;
}

-(UIImage *)drawTabBarOverSourceWithBlend:(CGBlendMode)blendMode{
    UIGraphicsBeginImageContext(CGSizeMake(60,60));
    CGContextRef ctx = UIGraphicsGetCurrentContext();

    CGContextDrawImage(ctx, CGRectMake(0, 0, 60.0, 60.0), [[self sourceImage] CGImage]);

    CGContextSetBlendMode(ctx, blendMode);
    CGContextDrawImage(ctx, CGRectMake(0, 0, 60.0, 60.0), [[self tabBarImage] CGImage]);

    UIImage *result = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return result;
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

但我还没有破解边框轮廓，但如果我破解它会更新。