你不知道的UIImageView设置成图形的两种方案

最新推荐文章于 2022-01-07 15:18:27 发布

置顶 Abel_tu

最新推荐文章于 2022-01-07 15:18:27 发布

阅读量2.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： iOS开发文章标签： uiimageview 用户体验

本文链接：https://blog.youkuaiyun.com/abel_tu/article/details/17268991

iOS开发专栏收录该内容

26 篇文章

订阅专栏

本文介绍两种将iOS应用中的UIImageView图片转换为圆形头像的方法：一种是从布局角度调整，适用于一般需求；另一种是从UIImage层面进行操作，适用于追求高效体验的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自从iOS7出来之后，越来越多的应用头像设计成圆形了，圆形设计的头像看起来确实挻上流的。现在我给大家带来两种把UIImageView的图片设计成圆形。

方案一：从UIImageView的布局着手

我相信大家都知道对UIImageView的layer设置方法来把图片设计成圆形。

self.avatarImageView = [[ABELImageView alloc] init];self.avatarImageView.frame = CGRectMake(15, 6, 48, 48);self.avatarImageView.image = [UIImage imageNamed:@"DefaultAvatar.png"];self.avatarImageView.layer.masksToBounds = YES;// 这个必须设置为YES[self.avatarImageView.layer setCornerRadius:24.0];

方案二：从UIImage着手

我们想要图片显示成圆形，只要把UIImage弄成圆形就可以了。

UIImage的category

static void addRoundedRectToPath(CGContextRef context, CGRect rect, float ovalWidth,
                                 float ovalHeight)
{
    float fw, fh;
    
    if (ovalWidth == 0 || ovalHeight == 0)
    {
        CGContextAddRect(context, rect);
        return;
    }
    
    CGContextSaveGState(context);
    CGContextTranslateCTM(context, CGRectGetMinX(rect), CGRectGetMinY(rect));
    CGContextScaleCTM(context, ovalWidth, ovalHeight);
    fw = CGRectGetWidth(rect) / ovalWidth;
    fh = CGRectGetHeight(rect) / ovalHeight;
    
    CGContextMoveToPoint(context, fw, fh/2);  // Start at lower right corner
    CGContextAddArcToPoint(context, fw, fh, fw/2, fh, 1);  // Top right corner
    CGContextAddArcToPoint(context, 0, fh, 0, fh/2, 1); // Top left corner
    CGContextAddArcToPoint(context, 0, 0, fw/2, 0, 1); // Lower left corner
    CGContextAddArcToPoint(context, fw, 0, fw, fh/2, 1); // Back to lower right
    
    CGContextClosePath(context);
    CGContextRestoreGState(context);
}

+ (id)createRoundedRectImage:(UIImage*)image size:(CGSize)size radius:(NSInteger)radius
{
    // the size of CGContextRef
    int width = size.width;
    
    UIImage *img = image;
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    CGContextRef context = CGBitmapContextCreate(NULL, width, width, 8, 4 * width, colorSpace, 2);  //2 = kCGImageAlphaPremultipliedFirst
    CGRect rect = CGRectMake(0, 0, width, width);
    
    CGContextBeginPath(context);
    addRoundedRectToPath(context, rect, radius, radius);
    CGContextClosePath(context);
    CGContextClip(context);
    CGContextDrawImage(context, CGRectMake(0, 0, width, width), img.CGImage);
    CGImageRef imageMasked = CGBitmapContextCreateImage(context);
    img = [UIImage imageWithCGImage:imageMasked];
    
    CGContextRelease(context);
    CGColorSpaceRelease(colorSpace);
    CGImageRelease(imageMasked);
    
    return img;
}

实际应用

self.avatarImageView = [[ABELImageView alloc] init];
self.avatarImageView.frame = CGRectMake(15, 6, 48, 48);
self.avatarImageView.image = [UIImage createRoundedRectImage:image size:image.size radius:image.size.width / 2.0];

两种方法对比：第一种比较简单，也是大家比较常用的方法，但对用户体验不好，运行在UITableView上的时候会有一点卡的效果，当然对于不是要求特别高的应用可以忽略这一点。第二种是通过低层的绘图方式，优点是效率好，不会存在卡的效果，相对来说有一定的难度。