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开发者们能有所帮助,如果有疑问大家可以留言交流。谢谢大家对我们的支持。

(0)

相关推荐

  • IOS实现圆形图片效果的两种方法

    先来看看效果图 ↓ 这个显示效果的做法有很多: 方法一: 使用两张图片, 作为边框的背景图片和中间的图片,然后使用imageView的cornerRadius来做圆, 具体代码如下: backImageView.layer.cornerRadius = backImageView.frame.size.width / 2; backImageView.layer.masksToBounds = YES; frontImageView.layer.cornerRadius = frontImage

  • iOS开发中Quartz2D控制圆形缩放和实现刷帧效果

    Quartz2D简要回顾 一.什么是Quartz2D Quartz 2D是⼀个二维绘图引擎,同时支持iOS和Mac系统 Quartz 2D能完成的工作: 绘制图形 : 线条\三角形\矩形\圆\弧等 绘制文字 绘制\生成图片(图像) 读取\生成PDF 截图\裁剪图片 自定义UI控件 二.Quartz2D在iOS开发中的价值 为了便于搭建美观的UI界面,iOS提供了UIKit框架,⾥⾯有各种各样的UI控件 UILabel:显⽰文字 UIImageView:显示图片 UIButton:同时显示图片和⽂

  • IOS使用progssview仿滴滴打车圆形计时

    实现类似在微信中使用的滴滴打车的progressview,实现效果如图 // // CCProgressView.h // HurricaneConsumer // // Created by wangcong on 15-3-25. // Copyright (c) 2015年 WangCong. All rights reserved. // #import <UIKit/UIKit.h> #import <QuartzCore/QuartzCore.h> /** * 动画开始

  • iOS如何裁剪圆形头像

    本文实例为大家介绍了iOS裁剪圆形头像的详细代码,供大家参考,具体内容如下 - (void)viewDidLoad { [super viewDidLoad]; //加载图片 UIImage *image = [UIImage imageNamed:@"菲哥"]; //获取图片尺寸 CGSize size = image.size; //开启位图上下文 UIGraphicsBeginImageContextWithOptions(size, NO, 0); //创建圆形路径 UIBez

  • 利用iOS绘制图片生成随机验证码示例代码

    先来看看效果图 实现方法 .h文件 @property (nonatomic, retain) NSArray *changeArray; @property (nonatomic, retain) NSMutableString *changeString; @property (nonatomic, retain) UILabel *codeLabel; -(void)changeCode; @end .m文件 @synthesize changeArray = _changeArray;

  • iOS开发之随机生成两圆之间的标准圆

    前言 相信很多社交产品中,肯定会存在寻找附近人或者附近商家的需求,类似下图,在大圆和小圆之间(橘色区域)生成一系列的随机圆,并且所有随机圆之间也不能有交集,我暂且称这种圆为标准圆. 关于这样的需要以前在做项目中有同事做过,虽然可以实现了上面的效果图,但是坐标及半径都是写死,从写死的数据随机取值,看上去是满足了,但是对于用户来说多次使用该功能时,肯定有一定的视觉疲倦,且写死的一些数据真的不好写,如果大圆或者小圆半径变化了,或者需要更多的标准圆,那怎么办呢?一脸懵逼???? 实现思路 思路一: 对于

  • 浅谈iOS中三种生成随机数方法

    ios 有如下三种随机数方法: //第一种 srand((unsigned)time(0)); //不加这句每次产生的随机数不变 int i = rand() % 5; //第二种 srandom(time(0)); int i = random() % 5; //第三种 int i = arc4random() % 5 ; 注: ① rand()和random()实际并不是一个真正的伪随机数发生器,在使用之前需要先初始化随机种子,否则每次生成的随机数一样. ② arc4random() 是一个

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

    下面就来实现一下这种效果   圆形头像的绘制 先来看一下效果图 分析一下: 1.首先是需要画带有背景色的圆形头像 2.然后是需要画文字 3.文字是截取的字符串的一部分 4.不同的字符串,圆形的背景色是不一样的 5.对于中英文同样处理,英文的一个字符和中文的一个汉字同样算作一个字符 6.文字总是居中显示 好 有了这样几点 我们就可以开始画图了 看一下最终实现的效果图 首先 ,我们需要自定义一个view当做自定义头像,在view的drawRect方法中进行图像的绘制 @interface Round

  • Android Studio实现带边框的圆形头像

    本文实例为大家分享了Android Studio实现带边框的圆形头像的具体代码,供大家参考,具体内容如下 效果显示: (没有边框的) (有边框的) 1.创建自定义ImagView控件 (1).没有边框的 package chenglong.activitytest.pengintohospital.utils; import android.content.Context; import android.graphics.Bitmap; import android.graphics.Bitma

  • 利用Android中BitmapShader制作自带边框的圆形头像

    效果如下: BitmapShader 的简单介绍 关于 Shader是什么,Shader的种类有哪几种以及如何使用不属于本文范畴,对这方面不是很了解的同学,建议先去学习一下 Shader 的基本使用. BitmapShader主要的作用就是 通过Paint对象,对 画布进行指定的Bitmap填充,实现一系列效果,可以有以下三种模式进行选择 1.CLAMP - 拉伸,这里拉伸的是图片的最后一个元素,不断地重复,这个效果,在图片比较小,而所要画的面积比较大的时候会比较明显. 2.REPEAT - 重

  • Android实现带圆环的圆形头像

    在最近写的一个天气APP中用到了圆形头像这样的一个样式,中间是圆形的头像(被圆形切割的图片),周围是一个带颜色的圆环.如下图所示,今天就来说一所它的实现过程. 它的实现也不是特别困难,其实就是用到了BitmapShader这个用法,然后包装成一个paint,最后画出一个圆. 1>实现一个Paint画出以圆形背景的圆. 2>以同样的圆形画出一个稍微小一点的圆,作为它的有色圆环.(此圆和上一个圆颜色不同). 3>用BitmapShader实现一个新的圆,和第二个圆的大小圆心一致. (Bitm

  • iOS点击文字按钮变转圈加载效果

    本文实例为大家分享了iOS点击文字按钮变转圈加载效果的相关代码,供大家参考,具体内容如下 实现效果: 实现代码: // 画弧线 - (void)drawHalfCircle { loadingLayer = [self drawCircle]; // 这个是用于指定画笔的开始与结束点 loadingLayer.strokeStart = 0.0; loadingLayer.strokeEnd = 0.75; } - (CAShapeLayer *)drawCircle { CGRect fram

  • iOS 屏幕解锁文字动画效果

    CAGradientLayer相信大家都比较熟悉,关于其如何使用,我就不在这里废话了,网上有很多介绍,想详细了解的话,可以去看看.我只简单说下如何利用CAGradientLayer制作屏幕解锁文字动画效果. 1.创建一个CAGradientLayer对象gradLayer,设置它的frame和label.bounds一样(这里要注意一下是Label的bounds不是frame); 2.这里我给gradLayer.colors一共设置了三个颜色值,首尾颜色透明度设置成0.3,中间的颜色值透明度保持

  • iOS自带动画效果的实例代码

     1.普通动画: [UIView beginAnimations:nil context:nil]; [UIView setAnimationDuration:2]; frame.origin.x += 150; [img setFrame:frame]; [UIView commitAnimations]; 2.连续动画(一系列图像): NSArray *myImages = [NSArray arrayWithObjects: [UIImage imageNamed:@"myImage1.p

  • javascript弹出带文字信息的提示框效果

    本文实例讲述了javascript弹出带文字信息的提示框效果.分享给大家供大家参考,具体如下: tooltips.js: // position of the tooltip relative to the mouse in pixel // var offsetx = 12; var offsety = 8; function newelement(newid) { if(document.createElement) { var el = document.createElement('di

随机推荐