iOS高仿微信表情输入功能代码分享

最近项目需求,要实现一个类似微信的的表情输入,于是把微信的表情扒拉出来,实现了一把。可以从这里下载源码。看起来表情输入没有多少东西,不外乎就是用NSTextAttachment来实现图文混排,结果在实现的过程中遇到了很多小问题,接下来会一一介绍遇到过的坑。先上一张效果图:

一、实现表情选择View(WKExpressionView)

具体的实现就不细说了,主要功能就是点击表情时,将对应表情的图片名称通知给delegate。

二、实现表情textView(WKExpressionTextView)

WKExpressionTextView继承自UITextView, 提供
- (void)setExpressionWithImageName:(NSString *)imageName fontSize:(CGFloat)fontSize方法,用于根据图片插入表情。 具体实现:

//富文本
WKExpressionTextAttachment *attachment = [[WKExpressionTextAttachment alloc] initWithData:nil ofType:nil];
UIImage *image = [UIImage imageNamed:imageName];
attachment.image = image;
attachment.text = [WKExpressionTool getExpressionStringWithImageName:imageName];
attachment.bounds = CGRectMake(0, 0, fontSize, fontSize);
NSAttributedString *insertAttributeStr = [NSAttributedString attributedStringWithAttachment:attachment];
NSMutableAttributedString *resultAttrString = [[NSMutableAttributedString alloc] initWithAttributedString:self.attributedText];
//在当前编辑位置插入字符串
[resultAttrString insertAttributedString:insertAttributeStr atIndex:self.selectedRange.location];
NSRange tempRange = self.selectedRange;
self.attributedText = resultAttrString;
self.selectedRange = NSMakeRange(tempRange.location + 1, 0);
[self.textStorage addAttributes:@{NSFontAttributeName : [UIFont systemFontOfSize:_defaultFontSize]} range:NSMakeRange(0, self.attributedText.length)];
[self scrollRangeToVisible:self.selectedRange];
[self textChanged];

其中WKExpressionTextAttachment继承自NSTextAttachment, 并新增text字段,为了保存表情对应的文本,用于复制粘贴操作。

@interface WKExpressionTextAttachment : NSTextAttachment
@property (nonatomic, copy) NSString *text;
@end

WKExpressionTool的提供将普通字符串转换为富文本的方法,主要用于复制时生成表情。

主要方法

+ (NSAttributedString *)generateAttributeStringWithOriginalString:(NSString *)originalString fontSize:(CGFloat)fontSize
{
NSError *error = NULL;
NSMutableAttributedString *resultAttrString = [[NSMutableAttributedString alloc] initWithString:originalString];
NSRegularExpression *regex = [NSRegularExpression regularExpressionWithPattern:@"\\[[a-zA-Z0-9\u4e00-\u9fa5]{1,}\\]" options:NSRegularExpressionAllowCommentsAndWhitespace error:&error];
NSArray *results = [regex matchesInString:originalString options:NSMatchingReportCompletion range:NSMakeRange(0, originalString.length)];
if (results) {
for (NSTextCheckingResult *result in results.reverseObjectEnumerator) {
NSRange resultRange = [result rangeAtIndex:0];
NSString *stringResult = [originalString substringWithRange:resultRange];
NSLog(@"%s %@\n", __FUNCTION__, stringResult);
NSAttributedString *expressionAttrString = [self getAttributeStringWithExpressionString:stringResult fontSize:fontSize];
[resultAttrString replaceCharactersInRange:resultRange withAttributedString:expressionAttrString];
}
}
return resultAttrString;
}

/**
* 通过表情生成富文本
*
* @param expressionString 表情名
* @param fontSize 对应字体大小
*
* @return 富文本
*/
+ (NSAttributedString *)getAttributeStringWithExpressionString:(NSString *)expressionString fontSize:(CGFloat)fontSize
{
NSString *imageName = [self getExpressionStringWithImageName:expressionString];
WKExpressionTextAttachment *attachment = [[WKExpressionTextAttachment alloc] initWithData:nil ofType:nil];
UIImage *image = [UIImage imageNamed:imageName];
attachment.image = image;
attachment.text = [WKExpressionTool getExpressionStringWithImageName:imageName];
attachment.bounds = CGRectMake(0, 0, fontSize, fontSize);
NSAttributedString *appendAttributeStr = [NSAttributedString attributedStringWithAttachment:attachment];
return appendAttributeStr;
}

至此,基本功能实现完成。 接下来说说遇到的小问题

编辑是应该对应selectedRange

复制粘贴操作需要重新实现

textView在插入NSTextAttachment后,会默认把font的size修改为12,需要记录默认的size

对应selectedRange操作

具体的操作查看源码

重新实现copy、cut方法

进行复制、粘贴操作会发现,不能对图片进行复制,所以需要自己重写copy、cut方法

