使用 ViewPager+GridView轻松打造可分页的GridView

一个可控行数的ViewPager+GridView

实现思路:

1. 首先获取总数据

2. 设置每页加载个数

3. 根据算法实现页数的计算 请在源码中查看


4. 根据页数进行填充数据  请在源码中查看

5. 自定义View继承LinearLayout在自定义view里 addview(GridView)

6. 绘制到viewPagerAdapter里面
    @Override
    public Object instantiateItem(ViewGroup container, int position) {

        自定义view gridLayout = new 自定义view;
        container.addView(gridLayout);
        return gridLayout;
    }

效果图

首先贴PageAdapter代码

public class MViewPagerAdapter extends PagerAdapter {
    private List<GridviewContentInfo> list;
    private Context context;
    private int allpage = 1;//总页数默认为1
    private int pagesize = 4;//每页显示个数

    public MViewPagerAdapter(List<GridviewContentInfo> list, int pagesize, Context context) {
        this.list = list;
        this.context = context;
        this.pagesize = pagesize;
        if (list != null)
            //计算总页数
            if (list.size() % pagesize >= 1) {
                allpage = list.size() / pagesize + 1;
            } else {
                allpage = list.size() / pagesize;
            }
    }

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

    @Override
    public Object instantiateItem(ViewGroup container, int position) {

        List<GridviewContentInfo> data = new ArrayList<>();

        //计算每页传递数据
        for (int i = position * pagesize; i < (position + 1) * pagesize; i++) {
            if (i >= list.size())
                break;
            data.add(list.get(i));
        }
        ContentGridLayout gridLayout = new ContentGridLayout(context, data, pagesize);
        //添加到父布局
        container.addView(gridLayout);

        return gridLayout;
    }

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

    /**
     * 必须重写此方法不重写会报错具体原因在不清楚
     *
     * @param container
     * @param position
     * @param object
     */
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
//        super.destroyItem(container, position, object);
    }
}

然后是每个ViewPagerItem布局（一个自定义View）

public class ContentGridLayout extends LinearLayout implements AdapterView.OnItemClickListener {
    private GridView mGridView;
    private View mcontentview;
    private List<GridviewContentInfo> list;

    public ContentGridLayout(Context context, List<GridviewContentInfo> list, int pagesize) {
        super(context);
        this.list = list;

        mcontentview = LayoutInflater.from(context).inflate(R.layout.content_gridlayout, null);
        mGridView = (GridView) mcontentview.findViewById(R.id.gridview_content);
        mGridView.setNumColumns(pagesize / 2);//设置每行个数
        mGridView.setAdapter(new MAdapter(context, list));
        mGridView.setSelector(new ColorDrawable());//取消自带点击效果
        addView(mcontentview);
        mGridView.setOnItemClickListener(this);//自定义点击事件
    }

    private String[] content = {"红包助手", "地图", "公交线路", "待定1", "待定2", "待定3"};

    @Override
    public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
        if (list.get(i).getContentValue().equals("红包助手"))
            switch (list.get(i).getContentValue()) {
                case "红包助手":
                    break;
                case "地图":
                    break;
                case "公交线路":
                    break;
                case "待定1":
                    break;
                case "待定2":
                    break;
                case "待定3":
                    break;
            }

    }


    private class MAdapter extends BaseAdapter {
        private Context context;
        private List<GridviewContentInfo> list;

        public MAdapter(Context context, List<GridviewContentInfo> list) {
            this.context = context;
            this.list = list;
        }

        @Override
        public int getCount() {
            return list == null ? 0 : list.size();
        }

        @Override
        public Object getItem(int i) {
            return list == null ? 0 : list.get(i);
        }

        @Override
        public long getItemId(int i) {
            return i;
        }

        @Override
        public View getView(int i, View contentview, ViewGroup viewGroup) {
            ViewHolder viewHolder = null;
            contentview = LayoutInflater.from(context).inflate(R.layout.item_gridview_content, null);
            viewHolder = new ViewHolder(contentview);
            viewHolder.mImage.setImageResource(list.get(i).getImage());
            viewHolder.mTitle.setText(list.get(i).getContentValue());
            return contentview;
        }

        private class ViewHolder {
            TextView mTitle;
            ImageView mImage;

            public ViewHolder(View view) {
                mTitle = (TextView) view.findViewById(R.id.tv_itme_grid_content_title);
                mImage = (ImageView) view.findViewById(R.id.iv_item_grid_content_img);
            }
        }
    }
}

