iOS 表情键盘+gif聊天图文混排,看我的就够了

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了iOS 表情键盘+gif聊天图文混排,看我的就够了相关的知识,希望对你有一定的参考价值。

参考技术A 之前做过 【OC版本】 和 【swift版本】 图文混排和表情键盘,说实在的很low,特别是键盘,整体只是实现了效果并没有封装,很难集成使用!而且之前是使用的附件做的并不支持gif表情,我尝试各种方法,想实现类似qq的丝滑gif表情体验,真的不容易;经过各种尝试和努力最终基于 【YYText】 实现了类似qq的gif表情聊天方案,大量的表情也不会卡顿!而且这次的键盘做了比较全面的封装集成起来很方便!

单行输入:

多行输入:

键盘的集成方法:

项目github地址: LiuqsEmoticonkeyboard

2. LiuqsEmotionPageView 键盘的分页类用来放表情按钮,内部主要处理按所在行列位置的计算,需要给出当前是第几页,用来加载表情:

3. LiuqsKeyBoardHeader 全局宏定义的类。

4. LiuqsTopBarView 键盘上输入框和一些切换按钮的实体类,这个可以根据需求自定义:

5. LiuqsButton 键盘上的表情按钮,自定义是为了更好的和图片一一对应,更容易处理。

6. NSAttributedString+LiuqsExtension 富文本的分类:

getPlainString 方法主要是通过遍历富文本中的附件(在这里是指表情图片)并使用普通的字符串(比如:[大笑])替换,得到普通的字符串编码,拿字符串编码去通讯,比如调用接口发消息;
举个栗子:
转换过的字符串是这样滴: 好害羞[害羞]!
用来展示的效果是这样滴:

7. LiuqsTextAttachment 自定义附件类,继承于NSTextAttachment。

8. LiuqsDecoder 转码的核心类:

主要方法:

详细说一下内部的实现:
首先是静态属性:

到此基本就说完了!YYText有很多强大的功能,大家自己可以随意扩展,在这里只用到了imageView附件。
可能讲不够全面,具体细节可以看 项目demo !
写的比较辛苦,如果对你有用希望可以支持一下,记得给个star哦!
有任何意见和建议都可以提出来,我的邮箱: liuquanshui@100tal.com

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

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

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

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

我们都知道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 表情键盘+gif聊天图文混排,看我的就够了的主要内容,如果未能解决你的问题,请参考以下文章

关于mac与windows的文件共享(看我的就够了)

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

10000+ gif表情包不是梦,get这一篇文就够了!!!小哥哥快到碗里来,再也不怕斗图没有表情包了

android实现gif图与文字混排

[UGUI]图文混排:标签制定和解析

关于javascript的原型和原型链,看我就够了