iOS 制作圆形头像，带文字的圆形头像

ppsheep
1,717 阅读4分钟
原文链接： yangqian111.github.io

先来看一下钉钉的效果图
钉钉图片

分析一下：

  • 首先是需要画带有背景色的圆形头像
  • 然后是需要画文字
  • 文字是截取的字符串的一部分
  • 不同的字符串，圆形的背景色是不一样的
  • 对于中英文同样处理，英文的一个字符和中文的一个汉字同样算作一个字符
  • 文字总是居中显示
    好 有了这样几点 我们就可以开始画图了

看一下最终实现的效果图

我的图片

首先 ，我们需要自定义一个view当做自定义头像，在view的drawRect方法中进行图像的绘制

@interface RoundHeadView()
@property (nonatomic, copy) NSString *title;//需要绘制的标题
@property (nonatomic, assign) CGFloat colorPoint;//用户后面计算颜色的随机值
//设置文字
- (void)setTitle:(NSString *)title;
@end
@implementation RoundHeadView
-(instancetype)initWithFrame:(CGRect)frame{
    self = [super initWithFrame:frame];
    if (self) {
        self.backgroundColor = [UIColor clearColor];
    }
    return self;
}
@end

首先画一个带有背景颜色的圆形

-(void)drawRect:(CGRect)rect{
    
   	//一个不透明类型的Quartz 2D绘画环境,相当于一个画布,你可以在上面任意绘画
    	CGContextRef context = UIGraphicsGetCurrentContext();
    	[self caculateColor];//计算颜色
    
   	/*画圆*/
    	CGContextSetRGBFillColor (context,_colorPoint, 0.5, 0.5, 1.0);//设置填充颜色 颜色这里随机设置的，后面会根据文字来计算颜色
    
   	//填充圆，无边框
   	CGContextAddArc(context, self.frame.size.width/2.0, self.frame.size.width/2.0, self.frame.size.width/2.0, 0, 2*M_PI, 0); //添加一个圆
   	CGContextDrawPath(context, kCGPathFill);//绘制填充
   }

得到了不带文字的圆形头像

接下来 我们来画文字

首先需要计算一下文字的尺寸

将文字设置进来

- (void)setTitle:(NSString *)title{
    _title = [[self subStringWithLendth:2 string:title] copy];
    [self setNeedsDisplay];//调用这个方法  进行重新绘制 view会重新调用drawRect方法
}

截取文字

/**
 截取字符串，截取字符串最开始的两个  汉子和英文一样处理
 @param length 截取的字符长度（汉子和英文同样计算）
 @param string 需要截取的字符串
 @return 返回截取的字符串
 */
-(NSString *)subStringWithLendth:(int)length string:(NSString *)string{
    
    NSString *copyStr = [string copy];
    NSMutableString *realStr = [[NSMutableString alloc] init];
    
    for(int i = 0; i < copyStr.length; i++){
        if(length == 0){
            break;
        }
        unichar ch = [copyStr characterAtIndex:0];
        if (0x4e00 < ch  && ch < 0x9fff)//如何判断是汉字
        {
            //如果是汉子需要做其他处理  可以在这里做处理
        }
        //若为汉字
        [realStr appendString:[copyStr substringWithRange:NSMakeRange(i,1)]];
            
        length = length - 1;
    }
    return realStr;
}
/**
 计算文字的尺寸，在绘制图像时，保证文字总是处于图像的正中
 文字的尺寸可以自己计算  这里定义的是 宽度的1/3  我看使用起来比较合适  当然
 你可以自己定义的
 @return 文字的宽高
 */
- (CGSize)caculateLableSize{
    UILabel *lable = [[UILabel alloc] initWithFrame:CGRectZero];
    lable.font = [UIFont fontWithName:@"Arial-BoldMT" size:self.frame.size.width/3.0];
    lable.text = self.title;
    [lable sizeToFit];
    CGSize size = lable.frame.size;
    return size;
}

最后得到了 需要绘制在图像上的title

还需要做一步处理 就是根据文字的拼音或者其他的什么东西 来定义图像的背景色 我这里就用拼音了
首先需要做的是获取拼音

