仿淘宝、京东、美团使用ViewPager+GridView实现左右滑动查看更多分类导航功能

一：使用GridView作为每个ViewPager的页面，也就是说每个ViewPager的页面都是inflate出一个GridView新实例

二：如何将GridView和ViewPager关联起来：在刚刚第一点所说的，有多少个ViewPager的页面就会inflate出多少个GridView作为每页的VIew加入集合中，并将这个集合作为ViewPager的数据源传给ViewPager的Adapter

//总的页数=总数/每页数量，并取整
pageCount = (int) Math.ceil(mDatas.size() * 1.0 / pageSize);
mPagerList = new ArrayList();
for (int i = 0; i < pageCount; i++) {
// 每个页面都是inflate出一个新实例
GridView gridView = (GridView) inflater.inflate(R.layout.gridview, mPager, false);
gridView.setAdapter(new GridViewAdapter(this, mDatas, i, pageSize));
mPagerList.add(gridView);

        gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                int pos = position + curIndex * pageSize;
                Toast.makeText(MainActivity.this, mDatas.get(pos).getName(), Toast.LENGTH_SHORT).show();
            }
        });
    }

三：在ViewPager翻页时，如何让GridView显示正确的数据：

（1）给GridView设置Adapter时，除了需要传入总数据集mDatas之外，还需要传入当前页数以及每一页显示的个数，然后经过计算得出正确的count和应该显示的View的数据

（2）在GridView中Adapter中修改getCount()方法：

/**
* 先判断数据集的大小是否足够显示满本页,如果够，则直接返回每一页显示的最大条目个数pageSize,如果不够，则有几项就返回几,(也就是最后一页的时候就显示剩余item)
*/
@Override
public int getCount() {
return mDatas.size() > (curIndex + 1) * pageSize ? pageSize : (mDatas.size() - curIndex * pageSize);

}

（3）修改getView()方法：

在给View绑定显示的数据时，根据当前下标curIndex和每页显示最大数pageSize ，计算一下正确的position = position + curIndex * pageSize

@Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder viewHolder = null;
if (convertView == null) {
convertView = inflater.inflate(R.layout.item_gridview, parent, false);
viewHolder = new ViewHolder();
viewHolder.tv = (TextView) convertView.findViewById(R.id.textView);
viewHolder.iv = (ImageView) convertView.findViewById(R.id.imageView);
convertView.setTag(viewHolder);
} else {
viewHolder = (ViewHolder) convertView.getTag();
}
/**
* 在给View绑定显示的数据时，计算正确的position = position + curIndex * pageSize
*/
int pos = position + curIndex * pageSize;
viewHolder.tv.setText(mDatas.get(pos).name);
viewHolder.iv.setImageResource(mDatas.get(pos).iconRes);
return convertView;
}
（4）修改getItem()和getItemId()方法

@Override
public Object getItem(int position) {
return mDatas.get(position + curIndex * pageSize);
}

@Override
public long getItemId(int position) {
    return position + curIndex * pageSize;
}

四、如何在ViewPager翻页时，正确显示目前选中的是那一页呢，也就是说在左右滑动时，下面小圆点的状态也要相应地做出改变：

/**
* 设置圆点
*/
public void setOvalLayout() {
for (int i = 0; i < pageCount; i++) {
mLlDot.addView(inflater.inflate(R.layout.dot, null));
}
// 默认显示第一页
mLlDot.getChildAt(0).findViewById(R.id.v_dot)
.setBackgroundResource(R.drawable.dot_selected);
mPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
public void onPageSelected(int position) {
// 取消圆点选中
mLlDot.getChildAt(curIndex)
.findViewById(R.id.v_dot)
.setBackgroundResource(R.drawable.dot_normal);
// 圆点选中
mLlDot.getChildAt(position)
.findViewById(R.id.v_dot)
.setBackgroundResource(R.drawable.dot_selected);
curIndex = position;
}

        public void onPageScrolled(int arg0, float arg1, int arg2) {
        }

        public void onPageScrollStateChanged(int arg0) {
        }
    });
}

五、在初始化数据源时，如何动态获取资源ID：

