制作需要的文件
- 表情文件
- 表情文件名称的plist
- 表情代码与表情名称转换的plist
实现功能的基本原理
## 表情键盘的自定义##
表情键盘是一个UIView，在view上添加一个scrollView定义两个属性delegate和datasource。在init方法中添加一个观察者监听datasource。当datasource赋值或修改的时候在scrollView上循环添加表情按钮
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self)
{
//初始化组件
//初始化表情界面
self.scrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, self.bounds.size.width, self.bounds.size.height)];
self.scrollView.backgroundColor = [UIColor groupTableViewBackgroundColor];
self.scrollView.pagingEnabled = YES;
[self addSubview:self.scrollView];
[self addObserver:self forKeyPath:@"dataSource" options:NSKeyValueObservingOptionNew context:nil];
}
return self;
}
在监听方法中画键盘
//获取需要展示的表情的个数
NSInteger count = [self.dataSource numberOfFaceItemsInFaceKeyBoarad:self];
//计算所需页数3
int pageNum=21;
int rowNum=7;
int pages = ceil(count/pageNum);
self.scrollView.contentSize = CGSizeMake(self.bounds.size.width * 3, self.bounds.size.height);
for (int i = 0; i < count; i++)
{
UIButton * button = [UIButton buttonWithType:UIButtonTypeCustom];
button.tag = i;
//确定button位置
//1.在哪一页
int section = (int)button.tag / pageNum;
//2.在哪一页第几个
int index = button.tag % pageNum;
//3.在第几行
int row = index / rowNum;
//4.在第几列
int cloumn = index % rowNum;
CGFloat w = self.bounds.size.width;
CGFloat bw = 25;
CGFloat blankWidth=(w-7*bw)/8;
CGFloat blankheight=(self.frame.size.height-3*bw)/4;
CGFloat x = blankWidth+ w * section + (bw+blankWidth) * cloumn;
CGFloat y = (bw+blankheight) * row+blankheight;
button.frame = CGRectMake(x, y, bw, bw);
[button addTarget:self action:@selector(tapFaceButton:) forControlEvents:UIControlEventTouchUpInside];
UIImage * image = [self.dataSource faceKeyBoard:self faceImageWithIndex:button.tag];
[button setImage:image forState:UIControlStateNormal];
[self.scrollView addSubview:button];
}
另外在定义两个代理方法如下
@protocol FaceKeyBoardDelegate <NSObject>
@optional
//点击选中的表情的 index
- (void)faceKeyBoard:(ZZFaceKeyBoard *)faceKB didTapFaceItemsAtIndex:(NSInteger)index;
@end
@protocol FaceKeyBoardDataSource <NSObject>
@required
//获取要展示的表情个数
- (NSInteger)numberOfFaceItemsInFaceKeyBoarad:(ZZFaceKeyBoard *)faceKB;
//用户获取当前表情的图片
- (UIImage *)faceKeyBoard:(ZZFaceKeyBoard *)faceKB faceImageWithIndex:(NSInteger)index;
@end
到这里表情键盘就画完了
自定义表情输入框
- 新建一个UITextView的子类引入前面的表情键盘的代理方法并声明3个属性 键盘faceKB 表情数组faces 转码后的字符串plainString。
- 初始化表情数组及键盘
self.font = [UIFont systemFontOfSize:18];
//获取所有表情
NSString * path = [[NSBundle mainBundle]pathForResource:@"Emoji" ofType:@"plist"];
self.faces = [NSArray arrayWithContentsOfFile:path];
self.faceKB = [[ZZFaceKeyBoard alloc]initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, 170)];
self.faceKB.backgroundColor = [UIColor greenColor];
self.faceKB.delegate = self;
self.faceKB.dataSource = self;
- 实现前面定义的键盘的获取表情的代理方法
- (NSInteger)numberOfFaceItemsInFaceKeyBoarad:(ZZFaceKeyBoard *)faceKB
{
return self.faces.count;
}
- (UIImage *)faceKeyBoard:(ZZFaceKeyBoard *)fk faceImageWithIndex:(NSInteger)index
{
NSString * name = self.faces[index];
UIImage * image = [UIImage imageNamed:name];
return image;
}
-实现点击表情的代理方法
重点来了在这里 使用到了一个富文本 >NSTextAttachment 它的作用就是在一堆字符串里显示图片，而且图片的大小是可以自定义的，但是NSTextAttachment的bounds属性使用起来不方便，而且也没办法快速定位是一张什么样的图片，所以我们需要实现一个 >NSTextAttachment 的子类，在子类中需要重新实现
- (CGRect)attachmentBoundsForTextContainer:(NSTextContainer *)textContainer proposedLineFragment:(CGRect)lineFrag glyphPosition:(CGPoint)position characterIndex:(NSUInteger)charIndex
并声明两个属性 size以及 tag
- (CGRect)attachmentBoundsForTextContainer:(NSTextContainer *)textContainer proposedLineFragment:(CGRect)lineFrag glyphPosition:(CGPoint)position characterIndex:(NSUInteger)charIndex {
return CGRectMake(0, -4, _emojiSize.width, _emojiSize.height);
}
- 接下来实现ZZFaceKeyBoard的delegate的代理方法
- (void)faceKeyBoard:(ZZFaceKeyBoard *)faceKB didTapFaceItemsAtIndex:(NSInteger)index
获取点击哪个表情
NSString * name = self.faces[index];
if ([name isEqualToString:@"faceDelete"]) {
//系统的删除方法 删除一个长度
[self deleteBackward];
}
else
{
//显示表情图片
self.font=[UIFont systemFontOfSize:17];
int cha= (int)index /20;
float height= self.font.lineHeight;
UIImage * image = [UIImage imageNamed:name];
ZZEmojiTextAttachment * attachment = [[ZZEmojiTextAttachment alloc]init];
attachment.image = image;
attachment.emojiSize=CGSizeMake(height, height);
if (index == 40) {
attachment.emojiTag=[NSString stringWithFormat:@"[em:%ld]",(long)index-1];
}
else
{
attachment.emojiTag=[NSString stringWithFormat:@"[em:%ld]",(long)index-cha];
}
NSAttributedString * attributedStr = [NSAttributedString attributedStringWithAttachment:attachment];
//在光标位置插入emoji
[self.textStorage insertAttributedString:attributedStr
atIndex:self.selectedRange.location];
//移动光标位置
self.selectedRange = NSMakeRange(self.selectedRange.location + 1, self.selectedRange.length);
[self resetTextStyle];
}
通过index获取到表情名字实例化 >ZZEmojiTextAttachment 然后将你们的定好的协议进行赋值 最后插入到textView 的 >testStorage 中，并移动光标
- 接下来重写plainString 的get方法
通过遍历 >textStorage 查找 ZZEmojiTextAttachment 并替换成为tag代码如下
-(NSMutableString *)plainString
{
_plainString = [NSMutableString stringWithString:self.textStorage.string];
__block NSUInteger base = 0;
[self.textStorage enumerateAttribute:NSAttachmentAttributeName inRange:NSMakeRange(0, self.textStorage.length)
options:0
usingBlock:^(id value, NSRange range, BOOL *stop) {
if (value && [value isKindOfClass:[ZZEmojiTextAttachment class]]) {
[_plainString replaceCharactersInRange:NSMakeRange(range.location + base, range.length)
withString:((ZZEmojiTextAttachment *) value).emojiTag];
base += ((ZZEmojiTextAttachment *) value).emojiTag.length - 1;
}
}];
return _plainString;
}
在label中解析代码并显示表情
通过正则表达式查找plainString 的表情代码 然后使用NSTextAttachment 进行替换 然后给label 的attributedText 进行赋值
代码如下：
NSString * path = [[NSBundle mainBundle]pathForResource:@"expression" ofType:@"plist"];
NSDictionary *emojiDict =[[NSDictionary alloc]initWithContentsOfFile:path];
float height= _showLabel.font.lineHeight;
NSMutableAttributedString * mainAttr =[[NSMutableAttributedString alloc]initWithString:str];
//通过正则表达式 判断是否 含有特定字符
NSRegularExpression *regex=[NSRegularExpression regularExpressionWithPattern:@"\\[em:[0-9]*\\]"options:NSRegularExpressionAnchorsMatchLines error:nil];
__block NSUInteger location=0;
NSArray *matches=[regex matchesInString:str options:NSMatchingWithoutAnchoringBounds range:NSMakeRange(0, str.length)];
if (matches.count>0) {
NSRange range={0,str.length};
[regex enumerateMatchesInString:str options:NSMatchingWithTransparentBounds range:range usingBlock:^(NSTextCheckingResult * _Nullable result, NSMatchingFlags flags, BOOL * _Nonnull stop) {
//将特定字符 替换为 图片
NSRange matchRange=[result range];
NSString *subStr=[str substringWithRange:matchRange];
NSTextAttachment *attachemnt=[[NSTextAttachment alloc]init];
attachemnt.bounds=CGRectMake(0, -4, height, height);
attachemnt.image=[UIImage imageNamed:emojiDict[subStr]];
NSAttributedString *imageString=[NSAttributedString attributedStringWithAttachment:attachemnt];
NSRange newRange={matchRange.location-location,matchRange.length};
[mainAttr replaceCharactersInRange:newRange withAttributedString:imageString];
location=location+matchRange.length-1;
self.showLabel.attributedText=mainAttr;
}];
}
else
{
self.showLabel.text=str;
}
大功告成
附：所需文件样式截图
demo地址:https://github.com/dtxzp219/ZZEmojiTextView
表情名称plist.png
解析代码.png
效果图
图片.png
