android開發之&使用ViewPager加gridView實現選單按鈕分頁滑動（類似QQ表情選擇翻頁效果）
阿新 • • 發佈：2018-12-30
剛做的專案中要用到選單分頁，以前沒做過，仔細想了想，既然是分頁，肯定就少不了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 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; } }