下面就来实现一下这种效果 圆形头像的绘制
先来看一下效果图
分析一下：
1、首先是需要画带有背景色的圆形头像
2、然后是需要画文字
3、文字是截取的字符串的一部分
4、不同的字符串，圆形的背景色是不一样的
5、对于中英文同样处理，英文的一个字符和中文的一个汉字同样算作一个字符
6、文字总是居中显示
好 有了这样几点 我们就可以开始画图了
看一下最终实现的效果图
首先 ，我们需要自定义一个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]; }
总结
好了，到这就大功告成了，大家都学会了吗？希望本文的内容对各位iOS开发者们能有所帮助，如果有疑问大家可以留言交流。谢谢大家对查字典教程网的支持。
【iOS实现带文字的圆形头像效果】相关文章：