Android 利用ViewPager+GridView，仿美团首页导航栏分类布局界面
第一个界面是自己重写的ListVIew实现的下拉刷新，第二界面使用SwipeRefreshLayout这个控件套的ListVIew实现的下拉刷新。
====优雅分割线=
【思路】：
之所以使用GridView作为每个ViewPager的页面，是考虑到，当这些分类条目的数据集变化时，比较好动态的更新。（通过SDK工具查看美团的View层级，发现其也是使用ViewPager里放入两个GridView实现。）
假设（模拟）数据有20条，即20个类目，先考虑一下每个GridView页面有几条几列，这里我们暂定为每页8条4列分类，则ViewPager一共有 20条/8条每页 =2.5 ，取整为3页。
这里有个疑点就是，“怎么将GridView和ViewPager合并，并在ViewPager翻页时这个GridView能正确显示数据？”，这里打了个引号“”，代表这个说法有问题，其实并不是将两个控件合并，ViewPager这里没有特殊处理，只是将GridView作为View传给ViewPager的Adapter，如刚才计算如果一共三页，则会inflate出三个GridView作为每页的VIew加入集合中，并将这个集合作为ViewPager的数据源传给ViewPager的Adapter。 这是回答如何将GridView和VIewPager合并产生关系，
那么如何在ViewPager翻页时那个GridView显示正确的数据呢？一开始我的想法是监听ViewPager的翻页事件，然后再修改GridView的数据集，然后再更新视图。。。。。
这个想法是错误的，
正确做法如下四步：这里需要将GridView的Adapter处理一下，给Adapter传入的数据集mDatas就是条目的总数据集，不用修改。
一：增加两个属性，index和pageSize，代表页数和每一页显示的最大条目上限。在给这三页的GridView设置Adapter时，传入当前页数index，然后经过计算得出正确的count和应该显示的View的数据。
二：修改getCount()方法，
@Override
public int getCount() {
return mDatas.size() > (mIndex + 1) * mPageSize ? mPageSize : (mDatas.size() - mIndex * mPageSize);
}
先判断数据集的大小是否足够显示满本页？mDatas.size() > (mIndex+1)*mPageSize,如果够，则直接返回每一页显示的最大条目个数mPageSize,如果不够，则有几项返回几,
(mDatas.size() - mIndex * mPageSize);
三：修改getView()方法：
@Override
public View getView(int position, View convertView, ViewGroup parent) {
Log.i(“TAG”, “position:” + position);
ViewHolder vh = null;
if (convertView == null) {
convertView = mLayoutInflater.inflate(R.layout.item_gridview_header, parent, false);
vh = new ViewHolder();
vh.tv = (TextView) convertView.findViewById(R.id.textView);
vh.iv = (ImageView) convertView.findViewById(R.id.imageView);
convertView.setTag(vh);
} else {
vh = (ViewHolder) convertView.getTag();
}
/**
* 在给View绑定显示的数据时，计算正确的position = position + mIndex * mPageSize， */ int pos = position + mIndex * mPageSize;
vh.tv.setText(mDatas.get(pos).name);
vh.iv.setImageResource(mDatas.get(pos).iconRes);
return convertView;
}
在给View绑定显示的数据时，根据当前下标index，和每页显示最大的条目数pageSize ，计算一下正确的position。
四：其实第四步不修改，显示也是正常的，但是我觉得应该也要同步修改一下，getItem和getItemId方法，代码一并贴上来。
@Override
public Object getItem(int position) {
return mDatas.get(position + mIndex * mPageSize);
}
@Override
public long getItemId(int position) {
return position + mIndex * mPageSize;
}
完整GridViewAdapter代码如下：
package com.example.meituanheaderdemo.adapter;
import android.content.Context;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import com.example.meituanheaderdemo.R;
import com.example.meituanheaderdemo.bean.HeaderViewBean;
import java.util.List;
/**
* Created by zhangxutong on 2016/2/16. */
public class GridViewAdapter extends BaseAdapter {
private List mDatas;
private LayoutInflater mLayoutInflater;
/**
* 页数下标,从0开始 */ private int mIndex;
/**
* 每页显示最大条目个数 ,默认是dimes.xml里 HomePageHeaderColumn 属性值的两倍 */ private int mPageSize;
public GridViewAdapter(Context context, List mDatas, int mIndex) {
this.mDatas = mDatas;
mLayoutInflater = LayoutInflater.from(context);
this.mIndex = mIndex;
mPageSize = context.getResources().getInteger(R.integer.HomePageHeaderColumn) * 2;
}
/**
* 先判断数据集的大小是否足够显示满本页？mDatas.size() > (mIndex+1)*mPageSize, * 如果够，则直接返回每一页显示的最大条目个数mPageSize, * 如果不够，则有几项返回几,(mDatas.size() - mIndex * mPageSize); */ @Override
public int getCount() {
return mDatas.size() > (mIndex + 1) * mPageSize ? mPageSize : (mDatas.size() - mIndex * mPageSize);
}
@Override
public Object getItem(int position) {
return mDatas.get(position + mIndex * mPageSize);
}
@Override
public long getItemId(int position) {
return position + mIndex * mPageSize;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
Log.i(“TAG”, “position:” + position);
ViewHolder vh = null;
if (convertView == null) {
convertView = mLayoutInflater.inflate(R.layout.item_gridview_header, parent, false);
vh = new ViewHolder();
vh.tv = (TextView) convertView.findViewById(R.id.textView);
vh.iv = (ImageView) convertView.findViewById(R.id.imageView);
convertView.setTag(vh);
} else {
vh = (ViewHolder) convertView.getTag();
}
/**
* 在给View绑定显示的数据时，计算正确的position = position + mIndex * mPageSize， */ int pos = position + mIndex * mPageSize;
vh.tv.setText(mDatas.get(pos).name);
vh.iv.setImageResource(mDatas.get(pos).iconRes);
return convertView;
}
class ViewHolder {
public TextView tv;
public ImageView iv;
}
}
====优雅分割线=
HeaderViewBean的代码如下：(= = )没啥好说的
package com.example.meituanheaderdemo.bean;
/**
* Created by zhangxutong on 2016/2/15. */
public class HeaderViewBean {
public String name;
public int iconRes;
public HeaderViewBean(String name, int iconRes) {
this.name = name;
this.iconRes = iconRes;
}
}
====优雅分割线=
完成GridViewAdapter的编写，基本上已经完成60%了。下面就是如何关联ViewPager和GridView：
/**
* 初始化ViewPager的View数据集 */
最后
考虑到文章的篇幅问题，我把这些问题和答案以及我多年面试所遇到的问题和一些面试资料做成了PDF文档，如果有需要的朋友可以私信我【面试】免费领取
点击这里领取Android面试资料汇总
题，我把这些问题和答案以及我多年面试所遇到的问题和一些面试资料做成了PDF文档，如果有需要的朋友可以私信我【面试】免费领取
点击这里领取Android面试资料汇总
[外链图片转存中…(img-bvpycyXF-1646653205664)]
[外链图片转存中…(img-6cAeMltx-1646653205665)]
喜欢的朋友可以关注、转发、点赞 感谢！