关闭

iOS开发 如何在Label中显示图片-图文混排

标签: ios开发图片标签label
957人阅读 评论(0) 收藏 举报

iOS开发 如何在Label中显示图片-图文混排

字数729 阅读1338 评论22 

在实际项目开发过程中,我们常会遇到一段文字中既要有图片又要有文字,例如我们经常使用的QQ、微信的聊天对话框中,表情和文字共存就是一种典型的图文混排。


QQ20150827-1.png


可以直接使用Quart2D,直接在Label的draw方法中画图片上去,但是这种方法成本比较高,我们推荐使用text自带的属性来做。

要做到图中在文字中插入表情的效果,首先我们得来了解一下一个叫富文本的东西。所谓富文本,我的理解就是一个丰富多彩的文本,多彩体现在可以在一个text中显示出不同的文字,加入一些色彩丰富的图片,但它能做到的还可以修改不同文字的字体加入下划线,丰富多采。


QQ20150827-2.png


我们都知道label有text这个文本属性,要做到富文本效果,就需要用到一个并不是所有人都知道的富文本属性 attributedText(textView、textField中都有这个属性)

1.修改文字的样式

步骤如下:

  • NSMutableAttributedString 创建一个富文本对象
  • 调用富文本的对象方法 addAttribute:(NSString * )value:(id) range:(NSRange) 来修改对应range范围中 attribute属性的 value值
      // 创建一个富文本
    NSMutableAttributedString *attri =     [[NSMutableAttributedString alloc] initWithString:@"哈哈哈哈哈123456789"];

    // 修改富文本中的不同文字的样式
    [attri addAttribute:NSForegroundColorAttributeName value:[UIColor blueColor] range:NSMakeRange(0, 5)];
    [attri addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:20] range:NSMakeRange(0, 5)];

    // 设置数字为红色
    [attri addAttribute:NSForegroundColorAttributeName value:[UIColor redColor] range:NSMakeRange(5, 9)];
    [attri addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:30] range:NSMakeRange(5, 9)];

在这段代码中,分别设置了range为(0,5)的文字,也就是哈哈哈哈哈为font20号字体大小,颜色为蓝色的样式;设置了range为(6,9)也就是123456789为font30号字体大小,颜色为红色样式

2.文字中添加图片

步骤如下:

  • 创建NSTextAttachment的对象,用来装在图片
  • NSTextAttachment对象的image属性设置为想要使用的图片
  • 设置NSTextAttachment对象bounds大小,也就是要显示的图片的大小
  • [NSAttributedString attributedStringWithAttachment:attch]方法,将图片添加到富文本上

      // 添加表情
      NSTextAttachment *attch = [[NSTextAttachment alloc] init];
      // 表情图片
          attch.image = [UIImage imageNamed:@"d_aini"];
      // 设置图片大小
          attch.bounds = CGRectMake(0, 0, 32, 32);
    
      // 创建带有图片的富文本
          NSAttributedString *string = [NSAttributedString attributedStringWithAttachment:attch];
      [attri appendAttributedString:string];
    
      // 用label的attributedText属性来使用富文本
      self.textLabel.attributedText = attri;

0
0
查看评论

IOS--如何在UILabel上显示图片

在实际项目开发过程中,我们常会遇到一段文字中既要有图片又要有文字,例如我们经常使用的QQ、微信的聊天对话框中,表情和文字共存就是一种典型的图文混排。 要做到图中在文字中插入表情的效果,首先我们得来了解一下一个叫富文本的东西。所谓富文本,我的理解就是一个丰富多彩的文本,多彩体现在可以在一个text中显...
  • lgx_admin
  • lgx_admin
  • 2016-06-01 19:34
  • 4198

【iOS开发】在UILabel中同时显示图片和文字,"混排"。

一、 用户场景:实现微信、QQ的聊天对话框中,文字和表情同时存在功能,即图文混排。二、思路描述:(1) 使用富文本方法UILabel有text这个文本属性,要做到富文本效果,就需要用到一个并不是所有人都知道的富文本属性 attributedText(textView、textField中都有这个属性...
  • Hanrovey
  • Hanrovey
  • 2016-10-27 17:29
  • 3344

iOS富文本编辑(在label里显示文字和图片)

在开始写之前先看一下效果图 在此效果图中有富文本中指定的位置添加图片,还有最后位置添加的图片信息 代码如下    1:创建富文本,设置样式 // 添加单个属性 //- (void)addAttribute:(NSString *)name value:(id)val...
  • whuizhou
  • whuizhou
  • 2016-01-04 18:38
  • 2880

适配ios7的时候仿UIAlertView弹框效果,修改内部的label和button的属性

今天适配ios7的时候,需要有一个弹框的效果  在xcode8(ios10)还没有出来的现在,还得苦逼的适配ios7,里面就有一些让人无语的坑,其中弹框效果就是一个,对于想要实现自定义弹框的效果是需要花上一定的功夫的    如下图:   ...
  • LIUitcast
  • LIUitcast
  • 2016-07-22 22:01
  • 2120

ios uilabel显示图片和各种属性说明 uilabel很强大!!!!

代码如下 方法调用如下 NSString * Str = @"中国人民解放军万岁,中华人民共和国万岁,万岁!"; self.attrobiuteLabel.attributedText = [self stringWithUIImage:Str];// 添加单个属性 ...
  • qian521kun521
  • qian521kun521
  • 2017-02-16 10:43
  • 1266

iOS开发 如何在Label中显示图片-图文混排

在实际项目开发过程中,我们常会遇到一段文字中既要有图片又要有文字,例如我们经常使用的QQ、微信的聊天对话框中,表情和文字共存就是一种典型的图文混排。 QQ20150827-1.png 可以直接使用Quart2D,直接在Label的draw方法中画图片上去,但是这种方法成本比较高,我们推荐...
  • st646889325
  • st646889325
  • 2016-11-03 09:08
  • 288

iOS富文本编辑(在label里显示文字和图片)

代码如下 方法调用如下 NSString * Str = @"中国人民解放军万岁,中华人民共和国万岁,万岁!"; self.attrobiuteLabel.attributedText = [self stringWithUIImage:Str]; // 添加单个...
  • st646889325
  • st646889325
  • 2016-09-14 15:27
  • 1621

iOS 开发笔记---在Label中显示图片

小技巧,如何在Label中显示图片 这个需求其实是有的,比如QQ聊天界面里面发送的信息,可以用label来显示文字(也可以用button显示),但是有时候用户可能会发送图片。如果能让Label遇到文字就显示文字,遇到图片就显示图片就好了。可能有的人会说用Quartz2D,直接在Label的...
  • a466468841
  • a466468841
  • 2015-07-02 10:23
  • 909

UILabel 图文混排的简单实现

使用UILabel的attributedText属性来实现(textView、textField中都有这个属性) 代码很简单,就不再赘述了。- (void)viewDidLoad { [super viewDidLoad]; UILabel *label = [[UILabel al...
  • cyuyanenen
  • cyuyanenen
  • 2016-05-19 10:07
  • 1911

UILabel 富文本 显示文字和图片

//    在UILabel上显示文字和图片     //UIlabel 富文本 字体显示不同颜色     UILabel *testLabel = [[UILabel alloc]initWithFrame:...
  • u013250412
  • u013250412
  • 2016-10-10 13:24
  • 1466
    个人资料
    • 访问:59801次
    • 积分:939
    • 等级:
    • 排名:千里之外
    • 原创:18篇
    • 转载:96篇
    • 译文:0篇
    • 评论:4条
    最新评论