/**
 获取汉子拼音
 @param originalStr 原始中文字符
 @return 汉子的全拼
 */
- (NSString *)pinyin: (NSString *)originalStr{
    NSMutableString *str = [originalStr mutableCopy];
    CFStringTransform(( CFMutableStringRef)str, NULL, kCFStringTransformMandarinLatin, NO);
    CFStringTransform((CFMutableStringRef)str, NULL, kCFStringTransformStripDiacritics, NO);
    return [str stringByReplacingOccurrencesOfString:@" " withString:@""];
}

根据拼音计算颜色，随即一个颜色 这个方法 我自己瞎想的 一个颜色 当然你可以自己定义一个方法来计算颜色

/**
 随机一个颜色
 填充圆形头像的底色
 根据字符的拼音计算出的颜色
 */
- (void)caculateColor{
    if (_title.length == 0) {
        return;
    }
    if (_title.length>1) {
        NSString *firstStr = [_title substringWithRange:NSMakeRange(0,1)];
        NSString *secondStr = [_title substringWithRange:NSMakeRange(1, 1)];
        NSString *firstPinyin = [self pinyin:firstStr];
        NSString *secondPinyin = [self pinyin:secondStr];
        NSUInteger count = firstPinyin.length+secondPinyin.length;
        if (count>10) {
            count-=10;
            self.colorPoint = count/10.0;
        }else{
            self.colorPoint = count/10.0;
        }
    }else{
        NSString *firstStr = [_title substringWithRange:NSMakeRange(0,1)];
        NSString *firstPinyin = [self pinyin:firstStr];
        NSUInteger count = firstPinyin.length;
        self.colorPoint = count/10.0;
    }
}

需要的 我们都处理好了 这下可以直接画文字了 还是在drawRect方法中

-(void)drawRect:(CGRect)rect{
    
    //一个不透明类型的Quartz 2D绘画环境,相当于一个画布,你可以在上面任意绘画
    CGContextRef context = UIGraphicsGetCurrentContext();
    [self caculateColor];//计算颜色
    
    /*画圆*/
    CGContextSetRGBFillColor (context,_colorPoint, 0.5, 0.5, 1.0);//设置填充颜色
    //    CGContextSetRGBStrokeColor(context,red,green,blue,1.0);//画笔线的颜色
    
    //填充圆，无边框
    CGContextAddArc(context, self.frame.size.width/2.0, self.frame.size.width/2.0, self.frame.size.width/2.0, 0, 2*M_PI, 0); //添加一个圆
    CGContextDrawPath(context, kCGPathFill);//绘制填充
    
    
    /*写文字*/
    //    CGContextSetRGBFillColor (context,  1, 0, 0, 1.0);//设置填充颜色
    NSDictionary* dic = [NSDictionary dictionaryWithObjectsAndKeys:[UIFont fontWithName:@"Arial-BoldMT" size:self.frame.size.width/3.0], NSFontAttributeName,[UIColor whiteColor],NSForegroundColorAttributeName, nil];
    CGSize size = [self caculateLableSize];
    CGFloat X = (self.frame.size.width-size.width)/2.0;
    CGFloat Y = (self.frame.size.height-size.height)/2.0;
    [self.title drawInRect:CGRectMake(X, Y, self.frame.size.width, self.frame.size.width) withAttributes:dic];
}

测试一下


UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(10, 50, 300, 20)];
label.text = @"文字不同，背景颜色也不会相同";
[self.view addSubview:label];
NSArray *strs = @[@"为我",@"样的",@"好啊",@"H在",@"hc",@"2才",@"哈哈",@"打算打算打算的",@"还有人v",@"哈哈"];
for (int i=0; i<10; i++) {
    RoundHeadView *head = [[RoundHeadView alloc] initWithFrame:CGRectMake(30, 100+(40*i), 40, 40)];
    [head setTitle:strs[i]];
    [self.view addSubview:head];
}

我的图片

好大功告成

源代码放在 github.com/yangqian111…

avatar
文章
阅读
粉丝