android开发之&使用ViewPager加gridView实现菜单按钮分页滑动（类似QQ表情选择翻页效果）

刚做的项目中要用到菜单分页，以前没做过，仔细想了想，既然是分页，肯定就少不了ViewPager，大家都知道gridView可以实现九宫格，刚好满足我们的需求，我做的是gridview单行显示，大家如果需要向QQ表情一样多行显示，直接修改数据源就可以。

好了，上代码

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

b769
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;
}
}