Android 利用ViewPager+GridView,仿美团首页导航栏分类布局界面

@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数据集 */

//初始化ViewPagerList : private List mViewPagerGridList;

mViewPagerGridList = new ArrayList();

LayoutInflater inflater = getLayoutInflater();

//塞入GridView:

//计算每页最大显示个数

int pageSize = getResources().getInteger(R.integer.HomePageHeaderColumn) * 2;

//一共的页数等于 总数/每页数量,并取整。

int pageCount = (int) Math.ceil(mDatas.size() * 1.0 / pageSize);

Log.i(“TAG”, “mDatas.size()*1.0/pageSize:” + (mDatas.size() * 1.0 / pageSize));

for (int index = 0; index < pageCount; index++) {

//每个页面都是inflate出一个新实例

GridView grid = (GridView) inflater.inflate(R.layout.item_viewpager, mViewPagerGrid, false);

//给GridView设置Adapter,传入index

grid.setAdapter(new GridViewAdapter(this, mDatas, index));

//加入到ViewPager的View数据集中

mViewPagerGridList.add(grid);

}

上述代码完成了GridView的初始化,inflate了三个GridView,分别显示三页的条目,然后加入到一个List集合中。

然后将这个List的集合作为参数,传给ViewPager的Adapter即可,

mViewPagerGrid.setAdapter(new MyViewPagerAdapter(mViewPagerGridList));

====优雅分割线=

MyViewPagerAdapter的代码如下:

package com.example.meituanheaderdemo.adapter;

import android.support.v4.view.PagerAdapter;

import android.view.View;

import android.view.ViewGroup;

import java.util.List;

/**

* Created by zhangxutong on 2016/2/16. */

public class MyViewPagerAdapter extends PagerAdapter {

private List mViewList;

public MyViewPagerAdapter(List mViewList) {

this.mViewList = mViewList;

}

@Override

public void destroyItem(ViewGroup container, int position, Object object) {

container.removeView(mViewList.get(position));

}

@Override

public Object instantiateItem(ViewGroup container, int position) {

container.addView(mViewList.get(position));

return (mViewList.get(position));

}

@Override

public int getCount() {

if (mViewList == null)

return 0;

return mViewList.size();

}

@Override

public boolean isViewFromObject(View view, Object object) {

return view == object;

}

}

就是普通的PagerAdapter。

====优雅分割线=

【使用方法】:以下是在ListView里使用的代码段:

一:复制GridViewAdapater和ViewPagerAdapter,Bean文件可根据实际情况自定义,

尾声

评论里面有些同学有疑问关于如何学习material design控件,我的建议是去GitHub搜,有很多同行给的例子,这些栗子足够入门。

有朋友说要是动真格的话,需要NDK以及JVM等的知识,首现**NDK并不是神秘的东西,**你跟着官方的步骤走一遍就知道什么回事了,无非就是一些代码格式以及原生/JAVA内存交互,进阶一点的有原生/JAVA线程交互,线程交互确实有点蛋疼,但平常避免用就好了,再说对于初学者来说关心NDK干嘛,据鄙人以前的经历,只在音视频通信和一个嵌入式信号处理(离线)的两个项目中用过,嵌入式信号处理是JAVA->NDK->.SO->MATLAB这样调用的我原来MATLAB的代码,其他的大多就用在游戏上了吧,一般的互联网公司会有人给你公司的SO包的。
至于JVM,该掌握的那部分,相信我,你会掌握的,不该你掌握的,有那些专门研究JVM的人来做,不如省省心有空看看计算机系统,编译原理。

一句话,平常多写多练,这是最基本的程序员的素质,尽量挤时间,读理论基础书籍,JVM不是未来30年唯一的虚拟机,JAVA也不一定再风靡未来30年工业界,其他的系统和语言也会雨后春笋冒出来,但你理论扎实会让你很快理解学会一个语言或者框架,你平常写的多会让你很快熟练的将新学的东西应用到实际中。
初学者,一句话,多练。

由于文章篇幅问题复制链接查看详细文章以及获取学习笔记链接:前往我的GitHub

上一篇:Jenkins---基于gitee的项目的持续部署实战


下一篇:PROTAC分子的重要应用丨疾病相关研究