/**
* 初始化数据源
*/
private void initDatas() {
mDatas = new ArrayList();
for (int i = 0; i < titles.length; i++) {
//动态获取资源ID，第一个参数是资源名，第二个参数是资源类型例如drawable，string等，第三个参数包名
int imageId = getResources().getIdentifier(“ic_category_” + i, “mipmap”, getPackageName());
mDatas.add(new Model(titles[i], imageId));
}
}
就这五点吧，现在我们先来看看美团网首页使用ViewPager+GridView实现左右滑动查看更多分类的效果图：

这里写图片描述

再来看一下我们最终效果图：

这里写图片描述

现在我们来看下项目结构图

这里写图片描述

现在我把完整的代码贴出来，由于代码都有注释，下面就不进行一一解释啦

1、MainActivity

package per.lijuan.meituan;

import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.AdapterView;
import android.widget.GridView;
import android.widget.LinearLayout;
import android.widget.Toast;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

private String[] titles = {"美食", "电影", "酒店住宿", "休闲娱乐", "外卖", "自助餐", "KTV", "机票/火车票", "周边游", "美甲美睫",
        "火锅", "生日蛋糕", "甜品饮品", "水上乐园", "汽车服务", "美发", "丽人", "景点", "足疗按摩", "运动健身", "健身", "超市", "买菜",
        "今日新单", "小吃快餐", "面膜", "洗浴/汗蒸", "母婴亲子", "生活服务", "婚纱摄影", "学习培训", "家装", "结婚", "全部分配"};
private ViewPager mPager;
private List<View> mPagerList;
private List<Model> mDatas;
private LinearLayout mLlDot;
private LayoutInflater inflater;
/**
 * 总的页数
 */
private int pageCount;
/**
 * 每一页显示的个数
 */
private int pageSize = 10;
/**
 * 当前显示的是第几页
 */
private int curIndex = 0;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    mPager = (ViewPager) findViewById(R.id.viewpager);
    mLlDot = (LinearLayout) findViewById(R.id.ll_dot);

    //初始化数据源
    initDatas();
    inflater = LayoutInflater.from(this);
    //总的页数=总数/每页数量，并取整
    pageCount = (int) Math.ceil(mDatas.size() * 1.0 / pageSize);
    mPagerList = new ArrayList<View>();
    for (int i = 0; i < pageCount; i++) {
        // 每个页面都是inflate出一个新实例
        GridView gridView = (GridView) inflater.inflate(R.layout.gridview, mPager, false);
        gridView.setAdapter(new GridViewAdapter(this, mDatas, i, pageSize));
        mPagerList.add(gridView);

        gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                int pos = position + curIndex * pageSize;
                Toast.makeText(MainActivity.this, mDatas.get(pos).getName(), Toast.LENGTH_SHORT).show();
            }
        });
    }
    //设置适配器
    mPager.setAdapter(new ViewPagerAdapter(mPagerList));
    //设置圆点
    setOvalLayout();
}

/**
 * 初始化数据源
 */
private void initDatas() {
    mDatas = new ArrayList<Model>();
    for (int i = 0; i < titles.length; i++) {
        //动态获取资源ID，第一个参数是资源名，第二个参数是资源类型例如drawable，string等，第三个参数包名
        int imageId = getResources().getIdentifier("ic_category_" + i, "mipmap", getPackageName());
        mDatas.add(new Model(titles[i], imageId));
    }
}

/**
 * 设置圆点
 */
public void setOvalLayout() {
    for (int i = 0; i < pageCount; i++) {
        mLlDot.addView(inflater.inflate(R.layout.dot, null));
    }
    // 默认显示第一页
    mLlDot.getChildAt(0).findViewById(R.id.v_dot)
            .setBackgroundResource(R.drawable.dot_selected);
    mPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        public void onPageSelected(int position) {
            // 取消圆点选中
            mLlDot.getChildAt(curIndex)
                    .findViewById(R.id.v_dot)
                    .setBackgroundResource(R.drawable.dot_normal);
            // 圆点选中
            mLlDot.getChildAt(position)
                    .findViewById(R.id.v_dot)
                    .setBackgroundResource(R.drawable.dot_selected);
            curIndex = position;
        }

        public void onPageScrolled(int arg0, float arg1, int arg2) {
        }

        public void onPageScrollStateChanged(int arg0) {
        }
    });
}

}
2、activity_main.xml