制作需要的文件
- 表情文件
- 表情文件名稱的plist
- 表情代碼與表情名稱轉(zhuǎn)換的plist
實(shí)現(xiàn)功能的基本原理
## 表情鍵盤的自定義##
表情鍵盤是一個(gè)UIView，在view上添加一個(gè)scrollView定義兩個(gè)屬性delegate和datasource。在init方法中添加一個(gè)觀察者監(jiān)聽datasource。當(dāng)datasource賦值或修改的時(shí)候在scrollView上循環(huán)添加表情按鈕
- (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;
}
在監(jiān)聽方法中畫鍵盤
//獲取需要展示的表情的個(gè)數(shù)
NSInteger count = [self.dataSource numberOfFaceItemsInFaceKeyBoarad:self];
//計(jì)算所需頁(yè)數(shù)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.在哪一頁(yè)
int section = (int)button.tag / pageNum;
//2.在哪一頁(yè)第幾個(gè)
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];
}
另外在定義兩個(gè)代理方法如下
@protocol FaceKeyBoardDelegate <NSObject>
@optional
//點(diǎn)擊選中的表情的 index
- (void)faceKeyBoard:(ZZFaceKeyBoard *)faceKB didTapFaceItemsAtIndex:(NSInteger)index;
@end
@protocol FaceKeyBoardDataSource <NSObject>
@required
//獲取要展示的表情個(gè)數(shù)
- (NSInteger)numberOfFaceItemsInFaceKeyBoarad:(ZZFaceKeyBoard *)faceKB;
//用戶獲取當(dāng)前表情的圖片
- (UIImage *)faceKeyBoard:(ZZFaceKeyBoard *)faceKB faceImageWithIndex:(NSInteger)index;
@end
到這里表情鍵盤就畫完了
自定義表情輸入框
- 新建一個(gè)UITextView的子類引入前面的表情鍵盤的代理方法并聲明3個(gè)屬性 鍵盤faceKB 表情數(shù)組faces 轉(zhuǎn)碼后的字符串plainString。
- 初始化表情數(shù)組及鍵盤
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;
- 實(shí)現(xiàn)前面定義的鍵盤的獲取表情的代理方法
- (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;
}
-實(shí)現(xiàn)點(diǎn)擊表情的代理方法
重點(diǎn)來(lái)了在這里 使用到了一個(gè)富文本 >NSTextAttachment 它的作用就是在一堆字符串里顯示圖片，而且圖片的大小是可以自定義的，但是NSTextAttachment的bounds屬性使用起來(lái)不方便，而且也沒辦法快速定位是一張什么樣的圖片，所以我們需要實(shí)現(xiàn)一個(gè) >NSTextAttachment 的子類，在子類中需要重新實(shí)現(xiàn)
- (CGRect)attachmentBoundsForTextContainer:(NSTextContainer *)textContainer proposedLineFragment:(CGRect)lineFrag glyphPosition:(CGPoint)position characterIndex:(NSUInteger)charIndex
并聲明兩個(gè)屬性 size以及 tag
- (CGRect)attachmentBoundsForTextContainer:(NSTextContainer *)textContainer proposedLineFragment:(CGRect)lineFrag glyphPosition:(CGPoint)position characterIndex:(NSUInteger)charIndex {
return CGRectMake(0, -4, _emojiSize.width, _emojiSize.height);
}
- 接下來(lái)實(shí)現(xiàn)ZZFaceKeyBoard的delegate的代理方法
- (void)faceKeyBoard:(ZZFaceKeyBoard *)faceKB didTapFaceItemsAtIndex:(NSInteger)index
獲取點(diǎn)擊哪個(gè)表情
NSString * name = self.faces[index];
if ([name isEqualToString:@"faceDelete"]) {
//系統(tǒng)的刪除方法 刪除一個(gè)長(zhǎng)度
[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];
//在光標(biāo)位置插入emoji
[self.textStorage insertAttributedString:attributedStr
atIndex:self.selectedRange.location];
//移動(dòng)光標(biāo)位置
self.selectedRange = NSMakeRange(self.selectedRange.location + 1, self.selectedRange.length);
[self resetTextStyle];
}
通過(guò)index獲取到表情名字實(shí)例化 >ZZEmojiTextAttachment 然后將你們的定好的協(xié)議進(jìn)行賦值 最后插入到textView 的 >testStorage 中，并移動(dòng)光標(biāo)
- 接下來(lái)重寫plainString 的get方法
通過(guò)遍歷 >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中解析代碼并顯示表情
通過(guò)正則表達(dá)式查找plainString 的表情代碼 然后使用NSTextAttachment 進(jìn)行替換 然后給label 的attributedText 進(jìn)行賦值
代碼如下：
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];
//通過(guò)正則表達(dá)式 判斷是否 含有特定字符
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
