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;
    }

大致代碼就這麼多，涉及到內容比較簡單，這裏做個記錄，源碼就不上傳了