iOS 에서 이모 티 콘 키보드 의 완전한 실현 방법 에 대한 상세 한 설명

머리말
최근 에 회사 에서 이모 티 콘 키보드 의 수 요 를 했 는데 이 수요 의 기술 난이 도 는 크 지 않 고 업무 에 편중 되 어 있다.그러나 사용자 체험 을 잘 하 는 것 도 쉽 지 않 은 데 그 중 몇 가지 주의해 야 할 점 이 있다.말 이 많 지 않 으 면 다음은 본문 을 시작 합 니 다.(주:본 고 에 대응 하 는 Demo 는 Github 에 놓 습 니 다.https://github.com/VernonVan/PPStickerKeyboard （ 로 컬 업로드 ） )。
시장 표정 키보드 분석
먼저 시중 에 있 는 주요 앱 의 이모 티 콘 키 보드 를 살 펴 보 자.평소에 사용 할 때 디 테 일 한 부분 에 관심 을 가지 지 않 는 다.이번 에는 이모 티 콘 키 보드 를 사용 해 보 니 각 앱 의 체험 이 좋 고 나 쁨 이 있 었 다.
먼저,QQ 와 위 챗 은 차이 가 많 지 않 습 니 다.이모 티 콘 키보드 로 전환 할 때 모두 커서 가 없습니다.이러한 사용자 체험 은 매우 좋 지 않 습 니 다.이모 티 콘 을 입력 할 때 선택 영역 을 선택 할 수 없고 커서 를 끌 어서 특정한 위치 에 있 는 복사 붙 여 넣 기 삭제 등 작업 을 할 수 없습니다.위 챗 은 심지어 입력 상자 에 표 시 된 것 은 클릭 한 이모 티 콘 이미지 가 아 닙 니 다.문자 묘사 입 니 다.

위 챗 QQ 이모 티 콘 키보드.JPG
다음은 웨 이 보 국제 판 을 살 펴 보 자.국제 판 에서 이모 티 콘 키 보드 를 조정 할 때 커서 가 있 고'진짜'키보드 이지 만 커서 를 끌 려 고 할 때 그림 을 저장 하 는 행위(아래 그림 참조)가 발생 하여 커서 를 끌 수 없다.

웨 이 보 국제 판 오류.JPG
또한 웨 이 보 국제 판 입력 상자 표정 을 붙 인 후의 커서 포 지 셔 닝 이 잘못 되 었 습 니 다.다음 그림 은 처음에 커서 가 네 번 째 표정 뒤에 있 었 고 개 머리+부 끄 러 운 두 표정 을 복사 하여 커서 에 붙 인 후에 커서 는 네 번 째 표정 뒤에 있 었 습 니 다.동시에 붙 인 표정 은 앞 뒤 가 공백 이 많아 졌 습 니 다.

웨 이 보 국제 판 스티커.JPG
마지막 으로 웨 이 보 입 니 다.웨 이 보 클 라 이언 트 의 표정 키보드 체험 은 매우 좋 습 니 다.위 에서 말 한 문제 가 존재 하지 않 고 표정 키보드 의 삭제 단 추 를 길 게 누 르 면 입력 상자 의 내용 을 삭제 할 수 있 습 니 다.

웨 이 보 이모 티 콘 키보드.jpg
표정 키보드 의 실현
실현 효과
주로 다음 과 같은 몇 가지 기능 을 실현 하 였 다.

이모 티 콘 입력 가능,커서 있 음,붙 여 넣 기 복사 지원 이모 티 콘 삭제 등

미리 보기 이모 티 콘 길 게 누 르 기

이모 티 콘 삭제,길 게 누 르 기 연속 이모 티 콘 삭제

아이 폰 X

에 적합

데모.GIF
기본 적 인 사고방식
먼저 이모 티 콘 의 그림 은 bundle 형식 으로 구성 되 어 있 으 며,PPSticker 류 로 이모 티 콘 세트 를 표징 하고,PPEmoji 류 로 이모 티 콘 을 표징 하 며,하나의 plist 를 프로필 로 하여 이모 티 콘 정 보 를 저장 합 니 다.

표정의 조직.jpg
PPStickerDataManager 클래스 는 주로 데이터 부분 을 담당 하 며,단일 형식 으로 초기 화 할 때 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 에 있 는 input View 와 input Accessory View 는 사용자 정의 키 보드 를 실현 하 는 데 사 용 됩 니 다.이 두 속성의 정 의 는 다음 과 같 습 니 다.

// 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;

이 동시에 시스템 키 보드 는 설정->소리->버튼 음 옵션 이 열 리 고 핸드폰 의 비 음소 거 상태 에서 입력 하 는 것 은 버튼 소리 가 있 습 니 다.이 버튼 소리 도 지원 할 수 있 습 니 다.사용자 정의 키보드 류 가 UIInputView AudioFeedback 프로 토 콜 에 따라 enableInputClicks WhenVisible 방법 을 실현 하고 YES 로 돌아 가기 만 하면 됩 니 다.이렇게 하면 이모 티 콘 을 클릭 할 때[UIDevice current Device]play InputClick]방법 으로 버튼 소 리 를 낼 수 있 습 니 다.자세 한 내용 은 애플 의 공식 문 서 를 보십시오.
다음은 데모 에서 키보드 전환 방법의 실현 입 니 다.

