重新創建所選的UITabBarItem邊框

Question

我想重新創建一個標籤欄，但是我偶然發現了這個問題。正如你可以在下面的圖片中看到的，我的當前（右圖）所選擇的標籤欄項目比UITabBar的項目明顯不那麼清晰或清晰。注意左側圖標（我不知道該怎麼做）周圍的小1點邊框以及圖標中的漸變，這在我的視覺中非常明顯。我已經將Core Graphics和Core Images Filters視爲可能的方法，但似乎無法獲得這種效果。我發現一箇舊的thread這是我想要的一部分，但答案似乎並不適用於我，並需要通過圖像像素（我不知道它是否需要）的手動循環。有人能幫我嗎？

這是目前我使用的代碼，順便說一句，歡迎您來糾正一些錯誤，如果你看到任何，因爲我開始核芯顯卡：

- (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是具有4像素寬橫佔據黑色整個事情在透明背景上一個30×30個圖像：這使得像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. 
} 

，但我沒有邊界輪廓尚未破裂，但如果我不破解它會更新