使用 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