Android XMPP-based Instant Messaging 3-Emoticons send

This post focuses on some of the things that emoticons send.

Reference: Android XMPP-based Instant Messaging 1-basic conversation

1. Prepare the resource file.

Using the emoji expression, I packed it,: http://files.cnblogs.com/files/pear-lemon/drawable.zip

2. Expression layout file Layout_send_emotion.xml

<?XML version= "1.0" encoding= "Utf-8"?><Relativelayoutxmlns:android= "Http://schemas.android.com/apk/res/android"Android:id= "@+id/rl_send_emotion"Android:layout_width= "Match_parent"Android:layout_height= "260DP"android:orientation= "vertical"android:visibility= "Gone" >    <Android.support.v4.view.ViewPagerAndroid:id= "@+id/vp_pager_emotion"Android:layout_width= "Match_parent"Android:layout_height= "Wrap_content"Android:layout_alignparenttop= "true" >    </Android.support.v4.view.ViewPager>    <LinearLayoutAndroid:id= "@+id/ll_emotion_dot"Android:layout_width= "Wrap_content"Android:layout_height= "Wrap_content"Android:layout_alignparentbottom= "true"Android:layout_centerhorizontal= "true"Android:layout_marginbottom= "10DP"android:orientation= "Horizontal" >    </LinearLayout></Relativelayout>

3, for the picture resources corresponding to the character Array.xml

<?XML version= "1.0" encoding= "Utf-8"?><Resources>    <String-arrayname= "Emoji">        <Item>01</Item>        <Item>02</Item>        <Item>03</Item>        <Item>04</Item>        <Item>05</Item>        <Item>06</Item>        <Item>07</Item>        <Item>08</Item>        <Item>09</Item>        <Item>10</Item>        <Item>11</Item>        ... </String-array></Resources>

4, get the expression resource file (resource file named "Emoji_xx", so key I customize a static Appdefine.emoji = "Emoji_")

Private List<Integer>  emotionimgs;//Emoticons private string[] emotiontext;//emoji 

String PackageName ==new arraylist<integer>(); // get all emoticons emotiontext =for(String emution:emotiontext) {    = Appdefine.emoji + emution;     int resId = resource.getidentifier (Key, "drawable", PackageName);    Emotionimgs.add (resId);}

5. Initial views

Viewpager Viewpager =(Viewpager) Findviewbyid (r.id.vp_pager_emotion); LinearLayout lldots=(LinearLayout) Findviewbyid (R.ID.LL_EMOTION_DOT);//Initialize the expression lattice for(inti = 0;i < Pagecount;i + +) {Gridviews[i]=NewGridView (activity);      Gridviews[i].setstretchmode (Gridview.stretch_column_width); Gridviews[i].setnumcolumns (5); Gridviews[i].setlayoutparams (NewLayoutparams (layoutparams.match_parent,layoutparams.wrap_content));      Gridviews[i].setgravity (Gravity.center); Gridviews[i].setadapter (Newemotiongridadapter (activity, Emotionimgs, PageCount, i));      Gridviews[i].setonitemclicklistener (Monitemclicklistener); Gridviews[i].setselector (Newcolordrawable (Color.transparent));} //Initialize the following points for(inti=0;i<pagecount;i++) {Viewdots[i]=NewView (activity); Linearlayout.layoutparams LP=NewLinearlayout.layoutparams (10, 10); Lp.setmargins (10, 0, 10, 0);      VIEWDOTS[I].SETLAYOUTPARAMS (LP); if(i!=currentindex)      {Viewdots[i].setbackgroundresource (r.drawable.icon_dot_normal); }Else{viewdots[i].setbackgroundresource (r.drawable.icon_dot_focused);  } lldots.addview (Viewdots[i]); } viewpager.setadapter (NewEmotionpageradapter (GridViews, PageCount));

6, the interface above the content of no difficulty, write a basic effect

7, handle click events, load into the Send box inside

Onitemclicklistener Monitemclicklistener =NewOnitemclicklistener () {@Override Public voidOnitemclick (adapterview<?> Parent, view view,intposition,LongID) {//gets the character that the picture corresponds to, the resource IDString emotion = Appdefine.emoji + Emotiontext[currentindex * 15 +position]; intResId = Emotionimgs.get (Currentindex * 15 +position); Drawable drawable=getresources (). getdrawable (ResId); intLength = (int) getresources (). Getdimension (R.dimen.emotion_icon); Drawable.setbounds (0, 0, length, length); //create spannablestring based on charactersSpannablestring spannable =Newspannablestring (emotion); //Create imagespan based on drawableImagespan span =NewImagespan (drawable, Imagespan.align_bottom); Spannable.setspan (span,0, Emotion.length (), spannable.span_inclusive_exclusive); //Set Input Box contentsetsend.append (spannable);    Etsend.setselection (Etsend.gettext (). toString (). Length ()); }};

8, the list also should display the expression, the procedure is as follows:

Private Final String[] Emotiontext; // emoticon Text Private Final int [] Emotionimgs; // Emoticons Pictures Private Final Hashmap<string, integer> Emotiontotext; // text picture corresponding Private Final Pattern Mpattern; // regular Match

Step-by-step initialization of the required data

String PackageName =Context.getpackagename (); Resources Resource=context.getresources (); Emotiontext=context.getresources (). Getstringarray (R.array.emoji);intLength =Emotiontext.length;emotionimgs=New int[Length];emotiontotext=NewHashmap<string, integer>(); for(inti = 0;i < Length;i + +) {String key= Appdefine.emoji +Emotiontext[i]; intResId = Resource.getidentifier (Key, "drawable", PackageName); Emotionimgs[i]=resId; Emotiontotext.put (key, resId);}

Initialize regular match characters (Baidu search)

New StringBuilder (Emotiontext.length * 3);p atternstring.append (' (');  for (String str:emotiontext) {        + str));        Patternstring.append (' | ')  -1,                ")"= Pattern.compile (patternstring.tostring ());

The main text conversion picture method

 Publicspannablestring texttoemotion (context context, String text) {Matcher Matcher=mpattern.matcher (text); Spannablestring spannable=Newspannablestring (text);  while(Matcher.find ()) {//matching characters foundString FindText =Matcher.group (); //find the resource ID based on the corresponding relationship        intResId =Emotiontotext.get (FindText); Drawable drawable=context.getresources (). getdrawable (ResId); intLength = (int) context.getresources (). Getdimension (R.dimen.emotion_icon); Drawable.setbounds (0, 0, length, length); Imagespan span=NewImagespan (drawable, Imagespan.align_bottom);    Spannable.setspan (span, Matcher.start (), Matcher.end (), spannable.span_inclusive_exclusive); }    returnspannable;}

SOURCE Send: Https://github.com/PearLemon/XmppTest.git

Android XMPP-based Instant Messaging 3-Emoticons send