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

最新推荐文章于 2024-11-08 13:58:32 发布
最新推荐文章于 2024-11-08 13:58:32 发布
阅读量37 收藏 21
点赞数 9
分类专栏： 程序员 文章标签： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/feifei99_8820/article/details/138377602
版权
文章详细描述了一个AndroidGridViewAdapter的实现，包括计数方法、getView方法的调整，以及与ViewPager的配合，展示了如何处理头部分页和数据绑定。同时提到了HeaderViewBean和相关布局文件的使用。
摘要由CSDN通过智能技术生成

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

//初始化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文件可根据实际情况自定义，

二：

//FEATURE_20160216_1:添加仿美团Headerview begin

List mDatas = new ArrayList();

mDatas.add(new HeaderViewBean(“美食”, R.mipmap.ic_category_0));

mDatas.add(new HeaderViewBean(“电影”, R.mipmap.ic_category_1));

mDatas.add(new HeaderViewBean(“酒店”, R.mipmap.ic_category_2));

mDatas.add(new HeaderViewBean(“KTV”, R.mipmap.ic_category_3));

mDatas.add(new HeaderViewBean(“外卖”, R.mipmap.ic_category_4));

mDatas.add(new HeaderViewBean(“美女6”, R.mipmap.ic_category_5));

mDatas.add(new HeaderViewBean(“美女7”, R.mipmap.ic_category_6));

mDatas.add(new HeaderViewBean(“美女8”, R.mipmap.ic_category_7));

mDatas.add(new HeaderViewBean(“帅哥”, R.mipmap.ic_category_8));

mDatas.add(new HeaderViewBean(“帅哥2”, R.mipmap.ic_category_9));

mDatas.add(new HeaderViewBean(“帅哥3”, R.mipmap.ic_category_10));

mDatas.add(new HeaderViewBean(“帅哥4”, R.mipmap.ic_category_11));

mDatas.add(new HeaderViewBean(“帅哥5”, R.mipmap.ic_category_12));

最后

在这里小编整理了一份Android大厂常见面试题，和一些Android架构视频解析，都已整理成文档，全部都已打包好了，希望能够对大家有所帮助，在面试中能顺利通过。

image

image

喜欢本文的话，不妨顺手给我点个小赞、评论区留言或者转发支持一下呗

《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！
HeaderViewBean(“帅哥3”, R.mipmap.ic_category_10));

mDatas.add(new HeaderViewBean(“帅哥4”, R.mipmap.ic_category_11));

mDatas.add(new HeaderViewBean(“帅哥5”, R.mipmap.ic_category_12));

最后

在这里小编整理了一份Android大厂常见面试题，和一些Android架构视频解析，都已整理成文档，全部都已打包好了，希望能够对大家有所帮助，在面试中能顺利通过。

[外链图片转存中…(img-XxZ24c3K-1714560198951)]

[外链图片转存中…(img-H3OPdZMx-1714560198952)]

喜欢本文的话，不妨顺手给我点个小赞、评论区留言或者转发支持一下呗

《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！

