【移动应用开发技术】怎么在iOS中实现表情键盘

【移动应用开发技术】怎么在iOS中实现表情键盘

怎么在iOS中实现表情键盘？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面在下将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。基本思路首先，表情包的图片是用bundle的形式组织的，用PPSticker类表征一套表情包，用PPEmoji类表征某一个表情，用一个plist作为配置文件，存储表情包的信息。表情的组织.jpgPPStickerDataManager类主要负责数据部分，用单例的形式，这样可以在初始化的时候只会读取一次plist文件中的所有表情信息；同时我们把输入框内容发到服务端以及从服务端请求到的都是纯文本的，比如会把"笑死了?"转成"笑死了[笑哭]"这样的纯文本，而不是直接把表情图片直接发到服务端，也就是说项目中有大量的地方会有把文本->表情的操作，所以PPStickerDataManager类也提供匹配某段纯文本中的表情，并把文本替换为图片的功能，PPStickerDataManager类的头文件如下：@interface

PPStickerDataManager

:

NSObject

+

(instancetype)sharedInstance;

///

所有的表情包

@property

(nonatomic,

strong,

readonly)

NSArray<PPSticker

*>

*allStickers;

/*

匹配给定attributedString中的所有emoji，如果匹配到的emoji有本地图片的话会直接换成本地的图片

*

*

@param

attributedString

可能包含表情包的attributedString

*

@param

font

表情图片的对齐字体大小

*/

-

(void)replaceEmojiForAttributedString:(NSMutableAttributedString

*)attributedString

font:(UIFont

*)font;

@end"真正的"键盘真正的键盘也就是说调起表情键盘时输入框是有光标的，能进行拖拽光标、选中区域等的操作，这样的体验才是与系统键盘一致的。其实系统已经提供好了接口给我们直接使用，UITextView和UITextField都有的inputView和inputAccessoryView就是用来实现自定义键盘的，这两个属性的定义如下：//

Presented

when

object

becomes

first

responder.

If

set

to

nil,

reverts

to

following

responder

chain.

If

//

set

while

first

responder,

will

not

take

effect

until

reloadInputViews

is

called.

@property

(nullable,

readwrite,

strong)

UIView

*inputView;

@property

(nullable,

readwrite,

strong)

UIView

*inputAccessoryView;同时系统键盘在设置->声音->按键音选项打开且手机非静音状态下输入是有按键的声音的，这个按键音也是可以支持的，只要自定义键盘类遵循UIInputViewAudioFeedback协议，同时实现enableInputClicksWhenVisible方法并返回YES，这样就可以在点击表情的时候调用[[UIDevicecurrentDevice]playInputClick]方法发出按键音了，详情请查看苹果的官方文档。下面是Demo中键盘切换方法的实现：-

(void)changeKeyboardTo:(PPKeyboardType)toType

{

switch

(toType)

{

case

PPKeyboardTypeSystem:

self.textView.inputView

=

nil;

//

切换到系统键盘

[self.textView

reloadInputViews];

//

调用reloadInputViews方法会立刻进行键盘的切换

break;

case

PPKeyboardTypeSticker:

self.textView.inputView

=

self.stickerKeyboard;

//

切换到自定义的表情键盘

[self.textView

reloadInputViews];

break;

default:

break;

}

}去除表情的拖拽交互在iOS11上，UITextView上的NSTextAttachment（表情）默认可以进行拖拽交互，但是却导致拖动光标时很容易触发这个交互（图示可以查看上面说到的微博国际版中的误触）。一番查找之后才找到一个比较隐蔽的属性：textDragInteraction，直接设置为NO就能禁止掉NSTextAttachment的拖拽交互。if

(@available(iOS

11.0,

*))

{

//

只在iOS11及以上才有这个属性

_textView.textDragInteraction.enabled

=

NO;

}与服务端的交互我们在输入框中输入的内容与服务端进行交互的时候都是用纯文本的，比如会把"笑死了?"转成"笑死了[笑哭]"这样的纯文本发到服务端，而不是直接发表情图片，向服务端请求内容的时候也是传回"笑死了[笑哭]"，然后客户端再根据正则匹配找出表情替换成对应的表情图片，然后显示到页面上。具体过程可以看下图：与服务端的交互.png也就是说，我们设置到输入框的NSAttributedString中的每一个NSTextAttachment都有一个"隐藏的"属性—表情的文本描述，这里对NSAttributedString进行拓展就能实现。pp_setTextBackedString可以对NSAttributedString的指定range设置一个PPTextBackedString类型的属性，而pp_plainTextForRange能拿到NSAttributedString指定range的纯文本。具体实现如下：@implementation

NSAttributedString

(PPAddition)

-

(NSString

*)pp_plainTextForRange:(NSRange)range

{

if

(range.location

==

NSNotFound

||

range.length

==

NSNotFound)

{

return

nil;

}

NSMutableString

*result

=

[[NSMutableString

alloc]

init];

if

(range.length

==

0)

{

return

result;

}

NSString

*string

=

self.string;

[self

enumerateAttribute:PPTextBackedStringAttributeName

inRange:range

options:kNilOptions

usingBlock:^(id

value,

NSRange

range,

BOOL

*stop)

{

PPTextBackedString

*backed

=

value;

if

(backed

&&

backed.string)

{

[result

appendString:backed.string];

}

else

{

[result

appendString:[string

substringWithRange:range]];

}

}];

return

result;

}

@end

@implementation

NSMutableAttributedString

(PPAddition)

-

(void)pp_setTextBackedString:(PPTextBackedString

*)textBackedString

range:(NSRange)range

{

if

(textBackedString

&&

![NSNull

isEqual:textBackedString])

{

[self

addAttribute:PPTextBackedStringAttributeName

value:textBackedString

range:range];

}

else

{

[self

removeAttribute:PPTextBackedStringAttributeName

range:range];

}

}

@end灵活的光标表情功能，UITextView都是用NSAttributedString进行赋值的，并且我们底层其实还是用上面说到的纯文本进行实现的，那么把[笑死]转成?就会从4个字符变成1个字符，这里是有差值的，如果不处理的话就会出现上面提到的微博国际版中复制黏贴输入框的表情会导致光标位置不对，甚至莫名其妙多出前后空格的问题。为了精准的定位光标，我们需要自行处理好这些问题。这里自己继承并实现了UITextView的子类PPStickerTextView，在这个类中重载复制、黏贴、剪切等操作，分别对应的方法如下：-

(void)cut:(id)sender;

//

剪切

-

(void)copy:(id)sender;

//

复制

-

(void)paste:(id)sender;

//

黏贴下面以剪切方法举例，看看怎么处理光标的问题，需要注意的地方请看对应的注释：-

(void)cut:(id)sender

{

//

1.从textView中拿到对应的纯文本，比如：笑死了[笑死]

NSString

*string

=

[self.attributedText

pp_plainTextForRange:self.selectedRange];

if

(string.length)

{

//

2.

将纯文本写入到剪贴板中

[UIPasteboard

generalPasteboard].string

=

string;

//

3.

记住当前的光标位置

NSRange

selectedRange

=

self.selectedRange;

NSMutableAttributedString

*attributeContent

=

[[NSMutableAttributedString

alloc]

initWithAttributedString:self.attribut