iOS Tabbar 实现自定义图片放置用户头像

最近产品脑洞大开，需要在 tabbar “我的” 里面放置用户头像的需求。如下图：

效果图

思路先看设置 tabbarItem 代码找思路：

    UITabBarItem *item4 = [[UITabBarItem alloc] initWithTitle:@"我"
                                        image:[[UIImage imageNamed:@"tab_me_normal"]
                                 imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]
                                selectedImage:[[UIImage imageNamed:@"tab_me_click"]
                       imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];

分析代码我们可以知道，入口只有 image 和 selectImage，那我们只能把圆角和和边框绘制好了再放进去了。

第一步：缩放头像至合适大小：

+ (UIImage *)reSizeImage:(UIImage *)image toSize:(CGSize)reSize
{
    UIGraphicsBeginImageContext(CGSizeMake(reSize.width, reSize.height));
    [image drawInRect:CGRectMake(0, 0, reSize.width, reSize.height)];
    UIImage *reSizeImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return reSizeImage;
}

第二步：绘制成圆形以及添加圆角：

+ (UIImage *)imageWithBorderW:(CGFloat)borderW borderColor:(UIColor *)color image:(UIImage *)image{
    //- 1.开启一个和原始图片一样大小的位图上下文.
    CGSize size = CGSizeMake(image.size.width + 2 *borderW, image.size.height + 2 * borderW);
    UIGraphicsBeginImageContextWithOptions(size,NO,0);
    //-  2.绘制一个大圆,填充
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, size.width, size.height)];
    [color set];
    [path fill];
    //-  3.添加一个裁剪区域.
    path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(borderW, borderW, image.size.width, image.size.height)];
    [path addClip];
    //-  4.把图片绘制到裁剪区域当中.
    [image drawAtPoint:CGPointMake(borderW, borderW)];
    //-  5.生成一张新图片.
    UIImage *clipImage = UIGraphicsGetImageFromCurrentImageContext();
    //-  6.关闭上下文.
    UIGraphicsEndImageContext();
    return clipImage;
}

最后调用代码更新 tabbarItem

NSString *avartUrl = [DDLoadRemoteImageHelper wrapString:[DDGlobalData sharedData].userModel.avatar];
[[SDWebImageDownloader sharedDownloader] downloadImageWithURL:[NSURL URLWithString:avartUrl] options:0 progress:^(NSInteger receivedSize, NSInteger expectedSize, NSURL * _Nullable targetURL) {
    
} completed:^(UIImage * _Nullable image, NSData * _Nullable data, NSError * _Nullable error, BOOL finished) {
    NSLog(@"image avatar download success");
    image = [DDAppHelper reSizeImage:image toSize:CGSizeMake(20, 20)];
    UIImage *normalImage =[DDAppHelper imageWithBorderW:2 borderColor:[UIColor colorWithHexString:@"B4B7B9"] image:image];
    normalImage = [normalImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    
    UIImage *selectImage =[DDAppHelper imageWithBorderW:2 borderColor:[UIColor colorWithHexString:@"13BD71"] image:image];
    selectImage = [selectImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];

    [DDGlobalData sharedData].item4.image = normalImage;
    [DDGlobalData sharedData].item4.selectedImage = selectImage;
}];

大功告成~~!

实际效果

码字不易，如果帮到您，请点个赞再走呗。😑

iOS Tabbar 实现自定义图片 放置用户头像

推荐阅读更多精彩内容

iOS Tabbar 实现自定义图片放置用户头像