概述
通过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);}@Overridepublic int getItemViewResId() {return R.layout.grid_view_item;}@Overridepublic 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();}@Overridepublic int getCount() {return views == null?0:views.size();}@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {container.removeView((View) object);}@Overridepublic Object instantiateItem(ViewGroup container, int position) {container.addView(views.get(position), 0);return views.get(position);}@Overridepublic 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;@Overrideprotected 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() {@Overridepublic 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);}@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}@Overridepublic void onPageSelected(int position) {show(position);}@Overridepublic void onPageScrollStateChanged(int state) {}@Overridepublic void onItemClick(AdapterView<?> parent, View view, int position, long id) {Toast.makeText(this, "I am the item "+position, Toast.LENGTH_SHORT).show();}
}
最后是程序的运行效果截图: