iOS实现带文字的圆形头像效果

下面就来实现一下这种效果   圆形头像的绘制

先来看一下效果图

分析一下:

      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实现带文字的圆形头像效果 的全部内容, 来源链接: utcz.com/z/340248.html

回到顶部