版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/xiaxiazaizai01/article/details/52937154
用过美团app的小伙伴都应该非常熟悉，美团首页的分类导航栏是作为一个头布局展示在首页上的，并且分类过多的话则可以滑动查看。本篇博客正如题目所说，采用ViewPager+GridView的方式来实现美团app的这种效果。有人可能会说，我们可以采用ViewPager+Fragment的方式实现，至于Fragment中要显示的内容则可以用GridView或者是现在比较流行的RecyclerView实现，但是，我想说的是，如果ViewPager中的View个数是不确定的呢，如果后期需要再加入一页呢，是不是又需要创建一个Fragment对象，显然，稍微复杂了点。我是采用了童哥的思路，并在其基础上完善了一下，增加了滑动监听时指示器的状态变化，以及item的点击事件监听。可以在adapter中监听item的点击事件，也可以在activity中监听，但是需要注意传入的正确位置position。废话不多说，来一波效果图
首先分析一下，实现的主要思路就是将GridView作为一个View添加到ViewPager的adapter中，如上图展示的效果，数据源被分为三页加载，那么我们就需要inflate三个GridView出来，并add到ViewPager的集合中，并将这个集合作为ViewPager的数据源传给ViewPager的Adapter。
为了让大家能够更加直观的了解布局结构，我们接下来就先贴布局文件
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#CDCDCD"
tools:context="com.example.viewpagerandgridview.MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#FFFFFF"
>
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
<LinearLayout
android:id="@+id/points"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="10dp"
android:gravity="center"
android:orientation="horizontal"
/>
</RelativeLayout>
</RelativeLayout>
接下来是作为ViewPager的item布局文件GridView，因为GridView是作为View加载到ViewPager中进行展示的，这里需要注意的是，此item布局文件必须以GridView作为根节点（如果最外层是RelativeLayout或者线性布局等等的话，在inflate时会报错，具体说明请自行调试）
<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/gridView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:numColumns="4">
</GridView>
然后是GridView中的item布局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/imgUrl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher"/>
<TextView
android:id="@+id/proName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:text="名称"/>
</LinearLayout>
分析完布局文件之后，我们就开始说我们的GridView的adapter，我们都知道，根据上面的动态效果图可以看出，我先假设有20条数据源，然后这20条数据源被加载到三个GridView上面，如何保证我们能获取到正确的item位置呢，你可能会说了不是直接用getView()方法中的position不就行了？当然不行了，根据上面的效果图简要说明一下原因，我们都知道GridView中第一条item数据的下标是0，所以直接用此position的话，那么第二页的GridView中第一个item下标仍然是0，但是，我们是直接传过来的20条数据源，然后将其分别加载到三个GridView上，那么以此类推，第二页的GridView中第一个item下标就应该是position=8而不是0，同时还要考虑每一页是否是铺满的情况。啰嗦了半天，还是直接看代码吧，注释的也很详细
/**
* GridView加载数据adapter
*/
public class MyGridViewAdapter extends BaseAdapter {
private List<ProductListBean> listData;
private LayoutInflater inflater;
private Context context;
private int mIndex;//页数下标，表示第几页，从0开始
private int mPagerSize;//每页显示的最大数量
public MyGridViewAdapter(Context context,List<ProductListBean> listData,int mIndex,int mPagerSize) {
this.context = context;
this.listData = listData;
this.mIndex = mIndex;
this.mPagerSize = mPagerSize;
inflater = LayoutInflater.from(context);
}
/**
* 先判断数据集的大小是否足够显示满本页？listData.size() > (mIndex + 1)*mPagerSize
* 如果满足，则此页就显示最大数量mPagerSize的个数
* 如果不够显示每页的最大数量，那么剩下几个就显示几个 (listData.size() - mIndex*mPagerSize)
*/
@Override
public int getCount() {
return listData.size() > (mIndex + 1)*mPagerSize ? mPagerSize : (listData.size() - mIndex*mPagerSize);
}
@Override
public Object getItem(int position) {
return listData.get(position + mIndex * mPagerSize);
}
@Override
public long getItemId(int position) {
return position + mIndex * mPagerSize;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder = null;
if(convertView == null){
convertView = inflater.inflate(R.layout.item_gridview,parent,false);
holder = new ViewHolder();
holder.proName = (TextView) convertView.findViewById(R.id.proName);
holder.imgUrl = (ImageView) convertView.findViewById(R.id.imgUrl);
convertView.setTag(holder);
}else{
holder = (ViewHolder) convertView.getTag();
}
//重新确定position（因为拿到的是总的数据源，数据源是分页加载到每页的GridView上的，为了确保能正确的点对不同页上的item）
final int pos = position + mIndex*mPagerSize;//假设mPagerSize=8，假如点击的是第二页（即mIndex=1）上的第二个位置item(position=1),那么这个item的实际位置就是pos=9
ProductListBean bean = listData.get(pos);
holder.proName.setText(bean.getProName());
holder.imgUrl.setImageResource(bean.getImgUrl());
//添加item监听
convertView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(context,"你点击了 "+listData.get(pos).getProName(),Toast.LENGTH_SHORT).show();
}
});
return convertView;
}
class ViewHolder{
private TextView proName;
private ImageView imgUrl;
}
}ProductListBean 实体类
/**
* 实体类
*/
public class ProductListBean implements Serializable {
private String proName;
private int imgUrl;
public ProductListBean(String proName, int imgUrl) {
this.proName = proName;
this.imgUrl = imgUrl;
}
public String getProName() {
return proName;
}
public void setProName(String proName) {
this.proName = proName;
}
public int getImgUrl() {
return imgUrl;
}
public void setImgUrl(int imgUrl) {
this.imgUrl = imgUrl;
}
}接下来我们再看一下ViewPager的adapter实现。inflate出来的GridView作为View被add到ViewPager集合中，然后将数据传给adapter处理
/**
*ViewPager的adapter
*/
public class MyViewPagerAdapter extends PagerAdapter {
private List<View> viewLists;//View就是GridView
public MyViewPagerAdapter(List<View> viewLists) {
this.viewLists = viewLists;
}
/**
*这个方法，是从ViewGroup中移出当前View
*/
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(viewLists.get(position));
}
/**
* 将当前View添加到ViewGroup容器中
* 这个方法，return一个对象，这个对象表明了PagerAdapter适配器选择哪个对象放在当前的ViewPager中
*/
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(viewLists.get(position));
return viewLists.get(position);
}
/**
*这个方法，是获取当前窗体界面数
*/
@Override
public int getCount() {
return viewLists != null ? viewLists.size() : 0;
}
/**
*用于判断是否由对象生成界面
*/
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;//官方文档要求这样写
}
}最后看一下我们的activity
public class MainActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener{
private ViewGroup points;//小圆点指示器
private ImageView[] ivPoints;//小圆点图片集合
private ViewPager viewPager;
private int totalPage;//总的页数
private int mPageSize = 8;//每页显示的最大数量
private List<ProductListBean> listDatas;//总的数据源
private List<View> viewPagerList;//GridView作为一个View对象添加到ViewPager集合中
private int currentPage;//当前页
private String[] proName = {"名称0","名称1","名称2","名称3","名称4","名称5",
"名称6","名称7","名称8","名称9","名称10","名称11","名称12","名称13",
"名称14","名称15","名称16","名称17","名称18","名称19"};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//初始化控件
iniViews();
//模拟数据源
setDatas();
LayoutInflater inflater = LayoutInflater.from(this);
//总的页数，取整（这里有三种类型：Math.ceil(3.5)=4:向上取整，只要有小数都+1 Math.floor(3.5)=3：向下取整 Math.round(3.5)=4:四舍五入）
totalPage = (int) Math.ceil(listDatas.size() * 1.0 / mPageSize);
viewPagerList = new ArrayList<>();
for(int i=0;i<totalPage;i++){
//每个页面都是inflate出一个新实例
GridView gridView = (GridView) inflater.inflate(R.layout.gridview_layout,viewPager,false);
gridView.setAdapter(new MyGridViewAdapter(this,listDatas,i,mPageSize));
//添加item点击监听
/*gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
int pos = position + currentPage*mPageSize;
Log.i("TAG","position的值为："+position + "-->pos的值为："+pos);
Toast.makeText(MainActivity.this,"你点击了 "+listDatas.get(pos).getProName(),Toast.LENGTH_SHORT).show();
}
});*/
//每一个GridView作为一个View对象添加到ViewPager集合中
viewPagerList.add(gridView);
}
//设置ViewPager适配器
viewPager.setAdapter(new MyViewPagerAdapter(viewPagerList));
//小圆点指示器
ivPoints = new ImageView[totalPage];
for(int i=0;i<ivPoints.length;i++){
ImageView imageView = new ImageView(this);
//设置图片的宽高
imageView.setLayoutParams(new ViewGroup.LayoutParams(10,10));
if(i == 0){
imageView.setBackgroundResource(R.drawable.page__selected_indicator);
}else{
imageView.setBackgroundResource(R.drawable.page__normal_indicator);
}
ivPoints[i] = imageView;
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
layoutParams.leftMargin = 20;//设置点点点view的左边距
layoutParams.rightMargin = 20;//设置点点点view的右边距
points.addView(imageView,layoutParams);
}
//设置ViewPager滑动监听
viewPager.addOnPageChangeListener(this);
}
private void iniViews() {
viewPager = (ViewPager) findViewById(R.id.viewPager);
//初始化小圆点指示器
points = (ViewGroup) findViewById(R.id.points);
}
private void setDatas() {
listDatas = new ArrayList<>();
for(int i=0;i<proName.length;i++){
listDatas.add(new ProductListBean(proName[i], R.drawable.img));
}
}
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
//改变小圆圈指示器的切换效果
setImageBackground(position);
currentPage = position;
}
@Override
public void onPageScrollStateChanged(int state) {
}
/**
* 改变点点点的切换效果
* @param selectItems
*/
private void setImageBackground(int selectItems) {
for (int i = 0; i < ivPoints.length; i++) {
if (i == selectItems) {
ivPoints[i].setBackgroundResource(R.drawable.page__selected_indicator);
} else {
ivPoints[i].setBackgroundResource(R.drawable.page__normal_indicator);
}
}
}
}