前言

在Android項目中由於是社交類的項目,所以裡面用到了表情,表情是emoji表情,所以實現了之後,弄個demo分享一下,主要實現了表情的選擇和顯示,只是一個demo,剩下的靠大家自己去擴展

國際慣例,先來個效果

demo比較簡單,就是展示表情並且點擊之後顯示在TextView上,如果你不會,那就往下一起做吧！

xml布局

列表是使用的是v7包裡面的RecyclerView控件,然後上面有一個文本控件

列表使用的item的xml布局

Activity中代碼

public class MainActivity extends AppCompatActivity {

    private RecyclerView rv = null;

    private TextView tv = null;

    /**
     * 顯示表情的適配器
     */
    private CommonRecyclerViewAdapter adapter = null;

    /**
     * 管理表情的布局管理器
     */
    private StaggeredGridLayoutManager layoutManager = null;

    /**
     * 顯示的數據
     */
    private List data = new ArrayList();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //初始化列表控件
        rv = (RecyclerView) findViewById(R.id.rv);
        tv = (TextView) findViewById(R.id.tv);

        //添加emoji表情資源
        addAllEmogi();

        rv.setBackgroundColor(Color.GRAY);

        //創建適配器
        adapter = new SelectEmojiFragmentAdapter(this, data);

        //創建布局管理器
        layoutManager = new StaggeredGridLayoutManager(3, StaggeredGridLayoutManager.HORIZONTAL);
        rv.setLayoutManager(layoutManager);

        //創建條目間隔
        EmojiSpaceItemDecoration itemDecoration = new EmojiSpaceItemDecoration();
        rv.addItemDecoration(itemDecoration);

        //設置適配器
        rv.setAdapter(adapter);