然后是Activity：

public class MainActivity extends AppCompatActivity {
    private ViewPager viewPager1, viewPager2;
    private int[] image = {R.mipmap.ic_launcher, R.mipmap.ic_launcher, R.mipmap.ic_launcher, R.mipmap.ic_launcher, R.mipmap.ic_launcher, R.mipmap.ic_launcher, R.mipmap.ic_launcher, R.mipmap.ic_launcher, R.mipmap.ic_launcher, R.mipmap.ic_launcher, R.mipmap.ic_launcher, R.mipmap.ic_launcher, R.mipmap.ic_launcher, R.mipmap.ic_launcher, R.mipmap.ic_launcher,};
    private String[] content = {"红包助手", "地图", "公交线路", "待定1", "待定2", "待定3", "待定1", "待定2", "待定3", "待定1", "待定2", "待定3", "待定1", "待定2", "待定3"};
    private String[] imageUrl = {"", "", "", "", "", "", "", "", "", "", "", "", "", "", "",};
    private int pagesize = 4;//每页显示个数
    private List<GridviewContentInfo> listContent;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initData();
        initview();
    }

    private void initview() {

        viewPager1 = (ViewPager) findViewById(R.id.viewpager1);
        viewPager2 = (ViewPager) findViewById(R.id.viewpager2);
        viewPager1.setAdapter(new MViewPagerAdapter(listContent, pagesize, this));
        viewPager2.setAdapter(new MViewPagerAdapter(listContent, 8, this));
    }

    private void initData() {
        listContent = new ArrayList<>();
        GridviewContentInfo info;
        for (int i = 0; i < image.length; i++) {
            info = new GridviewContentInfo();
            info.setMainContentInfo(image[i], imageUrl[i], content[i]);
            listContent.add(info);
        }

    }
}

一个实体类：GridviewContentInfo

public class GridviewContentInfo {
    private int image;//图片
    private String imageUrl;//图片地址
    private String contentValue;//内容

    public void setMainContentInfo(int image, String imageUrl, String contentValue) {
        this.image = image;
        this.imageUrl = imageUrl;
        this.contentValue = contentValue;
    }

    public int getImage() {
        return image;
    }

    public void setImage(int image) {
        this.image = image;
    }

    public String getImageUrl() {
        return imageUrl;
    }

    public void setImageUrl(String imageUrl) {
        this.imageUrl = imageUrl;
    }

    public String getContentValue() {
        return contentValue;
    }

    public void setContentValue(String contentValue) {
        this.contentValue = contentValue;
    }
}

Activity布局文件activity_main

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.yrmao.mviewpagergridview.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorAccent"></android.support.v4.view.ViewPager>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary">

        </android.support.v4.view.ViewPager>
    </LinearLayout>


</LinearLayout>

自定义view子布局文件：content_gridlayout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <GridView
        android:id="@+id/gridview_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:numColumns="2"
        android:scrollbars="none"></GridView>

</RelativeLayout>

GridView Item布局文件item_gridview_content

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/iv_item_grid_content_img"
        android:layout_width="45dp"
        android:layout_height="45dp"
        android:layout_centerInParent="true"
        android:src="@mipmap/ic_launcher" />

    <TextView
        android:id="@+id/tv_itme_grid_content_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/iv_item_grid_content_img"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="45dp" />

</RelativeLayout>

GitHub地址： https://git.oschina.net/yrmao/MViewPagerGridView.git