Android-GridLibrary

来源：互联网发布：淘宝装修收藏店铺编辑：程序博客网时间：2024/04/29 22:38

本篇主要是关于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;    }

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

0 0