Interpretation of the Emoji Open-Source Project (2) custom emojis and the emoji open-source project

Interpretation of the Emoji Open-Source Project (2) custom emojis and the emoji open-source project

Introduction

In the previous section, we explained a system Emoji expression. In this section, we talked about custom expressions, such as QQ and so on. Just two days ago, we saw an application similar to QQ, although there are still many things that need to be improved, the custom Emoji functions are also quite mature. Thank you for your thanks, let's take a look at the implementation of this function.

 

Based on the analysis in the previous section, I simply went straight to the topic and talked about the page layout, architecture, and process. If you are interested, you can view the code by yourself.

Source code analysis

Let's take a look at his assets resource folder.

The g folder contains gif images, such

The p folder contains a static graph.

 

Let's see how to add an emoticon.

An event is triggered when an expression of the GridView is selected.

// Click the operation gridview. setOnItemClickListener (new AdapterView. OnItemClickListener () {@ Overridepublic void onItemClick (AdapterView <?> Parent, View view, int position, long id) {try {String png = (TextView) (LinearLayout) view ). getChildAt (1 )). getText (). toString (); if (! Png. contains ("_ del") {// if it is not the delete icon ExpressionUtil. insert (editText, ExpressionUtil. getFace (context, png);} else {ExpressionUtil. delete (editText) ;}} catch (Exception e) {e. printStackTrace ();}}});

Pay attention to this line of code

ExpressionUtil.insert(editText,ExpressionUtil.getFace(context,png));

Add an emoticon.

Let's take a look at how to assemble the EditText style?

Public static SpannableStringBuilder getFace (Context mContext, String png) {SpannableStringBuilder sb = new SpannableStringBuilder (); try {/*** after testing, although tempText is replaced with png, however, when I click the send button, the content in the "send" box is obtained as the value of tempText rather than png *. Therefore, we will perform special processing on this tempText value * format: # [face/png/f_static_000.png] # To determine which image is before use **/String tempText = "[" + png + "]"; sb. append (tempText); sb. setSpan (new ImageSpan (mContext, BitmapFactory. decodeStream (mContext. getAssets (). open (png), sb. length ()-tempText. length (), sb. length (), Spannable. SPAN_EXCLUSIVE_EXCLUSIVE);} catch (Exception e) {e. printStackTrace ();} return sb ;}

Let's take a look at the inheritance relationship of this class SpannableStringBuilder and implement the CharSequence interface, which is equivalent to a style Builder. It is easy to think of Builder mode as its name, this is indeed the case.

After the string is set, the ImageSpan style is set and the image style is set at the specified position.

Then the CharSequence of EditText is set.

/*** Add emoticon to the input box **/public static void insert (EditText input, CharSequence text) {int iCursorStart = Selection. getSelectionStart (input. getText (); int iCursorEnd = Selection. getSelectionEnd (input. getText (); if (iCursorStart! = ICursorEnd) {(Editable) input. getText ()). replace (iCursorStart, iCursorEnd, "");} int iCursor = Selection. getSelectionEnd (input. getText (); (Editable) input. getText ()). insert (iCursor, text );}

There are two types of emoticons, which are similar to the system emoticons analyzed previously. If the cursor is inconsistent, multiple emoticons are selected, and the selected emoticons are replaced with empty strings. In fact, the selected emoticons are deleted, then obtain the latest cursor and add the emoticon to be added.

Then let's see how to delete the emoticon.

ExpressionUtil delete Method

/*** Delete icon execution event * Note: if you delete an emoticon, The tempText character string is actually deleted when you delete it. Therefore, you must delete tempText at a time, before deleting an image **/public static void delete (EditText input) {if (input. getText (). length ()! = 0) {int iCursorEnd = Selection. getSelectionEnd (input. getText (); int iCursorStart = Selection. getSelectionStart (input. getText (); if (iCursorEnd> 0) {if (iCursorEnd = iCursorStart) {if (isDeletePng (input, iCursorEnd )) {String st = "[p/_000.png]"; (Editable) input. getText ()). delete (iCursorEnd-st. length (), iCursorEnd);} else {(Editable) input. getText ()). delete (iCursorEnd-1, iCursorEnd) ;}} else {(Editable) input. getText ()). delete (iCursorStart, iCursorEnd );}}}}

The method for deleting an emoticon is obviously different from that described in the previous section. The last one was a system emoticon, that is, a system character unit. The system automatically deletes the emoticon by handing it over to EditText, of course, the premise is to give him a deleted event amount.

The remarks in this method should clearly indicate that the deletion is to delete the string of the image placeholder. There are three cases: the deletion is to delete the content in the cursor, which is relatively simple, you can directly get the starting and ending positions of the cursor and delete it. The first type is to delete common text. This only requires you to delete the last character. The last one is more complicated. It is to delete the emoticon, let's take a look. Do you need to know the emojis I want to delete first?

The isDeletePng method of ExpressionUtil is used here.

/*** Determine whether the string to be deleted is an image placeholder string tempText. If yes, delete the entire tempText ***/public static boolean isDeletePng (EditText input, int cursor) {String st = "[p/_000.png]"; String content = input. getText (). toString (). substring (0, cursor); if (content. length ()> = st. length () {String checkStr = content. substring (content. length ()-st. length (), content. length (); String regex = "\ [[^ \] + \]"; Pattern p = Pattern. compile (regex); Matcher m = p. matcher (checkStr); return m. matches ();} return false ;}

I think this method is the difficult point of the entire project, and the author's implementation method is also more elegant. The strategy here is to add the emoticon format according to our discussion, to push back the last string that should match whether the expression is expression. if it meets the expression standard, the regular expression is used for matching after the target is cropped, if you do not want to be regular, you really need to study it well. Sometimes, it can be very effective. If so, you have to explain the method of deleting the emoticon.

If the check is an emoticon, then it is deleted, that is, the starting and ending position of the deletion. The ending position is the ending position minus the number of emoticon characters.

 

So far, the implementation and analysis of the custom emojis have been completed. The analysis of the Emoji emojis is now complete in conjunction with the system emojis in the previous section. If you have any questions or are not correct, you can discuss them together.

 

Project address

Column http://blog.csdn.net/baiyuliang2013/article/details/43073861 of baijiliang