IT博客汇 | ViewPager+GridView实现首页导航栏布局分页效果

ViewPager+GridView实现首页导航栏布局分页效果

summer发表于 2016-10-27 08:56:50

如图是效果图用ViewPager+GridView实现首页导航栏布局分页效果来实现的效果

Demo下载地址：

首先分析下思路

1.首先是怎么布局：整体是一个ViewPager将GridView作为一个View添加到ViewPager的adapter中，下方是圆点

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#CDCDCD" >

<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content" />

</RelativeLayout>

2.接下来时作为ViewPager的item布局文件GridView，（如果最外层是RelativeLayout或线型布局等，会转换异常）

<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/gridView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:numColumns="4">

</GridView>

3.是GridView适配器的编写，主要是注意数量如果一共有all=10条数据，每页最多max=8条的话，第一个页面就是个数是max=8，第二个就2个all-max

package com.item.jiejie.adapter;

import java.util.List;

import com.item.jiejie.ProdctBean;
import com.item.jiejie.R;
import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

/**
* GridView加载数据的适配器
* @author Administrator
*
*/
public class MyGridViewAdpter extends BaseAdapter{

private Context context;
private List<ProdctBean> lists;//数据源
private int mIndex; // 页数下标，标示第几页，从0开始
private int mPargerSize;// 每页显示的最大的数量

public MyGridViewAdpter(Context context, List<ProdctBean> lists,
int mIndex, int mPargerSize) {
this.context = context;
this.lists = lists;
this.mIndex = mIndex;
this.mPargerSize = mPargerSize;
}

/**
* 先判断数据及的大小是否显示满本页lists.size() > (mIndex + 1)*mPagerSize
* 如果满足，则此页就显示最大数量lists的个数
* 如果不够显示每页的最大数量，那么剩下几个就显示几个
*/
@Override
public int getCount() {
// TODO Auto-generated method stub
return lists.size() > (mIndex + 1) * mPargerSize ?
mPargerSize : (lists.size() - mIndex*mPargerSize);
}

@Override
public ProdctBean getItem(int arg0) {
// TODO Auto-generated method stub
return lists.get(arg0 + mIndex * mPargerSize);
}

@Override
public long getItemId(int arg0) {
// TODO Auto-generated method stub
return arg0 + mIndex * mPargerSize;
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {
// TODO Auto-generated method stub
ViewHolder holder = null;
if(convertView == null){
holder = new ViewHolder();
convertView = View.inflate(context, R.layout.item_view, null);
holder.tv_name = (TextView)convertView.findViewById(R.id.item_name);
holder.iv_nul = (ImageView)convertView.findViewById(R.id.item_image);
convertView.setTag(holder);
}else {
holder = (ViewHolder)convertView.getTag();
}
//重新确定position因为拿到的总是数据源，数据源是分页加载到每页的GridView上的
final int pos = position + mIndex * mPargerSize;//假设mPageSiez
//假设mPagerSize=8，假如点击的是第二页（即mIndex=1）上的第二个位置item(position=1),那么这个item的实际位置就是pos=9
holder.tv_name.setText(lists.get(pos).getName() + "");
holder.iv_nul.setImageResource(lists.get(pos).getUrl());
//添加item监听
// convertView.setOnClickListener(new View.OnClickListener() {
//
// @Override
// public void onClick(View arg0) {
// // TODO Auto-generated method stub
// Toast.makeText(context, "您点击了" + lists.get(pos).getName(), Toast.LENGTH_SHORT).show();
// }
// });
return convertView;
}
static class ViewHolder{
private TextView tv_name;
private ImageView iv_nul;
}
}

4.GridView的点击事件这里提供2种方法一种是在适配器用布局的点击事件来处理；第二种是Object obj = gridView.getItemAtPosition(position);来处理。

5.主程序将GridView作为View添加到ViewPager中代码如下

1 package com.item.jiejie;
2
3 import java.util.ArrayList;
4 import java.util.List;
5 import com.item.jiejie.adapter.MyGridViewAdpter;
6 import com.item.jiejie.adapter.MyViewPagerAdapter;
7 import android.app.Activity;
8 import android.os.Bundle;
9 import android.support.v4.view.ViewPager;
10 import android.view.View;
11 import android.widget.AdapterView;
12 import android.widget.AdapterView.OnItemClickListener;
13 import android.widget.GridView;
14 import android.widget.ImageView;
15 import android.widget.LinearLayout;
16 import android.widget.Toast;
17
18 /**
19 * 实现仿美团首页导航栏布局分页效果
20 * @author Administrator
21 *
22 */
23 public class MyActivity extends Activity {
24 private ViewPager viewPager;
25 private LinearLayout group;//圆点指示器
26 private ImageView[] ivPoints;//小圆点图片的集合
27 private int totalPage; //总的页数
28 private int mPageSize = 8; //每页显示的最大的数量
29 private List<ProdctBean> listDatas;//总的数据源
30 private List<View> viewPagerList;//GridView作为一个View对象添加到ViewPager集合中
31 //private int currentPage;//当前页
32
33 private String[] proName = {"名称0","名称1","名称2","名称3","名称4","名称5",
34 "名称6","名称7","名称8","名称9","名称10","名称11","名称12","名称13",
35 "名称14","名称15","名称16","名称17","名称18","名称19"};
36 @Override
37 protected void onCreate(Bundle savedInstanceState) {
38 // TODO Auto-generated method stub
39 super.onCreate(savedInstanceState);
40 setContentView(R.layout.activity_my);
41 //初始化控件
42 initView();
43 //添加业务逻辑
44 initData();
45 }
46
47 private void initView() {
48 // TODO Auto-generated method stub
49 viewPager = (ViewPager)findViewById(R.id.viewpager);
50 group = (LinearLayout)findViewById(R.id.points);
51 listDatas = new ArrayList<ProdctBean>();
52 for(int i =0 ; i < proName.length; i++){
53 listDatas.add(new ProdctBean(proName[i], R.drawable.iv_driving));
54 }
55 }
56 private void initData() {
57 // TODO Auto-generated method stub
58 //总的页数向上取整
59 totalPage = (int) Math.ceil(listDatas.size() * 1.0 / mPageSize);
60 viewPagerList = new ArrayList<View>();
61 for(int i = 0; i < totalPage; i++){
62 //每个页面都是inflate出一个新实例
63 final GridView gridView = (GridView)View.inflate(this, R.layout.item_gridview, null);
64 gridView.setAdapter(new MyGridViewAdpter(this, listDatas, i, mPageSize));
65 //添加item点击监听
66 gridView.setOnItemClickListener(new OnItemClickListener() {
67
68 @Override
69 public void onItemClick(AdapterView<?> arg0, View arg1,
70 int position, long arg3) {
71 // TODO Auto-generated method stub
72 Object obj = gridView.getItemAtPosition(position);
73 if(obj != null && obj instanceof ProdctBean){
74 System.out.println(obj);
75 Toast.makeText(MyActivity.this, ((ProdctBean)obj).getName(), Toast.LENGTH_SHORT).show();
76 }
77 }
78 });
79 //每一个GridView作为一个View对象添加到ViewPager集合中
80 viewPagerList.add(gridView);
81 }
82 //设置ViewPager适配器
83 viewPager.setAdapter(new MyViewPagerAdapter(viewPagerList));
84
85 //添加小圆点
86 ivPoints = new ImageView[totalPage];
87 for(int i = 0; i < totalPage; i++){
88 //循坏加入点点图片组
89 ivPoints[i] = new ImageView(this);
90 if(i==0){
91 ivPoints[i].setImageResource(R.drawable.page_focuese);
92 }else {
93 ivPoints[i].setImageResource(R.drawable.page_unfocused);
94 }
95 ivPoints[i].setPadding(8, 8, 8, 8);
96 group.addView(ivPoints[i]);
97 }
98 //设置ViewPager的滑动监听，主要是设置点点的背景颜色的改变
99 viewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener(){
100 @Override
101 public void onPageSelected(int position) {
102 // TODO Auto-generated method stub
103 //currentPage = position;
104 for(int i=0 ; i < totalPage; i++){
105 if(i == position){
106 ivPoints[i].setImageResource(R.drawable.page_focuese);
107 }else {
108 ivPoints[i].setImageResource(R.drawable.page_unfocused);
109 }
110 }
111 }
112 });
113 }
114 }

