教你如何实现淘宝天猫的首页可以滑动的gridview导航

源码https://github.com/helloworld107/MeituanDemon/new/master?readme=1

效果图

源码分析：

我们应该知道一个不能滑动的列表图标可以用girdview或者recycleview来实现，如果可以滑动的话几乎都是考虑viewpager嵌套多个gridview，思路并不算很难，比较复杂的是需要考虑当数据传递进去后，每一页要显示相对应集合元素的数据，对于拿到的集合数据要经过计算算出显示的翻页数和每一页的数量及想对应元素位置的角标，二话不说，撸代码

对于每一个具体条目我们可以写一个实体bean，这里只是用到了文字和图标

public class HeaderViewBean {

    public String name;
    public int iconRes;

    public HeaderViewBean(String name, int iconRes) {
        this.name = name;
        this.iconRes = iconRes;
    }
}

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mViewPagerGrid = (ViewPager) findViewById(R.id.vp);

        //添加数据，上面的实体bean集合
        initDatas();
        LayoutInflater inflater = LayoutInflater.from(this);
        //塞GridView至ViewPager中：每页的个数
        int pageSize = getResources().getInteger(R.integer.HomePageHeaderColumn) * 2;
        //一共的页数等于 总数/每页数量，并取整  ceil方法为向上取整，非四舍五入，这样正好满足了只要有一个数据也要显示一页的情况
        int pageCount = (int) Math.ceil(mDatas.size() * 1.0 / pageSize);
        //ViewPager viewpager = new ViewPager(this);

        mViewPagerGridList = new ArrayList<View>();
        for (int index = 0; index < pageCount; index++) {
            //每个页面都是inflate出一个新实例
            GridView grid = (GridView) inflater.inflate(R.layout.item_viewpager, mViewPagerGrid, false);
            grid.setAdapter(new GridViewAdapter(this, mDatas, index));
            grid.setOnItemClickListener(new AdapterView.OnItemClickListener() {
                @Override
                public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
                    Toast.makeText(MainActivity.this, "currentPagerPosition:" + i + "\n"+"totoal:" + l, Toast.LENGTH_SHORT).show();
                }
            });
            mViewPagerGridList.add(grid);
        }
       

        mViewPagerGrid.setAdapter(new MyViewPagerAdapter(mViewPagerGridList));
    }

viewpager需要传入需要的gridview

public class MyViewPagerAdapter extends PagerAdapter {
    private List<View> mViewList;

    public MyViewPagerAdapter(List<View> mViewList) {
        this.mViewList = mViewList;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView(mViewList.get(position));
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        container.addView(mViewList.get(position));
        return (mViewList.get(position));
    }

    @Override
    public int getCount() {
        if (mViewList == null)
            return 0;
        return mViewList.size();
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }
}

代码都比较简单，比较复杂的是girdviewadapter的处理

public class GridViewAdapter extends BaseAdapter {
    private List<HeaderViewBean> mDatas;
    private LayoutInflater mLayoutInflater;
    /**
     * 页数下标,从0开始(通俗讲第几页)
     */
    private int mIndex;
    /**
     * 每页显示最大条目个数 ,默认是dimes.xml里 HomePageHeaderColumn 属性值的两倍(每页多少个图标)
     */
    private int mPageSize;

    public GridViewAdapter(Context context, List<HeaderViewBean> mDatas, int mIndex) {
        this.mDatas = mDatas;
        mLayoutInflater = LayoutInflater.from(context);
        this.mIndex = mIndex;
        mPageSize = context.getResources().getInteger(R.integer.HomePageHeaderColumn) * 2;
    }

    /**
     * 先判断数据集的大小是否足够显示满本页？mDatas.size() > (mIndex+1)*mPageSize, 角标从0开始所以加1
     * 如果够，则直接返回每一页显示的最大条目个数mPageSize,
     * 如果不够，则有几项返回几,(mDatas.size() - mIndex * mPageSize);(说白了 最后一页就显示剩余item)，同样减去的也是最后一页前面的

 	所以页数，因为角标是0开始，所以不是mIndex-1
     */
    @Override
    public int getCount() {
        return mDatas.size() > (mIndex + 1) * mPageSize ? mPageSize : (mDatas.size() - mIndex * mPageSize);

    }

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

    @Override
    public long getItemId(int position) {
        return position + mIndex * mPageSize;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        Log.i("TAG", "position:" + position+"   :"+this);
        ViewHolder vh = null;
        if (convertView == null) {
            convertView = mLayoutInflater.inflate(R.layout.item_gridview_header, parent, false);
            vh = new ViewHolder();
            vh.tv = (TextView) convertView.findViewById(R.id.textView);
            vh.iv = (ImageView) convertView.findViewById(R.id.imageView);
            convertView.setTag(vh);
        } else {
            vh = (ViewHolder) convertView.getTag();
        }
        /**
         * 在给View绑定显示的数据时，计算正确的position = position + mIndex * mPageSize，
         */
        int pos = position + mIndex * mPageSize;
        vh.tv.setText(mDatas.get(pos).name);
        vh.iv.setImageResource(mDatas.get(pos).iconRes);
        return convertView;
    }


    class ViewHolder {
        public TextView tv;
        public ImageView iv;
    }
}