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

转载 2015年11月19日 20:20:20

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;

相关文章推荐

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

在实际项目开发过程中,我们常会遇到一段文字中既要有图片又要有文字,例如我们经常使用的QQ、微信的聊天对话框中,表情和文字共存就是一种典型的图文混排。 QQ20150827-1.png...
  • args_
  • args_
  • 2016年06月16日 17:18
  • 662

iOS开发 关于图文混排

说到图文混排,马上想到的是yo

IOS开发UI篇--一个支持图文混排的ActionSheet

一、简介UIActionSheet是IOS提供给我们开发者的底部弹出菜单控件,一般用于菜单选择、操作确认、删除确认等功能。IOS官方提供的以下方式对UIActionView进行实例化:- (insta...

【无限互联】ios开发之图文混排研究

本节要点: 1.理解图文混排的概念。 2.研究FTCoreText框架的实现原理。 3.演示使用FTCoreText框架实现图文混排的demo,以及效果图。 图文混排的概念 ...

[iOS开发]关于仿网易新闻中详细页图文混排功能的实现

关于仿网易新闻中详细页图文混排功能的实现 最近在了解关于新闻内容的图文混排的效果,网上有人开源一个仿网易新闻的代码,本文就是简单记录学习其详细页面显示的效果实现; 下载地址:https://githu...
  • qcx321
  • qcx321
  • 2016年08月12日 19:59
  • 4551

iOS Label的图文混排

最近做项目,要达到一个效果,图片加文字,文字是从后台获取的数据,长度不确定,但是要求图片文字挨着(imageView.right 和 label.leading相等),本人技术欠缺,所以刚开始实现的效...

图文混排 label3中自适应

  • 2016年05月17日 18:17
  • 11.09MB
  • 下载

android 图文混排,显示网络图片

在TextView中显示如下文本: "content":"使用editor.getContent()方法可以获得编辑器的内容内容为:原理实践编辑富文本编辑器,Rich Text Editor, 简称...

TextView显示Gif图片实现图文混排

TextView显示Gif图片实现图文混排

TextView图文混排,显示添加的图片,三种常用方法,亲测

图文混排,文字就不说了,主要是显示图片的方法 1、TextView使用ImageSpan显示图片 [java] view plainco...
  • judyge
  • judyge
  • 2015年05月31日 10:20
  • 1779
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:iOS开发 如何在Label中显示图片-图文混排
举报原因:
原因补充:

(最多只允许输入30个字)