- (void)copy:(id)sender
{
NSAttributedString *selectedString = [self.attributedText attributedSubstringFromRange:self.selectedRange];
NSString *copyString = [self parseAttributeTextToNormalString:selectedString];
UIPasteboard *pboard = [UIPasteboard generalPasteboard];
if (copyString.length != 0) {
pboard.string = copyString;
}
}
- (void)cut:(id)sender
{
[self copy:sender];
NSMutableAttributedString *originalString = [[NSMutableAttributedString alloc] initWithAttributedString:self.attributedText];
[originalString deleteCharactersInRange:self.selectedRange];
self.attributedText = originalString;
NSLog(@"--%@", NSStringFromRange(self.selectedRange));
[self textChanged];
}

记录默认font的size

利用实例变量defaultFontSize,在WKExpressionTextView实例化时记录self.font.pointSize,以后需要取font的size时,直接取defaultFontSize

@interface WKExpressionTextView : UITextView
@property (nonatomic, assign) CGFloat defaultFontSize;
@end
@implementation WKExpressionTextView
{
CGFloat _defaultFontSize;
}
- (void)awakeFromNib
{
[self setup];
}
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
[self setup];
}
return self;
}
- (void)setup
{
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(textChange:) name:UITextViewTextDidChangeNotification object:self];
_defaultFontSize = self.font.pointSize;
self.delegate = self;
}

