Android-GridLibrary

本篇主要是关于ViewPager+GridView实现下图效果的探索，在不少App的主页面都有下图效果（当然下图减少了indicator的实现，实现起来比较简单就忽略了，以后开发遇到再说吧）

怎么实现上图效果呢？ViewPager的每个Item都为GridView，这样做只需要改变Adapter就可以达到目的了

首先我需要定义一个接口

/**
 * Created by idea on 2016/12/29.
 */
public interface IGridViewPager {

    int getColumnCount();

    void setColumnCount(int columnCount);

    int getRowCount();

    void setRowCount(int rowCount);

    int getReaCount();
}

PagerAdapter实现它，set、get方法对应下面两个变量，用于计算每个Item的个数、切割数据源、页码Position计算等，这两个参数可放到构造函数传入也可默认

  int columnCount = 4;
  int rowCount = 2;

大致伪代码块如下

/**
 * Created by idea on 2016/12/29.
 */
public class GridPagerAdapter extends PagerAdapter implements IGridViewPager {

    int columnCount = 4;
    int rowCount = 2;

    private ArrayList<GridViewPagerItem> list;

    @Override
    public int getColumnCount() {
        return columnCount;
    }

    @Override
    public void setColumnCount(int columnCount) {
        this.columnCount = columnCount;
    }

    @Override
    public int getRowCount() {
        return rowCount;
    }

    @Override
    public void setRowCount(int rowCount) {
        this.rowCount = rowCount;
    }

    @Override
    public int getReaCount() {
        int reaCount = 0;
        int size = list.size() % (getRowCount() * getColumnCount());
        if (size > 0) {
            reaCount = list.size() / rowCount / columnCount + 1;
        } else {
            reaCount = list.size() / rowCount / columnCount;
        }
        return reaCount;
    }

    @Override
    public int getCount() {
        return getReaCount();
    }
}

根据行列参数值，计算出总的Item，那么接下来就剩下View 的 instantiateItem了，这里大致分为两步

• 计算出当前position对应的数据源

• GridView绑定数据源，添加点击事件

计算数据源代码块如下

 @Override
 public Object instantiateItem(ViewGroup container, int position) {
        ArrayList<GridViewPagerItem> data = new ArrayList<>();
        int startIndex, endIndex;
        if (getReaCount() == position + 1) {
            //最后一页
            startIndex = position * getRowCount() * getColumnCount();
            endIndex = list.size();
        } else {
            startIndex = position * getRowCount() * getColumnCount();
            endIndex = (position + 1) * getRowCount() * getColumnCount();
        }
        for (int i = startIndex; i < endIndex; i++) {
            data.add(list.get(i));
        }
        View contentView = getView(container.getContext(), data);
        container.addView(contentView);
        return contentView;
    }

AbsListView子类绑定Adapter就简单了，这里个人用了Base-Adapter库和圆形图片库，代码块如下

 protected View getView(final Context context, ArrayList<GridViewPagerItem> data) {
        final GridView gridView = new GridView(context);
        ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.WRAP_CONTENT);
        gridView.setLayoutParams(params);
        gridView.setHorizontalSpacing(4);
        gridView.setVerticalSpacing(4);
        gridView.setNumColumns(getColumnCount());
        gridView.setVerticalScrollBarEnabled(false);
        gridView.setAdapter(new CommonAdapter<GridViewPagerItem>(context, R.layout.item_gridview, data) {
            @Override
            public void convert(ViewHolder holder, final GridViewPagerItem gridViewPagerItem) {

                LinearLayout linearLayout = holder.getView(R.id.gridview_item_parent);
                linearLayout.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        if(getOnItemClickListener()!=null){
                            getOnItemClickListener().onItemClick(gridViewPagerItem);
                        }
                    }
                });
                holder.setText(R.id.title, gridViewPagerItem.getTitle());
                CircleImageView circleImageView = holder.getView(R.id.image);
                if (gridViewPagerItem.getImageResId() != -1) {
                    circleImageView.setImageResource(gridViewPagerItem.getImageResId());
                } else {
                    Glide.with(context)
                            .load(gridViewPagerItem.getImageUrl())
                            .centerCrop()
                            .crossFade()
                            .into(circleImageView);
                }
            }
        });
        return gridView;
    }

大致代码就这么多，涉及到内容比较简单，这里做个记录，源码就不上传了