前言：最近项目遇到这种需求，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;
解决！
