iOS 原生Tabbar上实现圆弧按钮效果并实时更换网络图片

前言：最近项目遇到这种需求，Tabbar上有一个圆弧按钮，居上，而且要根据操作动态更换图片，图片是网络图片。

D9D3EA1F-333B-42D2-B27C-824C8254A860.png

如果自定义tabbar的话，图片+按钮的方式也能实现。但自定义tabbar容易出现各种各样的问题，不过万不得已还是用原生的tabbar比较好。
我尝试了两种方式
一、处理图片，再赋值给controller.tabBarItem.image
1.通过url获取图片，再处理图片：压缩图片到指定大小并绘制边框

//isUrl 是否是网络图片
- (UIImage *)imageWithBorder:(CGFloat)borderW color:(UIColor *)color image:(NSString *)imageName isUrl:(BOOL)isUrl {
   
    // 增加边框 生成边框的宽度 w = image.width + 2*borderW 高度同理
    UIImage *image ;
    
    if (isUrl) {
        
        NSData *data =[ [NSData alloc] initWithContentsOfURL:FullImageUrl(imageName)];
        
        image = [[UIImage alloc] initWithData:data];
        //tabbar上的图片需要的尺寸 44x44
        CGSize size22 = CGSizeMake(44, 44);
        
        UIGraphicsBeginImageContext(size22);

        [image drawInRect:CGRectMake(0, 0, size22.width, size22.height)];

        UIImage *newImage2 = UIGraphicsGetImageFromCurrentImageContext();

        UIGraphicsEndImageContext();

        image = newImage2;
        
    }else{
        image = [UIImage imageNamed:imageName];
    }
    
    // 开启上下文
    CGSize size = CGSizeMake(image.size.width + 2 * borderW, image.size.height + 2 * borderW);
    UIGraphicsBeginImageContextWithOptions(size, NO, 0);

    // 绘制大圆，显示出来
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, size.width, size.height)];
    [[UIColor whiteColor] set];
    [path fill];

    // 绘小圆
    UIBezierPath *clipPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(borderW, borderW, image.size.width, image.size.height)];
    // 设置为裁剪路径
    [clipPath addClip];

    // 画图
    [image drawAtPoint:CGPointMake(borderW, borderW)];
    UIImage *newImage =  UIGraphicsGetImageFromCurrentImageContext();

    UIGraphicsEndImageContext();
   
    return newImage;
   
}

2.将处理过的图片赋值给控制器的tabBarItem

childVc.tabBarItem.image = [image imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
        childVc.tabBarItem.selectedImage = [selectedImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];

3.设置子控制器tabBarItem的偏移量

 UIEdgeInsets insets = vc3.tabBarItem.imageInsets;
  insets.top = -10;
 vc3.tabBarItem.imageInsets = insets;

这种方式能实现圆弧效果以及实时更换tabbar图片。但是网络图片大小动辄几百x几百。压缩到44x44大小之后图片非常模糊。而第二种方法完美解决这个bug。

二、在原生tabbar上贴上一个圆形view，盖住中间位置
1.将中间控制器的tabbarItem的image置空

childVc.tabBarItem.image = nil;
childVc.tabBarItem.selectedImage = nil;
childVc.tabBarItem.title = @"";

2.在tabbar上贴上一个view

-(void)setStarImgView{
    
    UIView *view = [[UIView alloc] initWithFrame:CGRectMake(50, 0, 50, 50)];
    view.backgroundColor = [UIColor whiteColor];
    
    CGRect frame = self.tabBar.frame;
//    NSLog(@"=======!!======");
//    NSLog(@"%f %f %f %f",frame.origin.x,frame.origin.y,frame.size.width,frame.size.height);
    view.frame = CGRectMake((frame.size.width/2.0)-28, -10, 56, 56);
    view.layer.cornerRadius = 28;
    [self.tabBar addSubview:view];
    
    UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(5, 5, 46, 46)];
    imageView.layer.cornerRadius = 23.0;
    imageView.layer.masksToBounds = YES;
    imageView.layer.borderColor = [UIColor clearColor].CGColor;
    imageView.layer.borderWidth = 1.0;
    [imageView setContentMode:UIViewContentModeScaleAspectFill];
    _startImgView = imageView;
    [view addSubview:imageView];
}

3.根据操作更换图片和边框颜色

 [_startImgView sd_setImageWithURL:[NSURL URLWithString:imgPath] placeholderImage:[UIImage imageNamed:@"tabbar_item3_nornal"]];
 _startImgView.layer.borderColor = HEXCOLOR(0x8F5FF5).CGColor;

解决！

想知道更多，请查看六牛！