6.ViewPage的适配器代码

1 package com.item.jiejie.adapter;
2
3 import java.util.List;
4
5 import android.support.v4.view.PagerAdapter;
6 import android.view.View;
7 import android.view.ViewGroup;
8
9 /**
10 * ViewPage的适配器
11 * @author Administrator
12 *
13 */
14 public class MyViewPagerAdapter extends PagerAdapter{
15
16 private List<View> viewList;//View就二十GridView
17
18
19 public MyViewPagerAdapter(List<View> viewList) {
20 this.viewList = viewList;
21 }
22
23 @Override
24 public int getCount() {
25 // TODO Auto-generated method stub
26 return viewList!=null ? viewList.size() : 0;
27 }
28
29 @Override
30 public boolean isViewFromObject(View arg0, Object arg1) {
31 // TODO Auto-generated method stub
32 return arg0 == arg1;
33 }
34 /**
35 * 将当前的View添加到ViewGroup容器中
36 * 这个方法，return一个对象，这个对象表明了PagerAdapter适配器选择哪个对象放在当前的ViewPage上
37 */
38 @Override
39 public Object instantiateItem(ViewGroup container, int position) {
40 // TODO Auto-generated method stub
41 container.addView(viewList.get(position));
42 return viewList.get(position);
43 }
44
45 @Override
46 public void destroyItem(ViewGroup container, int position, Object object) {
47 // TODO Auto-generated method stub
48 container.removeView((View) object);
49 }
50 }