        adapter.setOnRecyclerViewItemClickListener(new CommonRecyclerViewAdapter.OnRecyclerViewItemClickListener() {
            @Override
            public void onItemClick(View v, int position) {
                SpannableString s = new SpannableString("emoji");
                ImageSpan i = new ImageSpan(MainActivity.this, data.get(position));
                s.setSpan(i, 0, 5, SpannableString.SPAN_EXCLUSIVE_EXCLUSIVE);
                tv.append(s);
            }
        });

    }

    /**
     * 加入所有表情
     */
    private void addAllEmogi() {
        data.add(R.mipmap.emoji_0);
        data.add(R.mipmap.emoji_1);
        data.add(R.mipmap.emoji_2);
        data.add(R.mipmap.emoji_3);
        data.add(R.mipmap.emoji_4);
        data.add(R.mipmap.emoji_5);
        data.add(R.mipmap.emoji_6);
        data.add(R.mipmap.emoji_7);
        data.add(R.mipmap.emoji_8);
        data.add(R.mipmap.emoji_9);
        data.add(R.mipmap.emoji_10);
        data.add(R.mipmap.emoji_11);
        data.add(R.mipmap.emoji_12);
        data.add(R.mipmap.emoji_13);
        data.add(R.mipmap.emoji_14);
        data.add(R.mipmap.emoji_15);
        data.add(R.mipmap.emoji_16);
        data.add(R.mipmap.emoji_17);
        data.add(R.mipmap.emoji_18);
        data.add(R.mipmap.emoji_19);
        data.add(R.mipmap.emoji_20);
        data.add(R.mipmap.emoji_21);
        data.add(R.mipmap.emoji_22);
        data.add(R.mipmap.emoji_23);
        data.add(R.mipmap.emoji_24);
        data.add(R.mipmap.emoji_25);
        data.add(R.mipmap.emoji_26);
        data.add(R.mipmap.emoji_27);
        data.add(R.mipmap.emoji_28);
        data.add(R.mipmap.emoji_29);
        data.add(R.mipmap.emoji_30);
        data.add(R.mipmap.emoji_31);
        data.add(R.mipmap.emoji_32);
        data.add(R.mipmap.emoji_33);
        data.add(R.mipmap.emoji_34);
        data.add(R.mipmap.emoji_35);
        data.add(R.mipmap.emoji_36);
        data.add(R.mipmap.emoji_37);
        data.add(R.mipmap.emoji_38);
        data.add(R.mipmap.emoji_39);
        data.add(R.mipmap.emoji_40);
        data.add(R.mipmap.emoji_41);
        data.add(R.mipmap.emoji_42);
        data.add(R.mipmap.emoji_43);
        data.add(R.mipmap.emoji_44);
        data.add(R.mipmap.emoji_45);
        data.add(R.mipmap.emoji_46);
        data.add(R.mipmap.emoji_47);
        data.add(R.mipmap.emoji_48);
        data.add(R.mipmap.emoji_49);
        data.add(R.mipmap.emoji_50);
        data.add(R.mipmap.emoji_51);
        data.add(R.mipmap.emoji_52);
        data.add(R.mipmap.emoji_53);
        data.add(R.mipmap.emoji_54);
        data.add(R.mipmap.emoji_55);
        data.add(R.mipmap.emoji_56);
        data.add(R.mipmap.emoji_57);
        data.add(R.mipmap.emoji_58);
        data.add(R.mipmap.emoji_59);
        data.add(R.mipmap.emoji_60);
        data.add(R.mipmap.emoji_61);
        data.add(R.mipmap.emoji_62);
        data.add(R.mipmap.emoji_63);
        data.add(R.mipmap.emoji_64);
        data.add(R.mipmap.emoji_65);
        data.add(R.mipmap.emoji_66);
        data.add(R.mipmap.emoji_67);
        data.add(R.mipmap.emoji_68);
        data.add(R.mipmap.emoji_69);
        data.add(R.mipmap.emoji_70);
        data.add(R.mipmap.emoji_71);
        data.add(R.mipmap.emoji_72);
        data.add(R.mipmap.emoji_73);
        data.add(R.mipmap.emoji_74);
        data.add(R.mipmap.emoji_75);
        data.add(R.mipmap.emoji_76);
        data.add(R.mipmap.emoji_77);
        data.add(R.mipmap.emoji_78);
        data.add(R.mipmap.emoji_79);
        data.add(R.mipmap.emoji_80);
        data.add(R.mipmap.emoji_81);
        data.add(R.mipmap.emoji_82);
        data.add(R.mipmap.emoji_83);
        data.add(R.mipmap.emoji_84);
        data.add(R.mipmap.emoji_85);
        data.add(R.mipmap.emoji_86);
        data.add(R.mipmap.emoji_87);
        data.add(R.mipmap.emoji_88);
        data.add(R.mipmap.emoji_89);
        data.add(R.mipmap.emoji_90);
        data.add(R.mipmap.emoji_91);
        data.add(R.mipmap.emoji_92);
        data.add(R.mipmap.emoji_93);
        data.add(R.mipmap.emoji_94);
        data.add(R.mipmap.emoji_95);
        data.add(R.mipmap.emoji_96);
        data.add(R.mipmap.emoji_97);
        data.add(R.mipmap.emoji_98);
        data.add(R.mipmap.emoji_99);
        data.add(R.mipmap.emoji_100);
        data.add(R.mipmap.emoji_101);
        data.add(R.mipmap.emoji_102);
        data.add(R.mipmap.emoji_103);
        data.add(R.mipmap.emoji_104);
        data.add(R.mipmap.emoji_105);
        data.add(R.mipmap.emoji_106);
        data.add(R.mipmap.emoji_107);
        data.add(R.mipmap.emoji_108);
        data.add(R.mipmap.emoji_109);
        data.add(R.mipmap.emoji_110);
        data.add(R.mipmap.emoji_111);
        data.add(R.mipmap.emoji_112);
        data.add(R.mipmap.emoji_113);
        data.add(R.mipmap.emoji_114);
        data.add(R.mipmap.emoji_115);
        data.add(R.mipmap.emoji_116);
        data.add(R.mipmap.emoji_117);
        data.add(R.mipmap.emoji_118);
        data.add(R.mipmap.emoji_119);
        data.add(R.mipmap.emoji_120);
        data.add(R.mipmap.emoji_121);
        data.add(R.mipmap.emoji_122);
        data.add(R.mipmap.emoji_123);
        data.add(R.mipmap.emoji_124);
        data.add(R.mipmap.emoji_125);
        data.add(R.mipmap.emoji_126);
        data.add(R.mipmap.emoji_127);
        data.add(R.mipmap.emoji_128);
        data.add(R.mipmap.emoji_129);
    }

}

可以看到我們有一個方法很長,就是添加表情的id到我們的集合中去的,因為要在列表中顯示嘛！

布局管理器用了v7包裡面自帶的StaggeredGridLayoutManager,有橫向和縱向的GridView的效果

適配器為了快速,使用了通用適配器,如果不明白的可以參看我另一篇博客,傳送門:

http://blog.csdn.net/u011692041/article/details/51910677

適配器的代碼

/**
 * Created by cxj on 2016/7/30.
 * 顯示表情的適配器
 */
public class SelectEmojiFragmentAdapter extends CommonRecyclerViewAdapter {
    /**
     * 構造函數
     *
     * @param context 上下文
     * @param data    顯示的數據
     */
    public SelectEmojiFragmentAdapter(Context context, List data) {
        super(context, data);
    }

    @Override
    public void convert(CommonRecyclerViewHolder h, Integer entity, int position) {
        h.setImage(R.id.iv, entity);
    }

    @Override
    public int getLayoutViewId(int viewType) {
        return R.layout.item;
    }
}

h.setImage(R.id.iv, entity);這句代碼其實就是獲取了item中的ImageView控件,然後設置了圖片資源,這裡只不是被封裝了罷了,你們可以使用原始的

在Activity裡面注冊的item點擊事件裡面,我們創建了一個可擴展的字符串,他是顯示表情的最關鍵的東西.至於它怎麼使用的,麻煩大家自己去查閱吧,網上用法很多,這裡就不復制用法過來了