以上所述是小编给大家介绍的iOS高仿微信表情输入功能代码分享,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • IOS程序开发之禁止输入表情符号实例代码

    废话不多说了,先给大家展示效果图. 一,效果图. 二,工程图. 三,代码. RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController : UIViewController <UITextViewDelegate> @end RootViewController.m - (void)viewDidLoad { [super viewDidLoad]; // Do any additional

  • iOS表情键盘的简单实现代码

    最近用到了表情键盘就去网上找了下,感觉网上的都是为了更大的需求写的,而我并不需要所以就自己写了个简单的实现. 1.用到的表情字符串是从Emojiplist文件里获取到的; 2.需要添加一个观察者: [[NSNotificationCenter defaultCenter]addObserver:self selector:@selector(keyboardWillShow:) name:UIKeyboardWillShowNotification object:nil]; - (void)ke

  • iOS中判断Emoji表情问题

    先给大家说下问题描述 服务器端不支持Emoji表情,因此客户端在上传用户输入时,不能包含Emoji表情. 解决方案 在客户端发送请求前,判断用户输入中是否含有表情,如果含有表情,则提示用户重新输入.这个过程关键是如何判断字符串中是否含有Emoji表情.要判断是否含有Emoji表情,必须先了解什么是Emoji. Emoji 是一套起源于日本的12x12像素表情符号,由栗田穣崇(Shigetaka Kurit)创作,最早在日本网络及手机用户中流行,自苹果公司发布的iOS 5输入法中加入了emoji后

  • iOS组件封装与自动布局自定义表情键盘

    下面的东西是编写自定义的表情键盘,话不多说,开门见山吧!下面主要用到的知识有MVC, iOS开发中的自动布局,自定义组件的封装与使用,Block回调,CoreData的使用.有的小伙伴可能会问写一个自定义表情键盘肿么这么麻烦?下面 将会介绍我们如何用上面提到的东西来定义我们的表情键盘的.下面的内容会比较多,这篇文章还是比较有料的. 还是那句话写技术博客是少不了代码的,下面会结合代码来回顾一下iOS的知识,本篇博文中用到的知识点在前面的博客中都能找到相应的内容,本篇 算是一个小小的功能整合.先来张

  • iOS高仿微信表情输入功能代码分享

    最近项目需求,要实现一个类似微信的的表情输入,于是把微信的表情扒拉出来,实现了一把.可以从这里下载源码.看起来表情输入没有多少东西,不外乎就是用NSTextAttachment来实现图文混排,结果在实现的过程中遇到了很多小问题,接下来会一一介绍遇到过的坑.先上一张效果图: 一.实现表情选择View(WKExpressionView) 具体的实现就不细说了,主要功能就是点击表情时,将对应表情的图片名称通知给delegate. 二.实现表情textView(WKExpressionTextView)

  • Android高仿微信表情输入与键盘输入详解

    最近公司在项目上要使用到表情与键盘的切换输入,自己实现了一个,还是存在些缺陷,比如说键盘与表情切换时出现跳闪问题,这个相当困扰我,不过所幸在Github(其中一个不错的开源项目,其代码整体结构很不错)并且在论坛上找些解决方案,再加上我也是研究了好多个开源项目的代码,最后才苦逼地整合出比较不错的实现效果,可以说跟微信基本一样(嘿嘿,只能说目前还没发现大Bug,若发现大家一起日后慢慢完善,这里我也只是给出了实现方案,拓展其他表情我并没有实现哈,不过代码中我实现了一个可拓展的fragment模板以便大

  • android高仿微信表情输入与键盘输入代码(详细实现分析)

    表情与键盘的切换输入大部分IM都会需要到,之前自己实现了一个,还是存在些缺陷,比如说键盘与表情切换时出现跳闪问题,这个困扰了我些时间,不过所幸在Github(其代码整体结构很不错)并且在论坛上找些解决思路,再加上研究了好几个开源项目的代码,最后终于苦逼地整合出比较不错的实现效果(这里不仅给出了实现方案,还提供一个可拓展的fragment模板以便大家实现自己的表情包)代码我已进行另外的封装与拓展,大家需要其他表情的话只需要根据fragment模板实现自己的表情界面,然后根据工厂类获取即可,实现效果

  • iOS高仿微信文章悬浮球功能

    前言 微信在最新版本6.6.7,新加了一个文章悬浮球功能.当你正在阅读文章的时候,突然有好友发来了紧急消息,你需要立即回复.又或者你刚好路过小吃店,需要临时打开微信支付,等等临时中断阅读的情况.以前只有退出文章详情页面,处理完事情之后,再挨着挨着找到原来的文章.对于我们这种重度微信使用者来说,每次遭遇这种情况,真的很蛋疼.所以,当这个功能推出的事情,立马更新了最新版本,这个功能感觉就像遇到了知心人一样,用起来十分顺手.可以通过下面的动图感受一下 其实悬浮球的概念早就有了.比如360助手的流量监控

  • iOS高仿微信相册界面翻转过渡动画效果

    点开微信相册的时候,想要在相册图片界面跳转查看点赞和评论时,微信会采用界面翻转的过渡动画来跳转到评论界面,好像是在图片界面的背面一样,点击完成又会翻转回到图片界面,这不同于一般的导航界面滑动动画,觉得很有意思,于是自己学着做了一下,其实也很简单,下面是实现的类似的效果图: 在图片界面点击右下角的查看评论会翻转到评论界面,评论界面点击左上角的返回按钮会反方向翻转回图片界面,真正的实现方法,与传统的导航栏过渡其实只有一行代码的区别,让我们来看看整体的实现. 首先我们实现图片界面,这个界面上有黑色的背

  • 利用百度地图Android sdk高仿微信发送位置功能及遇到的问题

    接触了百度地图开发平台半个月了,这2天试着模仿了微信给好友发送位置功能,对百度地图的操作能力又上了一个台阶 我在实现这个功能的时候,遇到一些困难,可能也是别人将会遇到的困难,特在此列出 1.在微信发送功能中,不管用户如何拖拽地图,总有个覆盖物固定了MapView中央,怎么实现? 其实这很容易实现,只要MapView的布局文件中,将一个ImageView覆盖在MapView的中央,就能够实现不管用户如何拖拽地图,覆盖物(ImageView)总固定总MapView中央 2.如何获取MapView中央

  • Android仿微信语音聊天功能

    本文实例讲述了Android仿微信语音聊天功能代码.分享给大家供大家参考.具体如下: 项目效果如下: 具体代码如下: AudioManager.java package com.xuliugen.weichat; import java.io.File; import java.io.IOException; import java.util.UUID; import android.media.MediaRecorder; public class AudioManager { private

  • Android 高仿微信朋友圈拍照上传功能

    模仿微信朋友圈发布动态,输入文字支持文字多少高度自增,有一个最小输入框高度,输入文字有限制,不过这些都很easy! 1. PhotoPicker的使用 这是一个支持选择多张图片,点击图片放大,图片之间左右滑动互相切换的库,同时支持图片删除的库,效果类似微信. (1) 添加PhotoPicker的架包 (2) 使用 选择图片:安卓6.0以后需要在代码中添加读写sd卡和相机的权限 当然清单文件中也需要添加的 PhotoPicker.builder() .setPhotoCount(maxPhoto)

  • Android用ActionBar高仿微信主界面的实例代码

    经过前面两篇文章的学习,我想大家对ActionBar都已经有一个相对较为深刻的理解了.唯一欠缺的是,前面我们都只是学习了理论知识而已,虽然知识点已经掌握了,但是真正投入到项目实战当中时会不会掉链子还很难说.那么不用担心,本篇文章我就将带领大家一起进入ActionBar的应用实战,将理论和实践完美结合到一起. 如果你还没有看过我的前两篇文章,建议先去阅读一下 Android ActionBar完全解析使用官方推荐的最佳导航栏(上)和 Android ActionBar完全解析使用官方推荐的最佳导航

  • Android基于高德地图poi的仿微信获取位置功能实例代码

    1.打开页面自动定位,同时搜索周边所有poi 2.点击搜索按钮,输入关键子,获取关键字搜索结果 3.选取listview中的一项即可定位到该位置,或者获取任何消息 4.文件类 1.MapActivity public class MapActivity extends Activity implements PoiSearch.OnPoiSearchListener { private MapView mMapView = null; private AMap aMap; private MyL

随机推荐