Android 利用ViewPager+GridView，仿美团首页导航栏分类布局界面
08-15
模仿美团大众点评 首页 分类导航的实现
Android ViewPager嵌套GridView实现滑动网格布局
wenzhi的博客
09-23 1500
Android ViewPager嵌套GridView实现滑动网格布局一、效果图：二、代码：1、布局文件2、Item对应的Bean文件3、ViewPager的Adapter4、GridView的Adapter5、Activity显示代码下载链接：共勉：野蛮生长才能到实现更高的高度。 看了网上 ViewPager嵌套GridView实现滑动网格布局的示例， 有的太旧了，有的代码逻辑不清晰，有的运行不了， 网上的要给RecyclerView的一个旧例子跑不起来，可能是RecyclerView不是很熟吧。 这里提
Android 利用ViewPager+GridView实现首页导航栏布局分页效果
09-01
用ViewPager+GridView实现首页导航栏布局分页效果来实现的效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
Android 仿美团网，探索利用ViewPager+GridView实现左右滑动查看更多分类的功能
09-14
博客详情;http://blog.csdn.net/qq_20785431/article/details/52528404
android gridview动态添加viewpager,Android 利用ViewPager+GridView实现首页导航栏布局分页效果...
weixin_35851515的博客
05-26 638
最近我尝试使用ViewPager+GridView实现的，看起来一切正常，废话不多说，具体代码如下：如图是效果图首先分析下思路1.首先是怎么布局：整体是一个ViewPager将GridView作为一个View添加到ViewPager的adapter中，下方是圆点android:layout_width="match_parent"android:layout_height="match_paren...
Android之ViewPager+GridView实现仿美团首页导航栏布局分页效果
10-27
在这个主题中，我们将深入探讨如何利用 `ViewPager` 和 `GridView` 实现一个类似美团首页的导航栏布局，以及如何将这一功能集成到自己的项目中。 `ViewPager` 是Android Support Library中的一个组件，主要用于展示...
ViewPager + GridView实现GridView分页首页导航栏布局分页效果
11-22
通过以上步骤，我们可以成功地利用`ViewPager`和`GridView`实现分页首页导航栏布局。这种组合方式既保持了页面间的流畅切换，又确保了内容展示的清晰和有序，是Android开发中一种高效且实用的设计模式。在实际项目中...
ViewPager+GridView
ydc0128的博客
06-15 426
1.activity public class MainActiviry extends Activity { @BindView(R.id.tv_jine) TextView tvJine; @BindView(R.id.tv_chongzhi) TextView tvChongzhi; @BindView(R.id.tv_fasong) TextView tvFasong; @BindView(R.id.vp_viewpager)
Android利用ViewPager+GridView，实现网格布局(功能列表)并能水平滑动
付之一笑的专栏
07-04 7967
首先看一下效果图，根据效果图，分析实现原理与思路： 首先分析这个功能：它的界面是一个类似于网格形式的功能列表(二行四列)，每个单元格里面存放这个各个功能的一级菜单。 然后可以通过手指水平滑动该网格，能够进入下一页的功能列表。 反复思考了下............ 1.网格形式的实现可以通过GirdView控件。但是，这里要注意的是GirdView本身无法实现网格线。因此，我
ViewPager和GridView实现左右滑动功能及点击事件
Android小哥
12-15 4909
ViewPager 是与一组页面进行交互的容器，那么怎么设计交互的接口就成为设计成败的关键。我们会发现 GridView 中使用的「通信接口」是 BaseAdapter， 那么类似地，ViewPager 在设计的时候， 同样采用了 Adapter 的设计模式， 通过 PagerAdapter 来实现交互。         我们要达成的协议应该如下，ViewPager 负责显示页面，处理滑动等逻辑
Android 仿美团网，探索使用ViewPager+GridView实现左右滑动查看更多分类的功能
Angelica
09-14 7273
不记得什么时候，我留意到到美团网首页有使用ViewPager+GridView实现左右滑动查看更多分类的一个功能，感觉它很有趣，于是想着自己动手也实现这样一个功能，和往常一样，主要是想总结一下我在学习过程中的一些笔记以及需要注意的地方。 其中需要注意的有如下几个点： 一：使用GridView作为每个ViewPager的页面，也就是说每个ViewPager的页面都是inflate出一个GridV
Android 组合控件ViewPager+GridView+圆形页面指示器的使用，最简单方便的带指示器翻页依赖库
杨迪龙的博客
03-22 1007
Android 组合控件ViewPager+GridView+圆形页面指示器的使用，最简单方便的带指示器翻页依赖库前言先上图使用方法 前言 上一次说了自定义圆形页面指示器 Android 自定义控件之圆形页面指示器CirclePageIndicator带划动效果 应该很少人耐心看完了。。。 这一次就把它打包成依赖库，直接添加依赖使用就好了。 不过为了方便我自己的项目，我还是加了点料进去； 能够几行...
安卓市场如何做APP的分发、推广？
2401_88539912的博客
11-08 783
然后再加上小米lookalike算法，然后他会为这批用户投放，然后他也有点击根据点击用户的一个画像，再跟用户去进行一个算法的融合，然后再针对这批用户，不断的一个循环曝光，你会发现，整个会越来越精准，我们的投放的广告，目标人群越来越细，我们选了750万的一个人群数量去做，到后来只会针对750万里面可能是我们用户的那150万去曝光，因为他这个效果是没有任何人为干扰，他就是一个黑科技去算的，最后做出来，我们整个作为效果是非常准的。包括一些宣传，主打是整个品牌度，拍照、有声有色，帅气，年轻化。
【北京迅为】itop-3588开发板摄像头使用手册Android12 双摄方案
最新发布
Chihiro_S的专栏
11-08 854
【北京迅为】itop-3588开发板摄像头使用手册Android12 双路摄像头方案
安卓智能指针sp、wp、RefBase浅析
似霰的博客
11-07 884
安卓智能指针sp、wp、RefBase浅析
Android 延时操作的常用方法
以后会多把工作中总结的知识、问题处理思路和方法通过博客分享出来,欢迎大家关注和共同探讨!
11-06 322
在Android开发中我们可能会有延时执行某个操作的需求，例如我们启动应用的时候，一开始呈现的是引导页面，3秒后进入主界面，这就是一个延时操作。还有一种是执行某些接口任务时，需要有超时机制。下面介绍常用的几种方法。@Override// 休眠1秒/*** 延时执行的代码*/}).start();
Android ViewPager+GridView 实现首页导航栏分页布局
在Android开发中，利用ViewPager和GridView实现首页导航栏布局分页效果是一种常见的设计模式，尤其适用于需要展示多个独立模块或内容的场景。本文档提供了一种实用的方法，通过结合这两者，可以在一个界面中轻松切换...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值