android 新浪微博客户端的表情功能的实现

这是一篇好文章，我转来收藏，技术的最高境界是分享。

最近在搞android 新浪微博客户端，有一些心得分享
弄android客户端表情功能可以用以下思路
1.首页把新浪的表情下载到本地一文件夹种，表情图片的命名要用新浪微博表情原来的命名
比如 新浪的害羞表情是shame.gif 那么你在本地也得命名为shame.gif,命名相同主要是为了能够匹配表情对应的code.
2.把本地的表情都放进android的资源文件里----drawable下面
3.访问新浪的表情接口(新浪返回的数据类型有json和xml两种，本人用xml)，把返回的信息，利用xml解析器解析出来的信息储存在一个Emotion.java的bean里，这样就可以根据Emotion.java的code找到一一对应的资源表情图片了
4.实现一个可以让用户选择的表情界面，本人用GridView实现
5.实现点击GridView的每一个item，处理根据item的index查找对应的表情code，然后再把code利用正则把code转换为相对应的表情图片，最后表情插入EditText进行发送。

下面是具体的实现过程

1.把新浪表情图片下载到本地的实现如下：(这个可以建一个java工程进行下载)

1. public void getFriendList() throws Exception {
2. BlogReleaseServiceImpl service = new BlogReleaseServiceImpl();
3. List<Emotions> list = service.getEmotion();
4. for (Emotions emotions : list) {
5. String path = emotions.getUrl();
6. String filename = path.substring(path.lastIndexOf("/") + 1,path.length());
7. URL url =  new URL(path);
8. HttpURLConnection conn = (HttpURLConnection)url.openConnection();
9. conn.setRequestMethod("GET");
10. conn.setReadTimeout(5 * 1000);
11. if(conn.getResponseCode() == 200){
12. InputStream is = conn.getInputStream();
13. byte[] data = readStream(is);
14. File file = new File("f: \\sina_images\\" + filename);
15. FileOutputStream fs = new FileOutputStream(file);
16. fs.write(data);
17. fs.close();
18. }else{
19. System.out.println("请求失败");
20. }
21. }
22. }
23. public byte[] readStream(InputStream is) throws Exception {
24. ByteArrayOutputStream os = new ByteArrayOutputStream();
25. byte[] buffer = new byte[2048];
26. int len = 0;
27. while((len = is.read(buffer)) != -1){
28. os.write(buffer,0,len);
29. }
30. is.close();
31. return os.toByteArray();
32. }

2:把本地的表情都放进android的资源文件里----drawable下面(这个就不用多说了，直接选取所有文件复制就行了)

3:

3.1访问新浪的表情接口，把返回的信息如下：

3.2 储存在一个Emotion.java里。Emotion.java代码如下：

3.2 储存在一个Emotion.java里。Emotion.java代码如下：

3.4sax解析

4：

4.1实现表情选择器---GridView

4.2 GridView的item-----gridview_emotion_item.xml

 

4.3代码加载表情图片到GridView进行显示

1. public void addexpression(View view){
2. if (expressionGriView.getVisibility() == View.GONE) {
3. expressionGriView.setVisibility(View.VISIBLE);
4. emotionList = BlogHomeActivity.emotions;
5. ArrayList<HashMap<String, Object>> lstImageItem = new ArrayList<HashMap<String, Object>>();
6. for(int i=0;i<70;i++)
7. {
8. emtions = emotionList.get(i);
9. if (emtions != null) {
10. HashMap<String, Object> map = new HashMap<String, Object>();
11. Field f;
12. try {
13. f = (Field)R.drawable.class.getDeclaredField(emtions.getImageName());
14. int j = f.getInt(R.drawable.class);
15. map.put("ItemImage", j);//添加图像资源的ID
16. lstImageItem.add(map);
17. } catch (SecurityException e) {
18. e.printStackTrace();
19. } catch (NoSuchFieldException e) {
20. e.printStackTrace();
21. }catch (IllegalArgumentException e) {
22. e.printStackTrace();
23. } catch (IllegalAccessException e) {
24. e.printStackTrace();
25. }
26. }
27. }
28. //生成适配器的ImageItem <====> 动态数组的元素，两者一一对应
29. SimpleAdapter saImageItems = new SimpleAdapter(this,
30. lstImageItem,//数据来源
31. R.layout.blog_emotion_list,
32. //动态数组与ImageItem对应的子项
33. new String[] {"ItemImage"},
34. //ImageItem的XML文件里面的一个ImageView
35. new int[] {R.id.blog_sendmsg_emotion});
36. expressionGriView.setAdapter(saImageItems);
37. } else {
38. expressionGriView.setVisibility(View.GONE);
39. }
40. }

5：实现点击GridView的每一个item，处理根据item的index查找对应的表情code，然后再把code利用正则把code转换为相对应的表情图片，最后表情插入EditText进行发送

5.1:code转换为图片:

1. public SpannableString txtToImg(String content){
2. SpannableString ss = new SpannableString(content);
3. int starts = 0;
4. int end = 0;
5. if(content.indexOf("[", starts) != -1 && content.indexOf("]", end) != -1){
6. starts = content.indexOf("[", starts);
7. end = content.indexOf("]", end);
8. String phrase = content.substring(starts,end + 1);
9. String imageName = "";
10. List<Emotions> list = BlogHomeActivity.emotions;
11. for (Emotions emotions : list) {
12. if (emotions.getPhrase().equals(phrase)) {
13. imageName = emotions.getImageName();
14. }
15. }
16. try {
17. Field f = (Field)R.drawable.class.getDeclaredField(imageName);
18. int i= f.getInt(R.drawable.class);
19. Drawable drawable = BlogSendMsgActivity.this.getResources().getDrawable(i);
20. if (drawable != null) {
21. drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
22. ImageSpan span = new ImageSpan(drawable, ImageSpan.ALIGN_BASELINE);
23. ss.setSpan(span, starts,end + 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
24. }
25. } catch (SecurityException e) {
26. e.printStackTrace();
27. } catch (NoSuchFieldException e) {
28. e.printStackTrace();
29. } catch (IllegalArgumentException e) {
30. e.printStackTrace();
31. } catch (IllegalAccessException e) {
32. }
33. }
34. return ss;
35. }

5.2：插入EditText

1. emtions = emotionList.get(position);//获取表情bean
2. int cursor = etcontent.getSelectionStart();
3. etcontent.getText().insert(cursor, txtToImg(emtions.getPhrase()));

写完收工，给个效果图：

转自：http://jspjson.iteye.com/blog/1109222