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

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