- (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;
 }
}

표정의 드래그 대화 제거
iOS 11 에서 UITextView 의 NSTextAttachment(이모 티 콘)는 기본적으로 드래그 인 터 랙 션 을 할 수 있 지만 커서 를 끌 때 이 인 터 랙 션 을 쉽게 터치 할 수 있 습 니 다(그림 은 위 에서 말 한 웨 이 보 국제 판 의 오 작 동 을 볼 수 있 습 니 다).한 번 찾 은 후에 야 비교적 은밀 한 속성 을 찾 았 습 니 다.textDragInteraction 은 NO 로 설정 하면 NSTextAttachment 의 드래그 인 터 랙 션 을 금지 할 수 있 습 니 다.

if (@available(iOS 11.0, *)) { //   iOS11         
 _textView.textDragInteraction.enabled = NO;
}

서버 와 의 대화
우리 가 입력 상자 에 입력 한 내용 과 서버 가 상호작용 을 할 때 모두 순수한 텍스트 를 사용한다.예 를 들 어'웃 겨 죽겠다'는 것 이다.🤣" '웃 겨 죽 겠 어 요[웃 어 울 어 요]'라 는 순수한 텍스트 를 서버 에 보 내 고 이모 티 콘 을 직접 보 내 는 것 이 아니 라 서버 에 요청 할 때 도'웃 겨 죽 겠 어 요[웃 어 울 어 요]'라 고 전송 한 다음 에 클 라 이언 트 는 정규 일치 에 따라 이모 티 콘 을 찾 아 해당 하 는 이모 티 콘 으로 바 꾸 어 페이지 에 표시 한다.구체 적 인 과정 은 다음 그림 을 볼 수 있다.

서버 와 의 대화.png
즉,입력 상자 에 설 치 된 NSAttributedString 의 모든 NSTextAttachment 는'숨겨 진'속성 인 이모 티 콘 의 텍스트 설명 을 가지 고 있 습 니 다.여기 서 NSAttributedString 을 확장 하면 이 루어 집 니 다.pp_setTextBackedString 은 NSAttributedString 의 지정 range 에 PPTextBackedString 형식의 속성 을 설정 할 수 있 으 며,ppplainTextForRange 는 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.attributedText];
 // 4.                   
 [attributeContent replaceCharactersInRange:self.selectedRange withString:@""];
 self.attributedText = attributeContent;
 
 // 5.       
 self.selectedRange = NSMakeRange(selectedRange.location, 0);
 }
}

기술 점 의 분석 은 바로 상기 와 같다.상세 한 코드 는 Github 에서 clone 에서 내 려 와 볼 수 있다.https://github.com/VernonVan/PPStickerKeyboard （ 로 컬 업로드 ）
총결산
이상 은 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 참고 학습 가치 가 있 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.