ViewPager + GridView实现GridView分页

概述

通过ViewPager实现GridView的分页

实现

ViewPager通过设置PagerAdapter实现分页。每一页的布局是一个GridView。GridView通过设置自己adapter渲染GridView。

ViewPager：分页器。
GridViewPageAdapter：继承自PagerAdapter。ViewPager的适配器。
GridView：网格布局
GridViewAdapter、：GridView的适配器。继承自通过用型adapter，CommonAdapter

GridView的adapter，GridViewAdapter的布局文件，grid_view_item

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android">

    <data class=".GridItemBinding">

        <import type="android.view.View"></import>
    </data>

    <RelativeLayout  android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:minHeight="80dp">

        <ImageView  android:id="@+id/item_img" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true"/>

        <TextView  android:id="@+id/item_name" android:layout_centerHorizontal="true" android:layout_marginTop="6dp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/item_img" android:gravity="center" android:textColor="#5b5a5a" android:textSize="12sp" android:text="Item"/>

    </RelativeLayout>
</layout>

GridView的adapter，GridViewAdapter

package com.syz.example.adapter;

import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

import com.syz.example.R;

import java.util.List;

/** * Created by SYZ on 16/10/28. */

public class GridViewAdapter extends CommonAdapter{

    public GridViewAdapter(List<String> data){
        super(data);
    }

    @Override
    public int getItemViewResId() {
        return R.layout.grid_view_item;
    }

    @Override
    public View getItemView(int position, View convertView, ViewHolder viewHolder) {
        TextView itemName = viewHolder.getView(R.id.item_name);
        itemName.setText((CharSequence) getData().get(position));
        ImageView icon = viewHolder.getView(R.id.item_img);
        if (position%7 ==0){
            icon.setImageResource(R.drawable.grid_1);
        } else if(position%7 ==1){
            icon.setImageResource(R.drawable.grid_2);
        } else if (position%7 ==2){
            icon.setImageResource(R.drawable.grid_3);
        } else if (position%7 ==3){
            icon.setImageResource(R.drawable.grid_4);
        } else if (position%7 ==4){
            icon.setImageResource(R.drawable.grid_5);
        } else if (position%7 ==5){
            icon.setImageResource(R.drawable.grid_6);
        } else {
            icon.setImageResource(R.drawable.grid_7);
        }

        return convertView;
    }
}

ViewPager的PagerAdapter，GridViewPageAdapter

package com.syz.example.adapter;

import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;

import java.util.List;

/** * Created by SYZ on 16/10/28. */

public class GridViewPageAdapter extends PagerAdapter {

    private List<View> views;

    public GridViewPageAdapter(List<View> views){
        this.views = views;

    }

    public void setViews(List<View> views){
        this.views = views;
        notifyDataSetChanged();
    }

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

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView((View) object);
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        container.addView(views.get(position), 0);
        return views.get(position);
    }

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

GridPagerActivity的布局文件，activity_grid_pager_view.xml

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools">

    <data class=".GridPagerBinding">

        <import type="android.view.View" />
    </data>

    <RelativeLayout  android:id="@+id/activity_grid_view" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.syz.example.gridview.GridPagerActivity">

        <android.support.v4.view.ViewPager  android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="250dp" android:layout_marginTop="10dp"/>
        <RadioGroup  android:id="@+id/work_indicator" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="0" android:gravity="center" android:layout_below="@id/viewpager" android:orientation="horizontal" android:paddingBottom="5dp" android:paddingTop="5dp">
        </RadioGroup>

    </RelativeLayout>
</layout>

GridPagerActivity

package com.syz.example.gridview;

import android.databinding.DataBindingUtil;
import android.graphics.Bitmap;
import android.graphics.drawable.BitmapDrawable;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.AdapterView;
import android.widget.GridView;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.Toast;

import com.syz.example.App;
import com.syz.example.GridPagerBinding;
import com.syz.example.R;
import com.syz.example.adapter.GridViewAdapter;
import com.syz.example.adapter.GridViewPageAdapter;

import java.util.ArrayList;
import java.util.List;

public class GridPagerActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener,AdapterView.OnItemClickListener{

    private GridPagerBinding binding;

    private GridViewPageAdapter pageAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        binding = DataBindingUtil.setContentView(this, R.layout.activity_grid_pager_view);
        initView();
    }

    private void initView() {
        initData();
        initPageGridView();
    }

    private List<String> list = new ArrayList<String>();

    private void initData() {
        list.add("百度");
        list.add("新浪");
        list.add("优酷");
        list.add("乐视");
        list.add("搜狐");
        list.add("淘宝");
        list.add("天猫");
        list.add("京东");
        list.add("当当");
        list.add("腾讯");
        list.add("阿里");
        list.add("阿里");
        list.add("阿里");
        list.add("阿里");
        list.add("阿里");
        list.add("阿里");
        list.add("阿里");
        list.add("阿里");
        list.add("阿里");
    }

    private static final int ITEM_COUNT_OF_PAGE = 12;

    private void initPageGridView() {

        List<View> gridViews = new ArrayList<View>();

        int count = list.size() / ITEM_COUNT_OF_PAGE;
        if (list.size() % ITEM_COUNT_OF_PAGE != 0){
            count++;
        }
        List<String> pageItem;
        for (int i = 0; i < count; i++) {
            GridView gridView = (GridView) LayoutInflater.from(this)
                    .inflate(R.layout.activity_grid_pager,null);
            if(i==count-1){
                pageItem = list.subList(i*ITEM_COUNT_OF_PAGE,list.size());
                GridViewAdapter adapter = new GridViewAdapter(pageItem);
                gridView.setAdapter(adapter);
            }else {
                pageItem = list.subList(i*ITEM_COUNT_OF_PAGE,(i+1)*ITEM_COUNT_OF_PAGE);
                GridViewAdapter adapter = new GridViewAdapter(pageItem);
                gridView.setAdapter(adapter);
            }
            gridViews.add(gridView);
            gridView.setOnItemClickListener(this);
            // 添加指示器
            addNavigation(i);//每一页添加一个RadioButton，默认选中第一个
        }
        pageAdapter = new GridViewPageAdapter(gridViews);
        binding.viewpager.setAdapter(pageAdapter);
        binding.viewpager.addOnPageChangeListener(this);


    }

    /** * 添加指示器 * 每一页添加一个RadioButton，默认选中第一个 * @param index */
    private void addNavigation(final int index) {
        RadioButton rb = new RadioButton(App.getContext());
        rb.setButtonDrawable(new BitmapDrawable(getResources(), (Bitmap) null));
        rb.setBackgroundResource(R.drawable.work_indicator_item_bg);
        RadioGroup.LayoutParams params = new RadioGroup.LayoutParams(16, 16);
        params.setMargins(10, 10, 10, 10);
        params.gravity = Gravity.CENTER;
        binding.workIndicator.addView(rb, params);
        if (index == 0) {
            rb.setChecked(true);
        }
        // 点击效果
        rb.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View arg0) {
                binding.viewpager.setCurrentItem(index);
            }
        });
    }

    /** * 展示导航 * * @param index */
    private void show(int index) {
        RadioButton rb = (RadioButton) binding.workIndicator.getChildAt(index);
        rb.setChecked(true);
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {
        show(position);
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }

    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
        Toast.makeText(this, "I am the item "+position, Toast.LENGTH_SHORT).show();
    }
}

最后是程序的运行效果截图：