We all know that gridView can achieve nine grids, just to meet our needs. I do is a gridView single line display, if you need to QQ expression as many lines display, Just modify the data source.

Okay, code

public class MenuActivity extends Activity implements View.OnClickListener,AdapterView.OnItemClickListener{
    ViewPager vp;
    /** 当前表情页 */
    private int current = 0;
    /** 表情页界面集合 */
    private ArrayList<View> pageViews;
    /** 游标点集合 */
    private ArrayList<ImageView> pointViews;
    /** 游标显示布局 */
    private LinearLayout layout_point;
    /** 表情数据填充器 */
    private List<FaceAdapter> faceAdapters;
    /** 表情集合 */
    private List<List<ChatEmoji>> emojis;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.menu);
        vp= (ViewPager) findViewById(R.id.vp);
        layout_point = (LinearLayout) findViewById(R.id.iv_image);
        emojis =new ArrayList<>();
        List<ChatEmoji> chatEmoji=new ArrayList<>();
        chatEmoji.add(new ChatEmoji(R.drawable.emoji_1,"emoji_1","emoji_1"));
        chatEmoji.add(new ChatEmoji(R.drawable.emoji_2,"emoji_2","emoji_2"));
        chatEmoji.add(new ChatEmoji(R.drawable.emoji_3,"emoji_3","emoji_3"));
        chatEmoji.add(new ChatEmoji(R.drawable.emoji_4,"emoji_4","emoji_4"));
        chatEmoji.add(new ChatEmoji(R.drawable.emoji_5,"emoji_5","emoji_5"));
        emojis.add(chatEmoji);
        List<ChatEmoji> chatEmoji2=new ArrayList<>();
        chatEmoji2.add(new ChatEmoji(R.drawable.emoji_1,"emoji_11","emoji_11"));
        chatEmoji2.add(new ChatEmoji(R.drawable.emoji_2,"emoji_11","emoji_22"));
        chatEmoji2.add(new ChatEmoji(R.drawable.emoji_3,"emoji_11","emoji_33"));
        chatEmoji2.add(new ChatEmoji(R.drawable.emoji_4,"emoji_11","emoji_44"));
        chatEmoji2.add(new ChatEmoji(R.drawable.emoji_5,"emoji_11","emoji_55"));
        emojis.add(chatEmoji2);
        List<ChatEmoji> chatEmoji3=new ArrayList<>();
        chatEmoji3.add(new ChatEmoji(R.drawable.emoji_1,"emoji_111","emoji_111"));
        chatEmoji3.add(new ChatEmoji(R.drawable.emoji_2,"emoji_222","emoji_222"));
        chatEmoji3.add(new ChatEmoji(R.drawable.emoji_3,"emoji_333","emoji_333"));
        chatEmoji3.add(new ChatEmoji(R.drawable.emoji_4,"emoji_444","emoji_444"));
        chatEmoji3.add(new ChatEmoji(R.drawable.emoji_5,"emoji_555","emoji_555"));
        emojis.add(chatEmoji3);
        initData();
        Init_Point();

    }
    /**
     * 绘制游标背景
     */
    public void draw_Point(int index) {
        for (int i = 0; i < pointViews.size(); i++) {
            if (i!=index){
                pointViews.get(i).setBackgroundResource(R.drawable.a);
            }else{
                pointViews.get(i).setBackgroundResource(R.drawable.b);
            }
        }
    }
    private void initData() {
        pageViews = new ArrayList<View>();

        faceAdapters = new ArrayList<FaceAdapter>();
        for (int i = 0; i < emojis.size(); i++) {
            GridView view = new GridView(MenuActivity.this);
            FaceAdapter adapter = new FaceAdapter(MenuActivity.this, emojis.get(i));
            view.setAdapter(adapter);
            faceAdapters.add(adapter);
            view.setOnItemClickListener(this);
            view.setNumColumns(5);
            view.setBackgroundColor(Color.TRANSPARENT);
            view.setHorizontalSpacing(1);
            view.setVerticalSpacing(1);
            view.setStretchMode(GridView.STRETCH_COLUMN_WIDTH);
            view.setCacheColorHint(0);
            view.setPadding(5, 0, 5, 0);
            view.setSelector(new ColorDrawable(Color.TRANSPARENT));
            view.setLayoutParams(new GridView.LayoutParams(ViewPager.LayoutParams.FILL_PARENT,
                    GridView.LayoutParams.WRAP_CONTENT));
            view.setGravity(Gravity.CENTER);
            pageViews.add(view);
        }

        vp.setAdapter(new ViewPagerAdapter(pageViews));
        current = 0;
        vp.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                current = position - 1;
                // 描绘分页点
                draw_Point(position);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }
    /**
     * 初始化游标
     */
    private void Init_Point() {
        pointViews = new ArrayList<ImageView>();
        ImageView imageView;
        for (int i = 0; i < emojis.size(); i++) {
            imageView = new ImageView(MenuActivity.this);
            imageView.setBackgroundResource(R.drawable.a);
            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(
                    new ViewGroup.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,
                            LinearLayout.LayoutParams.WRAP_CONTENT));
            layoutParams.leftMargin = 10;
            layoutParams.rightMargin = 10;
            layoutParams.width = 20;
            layoutParams.height = 20;
            layout_point.addView(imageView, layoutParams);
            pointViews.add(imageView);
        }
        draw_Point(0);
    }

    @Override
    public void onClick(View v) {

    }

    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
        ChatEmoji emoji = (ChatEmoji) faceAdapters.get(current).getItem(position);
        Toast.makeText(this, emoji.faceName+"", Toast.LENGTH_SHORT).show();
    }
}

public class FaceAdapter extends BaseAdapter {

    private List<ChatEmoji> data;
    private Context context;
    private int size=0;
    WhoAroudApplication application;
    ImageLoader imageLoader;

    public FaceAdapter(Activity context, List<ChatEmoji> list) {
        this.context=context;
        this.data=list;
        this.size=list.size();
        application= (WhoAroudApplication) context.getApplication();
        imageLoader=application.imageLoader;
    }

    @Override
    public int getCount() {
        return this.size;
    }

    @Override
    public Object getItem(int position) {
        return data.get(position);
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ChatEmoji emoji=data.get(position);
        ViewHolder viewHolder=null;
        if (convertView==null){
            viewHolder=new ViewHolder();
            convertView=LayoutInflater.from(context).inflate(R.layout.item_face,null);
            viewHolder.iv_face=(NetworkImageView)convertView.findViewById(R.id.item_iv_face);
            viewHolder.tv_menuMessage=(TextView) convertView.findViewById(R.id.tv_menuMessage);
            convertView.setTag(viewHolder);
        }else {
            viewHolder=(ViewHolder)convertView.getTag();
        }
        String url="http://shenyue.zqlwl.com/sy"+emoji.faceName;
        viewHolder.iv_face.setImageUrl(url,imageLoader);
        viewHolder.tv_menuMessage.setText(emoji.character);
        return convertView;
    }

    class ViewHolder {
        NetworkImageView iv_face;
        TextView tv_menuMessage;
    }
}
Copy the code