Android模仿美团顶部的滑动菜单实例代码_网络技术

Android模仿美团顶部的滑动菜单实例代码

发布时间 - 2026-01-11 02:56:19 点击率：次

前言

本文主要给大家介绍了关于Android模仿美团顶部滑动菜单的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。

先来看下效果图：

实现方法

这是通过 ViewPager 和 GridView 相结合做出来的效果，每一个 ViewPager 页面都是一个 GridView，底部的每个滑动指示圆点都是从布局文件中 inflate 出来的

首先需要一个代表每个活动主题的 JavaBean

/**
 * Created by CZY on 2017/6/23.
 */
public class Subject {

 //主题名
 private String name;

 //主题图标资源ID
 private int icon;

 public Subject(String name, int icon) {
  this.name = name;
  this.icon = icon;
 }

 public String getName() {
  return name;
 }

 public void setName(String name) {
  this.name = name;
 }

 public int getIcon() {
  return icon;
 }

 public void setIcon(int icon) {
  this.icon = icon;
 }

}

然后用一个 List< Subject > 来承载需要显示的所有主题内容，将这些数据传给 GridViewAdapter 。因为 ViewPager 有几个页面就有几个GridView ，每个GridView对应的是哪些数据都需要在其内部根据页面索引进行计算

/**
 * Created by CZY on 2017/6/23.
 */
public class GridViewAdapter extends BaseAdapter {

 private List<Subject> subjectList;

 private LayoutInflater layoutInflater;

 //当前页索引
 private int currentIndex;

 //占满屏幕时每页展示的主题个数
 private int pageSize;

 public GridViewAdapter(Context context, List<Subject> subjectList, int currentIndex, int pageSize) {
  this.layoutInflater = LayoutInflater.from(context);
  this.subjectList = subjectList;
  this.currentIndex = currentIndex;
  this.pageSize = pageSize;
 }

 /**
  * 如果剩余数据能够完全占满当前页，则返回 pageSize
  * 如果不能，则返回剩余的数据个数
  */
 @Override
 public int getCount() {
  return subjectList.size() > (currentIndex + 1) * pageSize ? pageSize : (subjectList.size() - currentIndex * pageSize);
 }

 /**
  * 计算出正确的索引
  */
 @Override
 public Object getItem(int position) {
  return subjectList.get(position + currentIndex * pageSize);
 }

 @Override
 public long getItemId(int position) {
  return position + currentIndex * pageSize;
 }

 @Override
 public View getView(int position, View convertView, ViewGroup parent) {
  ViewHolder viewHolder;
  if (convertView == null) {
   convertView = layoutInflater.inflate(R.layout.item_grid_view, parent, false);
   viewHolder = new ViewHolder();
   viewHolder.tv_subject = (TextView) convertView.findViewById(R.id.tv_subject);
   viewHolder.iv_subject = (ImageView) convertView.findViewById(R.id.iv_subject);
   convertView.setTag(viewHolder);
  } else {
   viewHolder = (ViewHolder) convertView.getTag();
  }
  int pos = position + currentIndex * pageSize;
  viewHolder.tv_subject.setText(subjectList.get(pos).getName());
  viewHolder.iv_subject.setImageResource(subjectList.get(pos).getIcon());
  return convertView;
 }

 private class ViewHolder {

  private TextView tv_subject;

  private ImageView iv_subject;

 }

}

需要使用到的布局文件 item_grid_view 如下所示

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:paddingBottom="10dp"
 android:paddingTop="10dp">

 <ImageView
  android:id="@+id/iv_subject"
  android:layout_width="40dp"
  android:layout_height="40dp"
  android:layout_centerHorizontal="true" />

 <TextView
  android:id="@+id/tv_subject"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_below="@id/iv_subject"
  android:layout_centerHorizontal="true"
  android:layout_marginTop="3dp"
  android:textSize="12sp" />

</RelativeLayout>

使用到了 ViewPager，自然也需要一个 ViewPagerAdapter

/**
 * Created by CZY on 2017/6/23.
 */
public class ViewPagerAdapter extends PagerAdapter {

 private List<View> viewList;

 public ViewPagerAdapter(List<View> viewList) {
  this.viewList = viewList;
 }

 @Override
 public void destroyItem(ViewGroup container, int position, Object object) {
  container.removeView(viewList.get(position));
 }

 @Override
 public Object instantiateItem(ViewGroup container, int position) {
  container.addView(viewList.get(position));
  return (viewList.get(position));
 }

 @Override
 public int getCount() {
  return viewList == null ? 0 : viewList.size();
 }

 @Override
 public boolean isViewFromObject(View view, Object object) {
  return view == object;
 }

}

在 MainActivity 中进行数据填充

public class MainActivity extends AppCompatActivity {

 private String[] titles = {"美食", "电影", "酒店住宿", "休闲娱乐", "甜品饮品",
   "水上乐园", "汽车服务", "美发", "丽人", "景点",
   "足疗按摩", "运动健身", "健身", "超市", "买菜",
   "今日新单", "外卖", "自助餐", "KTV", "机票/火车票",
   "周边游", "小吃快餐", "面膜", "美甲美睫", "火锅",
   "生日蛋糕", "母婴亲子", "生活服务", "婚纱摄影", "学习培训",
   "家装", "结婚"};

 private List<Subject> subjectList;

 private LinearLayout ll_dot;

 //每页展示的主题个数
 private final int pageSize = 10;

 //当前页索引
 private int currentIndex;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  ViewPager viewPager = (ViewPager) findViewById(R.id.viewPager);
  ll_dot = (LinearLayout) findViewById(R.id.ll_dot);
  subjectList = new ArrayList<>();
  for (String title : titles) {
   subjectList.add(new Subject(title, R.drawable.icon));
  }
  //需要的页面数
  int pageCount = (int) Math.ceil(subjectList.size() * 1.0 / pageSize);
  List<View> viewList = new ArrayList<>();
  for (int i = 0; i < pageCount; i++) {
   GridView gridView = (GridView) getLayoutInflater().inflate(R.layout.layout_grid_view, viewPager, false);
   gridView.setAdapter(new GridViewAdapter(this, subjectList, i, pageSize));
   viewList.add(gridView);
   gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
     int pos = position + currentIndex * pageSize;
     Toast.makeText(MainActivity.this, subjectList.get(pos).getName(), Toast.LENGTH_SHORT).show();
    }
   });
  }
  viewPager.setAdapter(new ViewPagerAdapter(viewList));
  for (int i = 0; i < pageCount; i++) {
   ll_dot.addView(getLayoutInflater().inflate(R.layout.view_dot, null));
  }
  //使第一个小圆点呈选中状态
  ll_dot.getChildAt(0).findViewById(R.id.v_dot).setBackgroundResource(R.drawable.dot_selected);
  viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
   public void onPageSelected(int position) {
    ll_dot.getChildAt(currentIndex).findViewById(R.id.v_dot).setBackgroundResource(R.drawable.dot_normal);
    ll_dot.getChildAt(position).findViewById(R.id.v_dot).setBackgroundResource(R.drawable.dot_selected);
    currentIndex = position;
   }

   public void onPageScrolled(int arg0, float arg1, int arg2) {
   }

   public void onPageScrollStateChanged(int arg0) {
   }
  });
 }

}

每一个小圆点都对应一个布局文件，其中只包含一个View，重点是设置是设备其 background 属性，使其呈现圆形

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content">

 <View
  android:id="@+id/v_dot"
  android:layout_width="8dp"
  android:layout_height="8dp"
  android:layout_marginLeft="2dp"
  android:layout_marginRight="2dp"
  android:background="@drawable/dot_normal" />
</RelativeLayout>

代码整体来说都挺简单的，这里也提供源代码下载：仿美团顶部滑动菜单

总结

以上就是这篇文章的全部内容了，希望本文的内容对各位Android开发者们的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对的支持。

# android # 仿美团菜单 # 仿美团滑动 # 美团菜单 # Android实现顶部导航菜单左右滑动效果 # Android实现自定义滑动式抽屉菜单效果 # android RecyclerView侧滑菜单 # 滑动删除 # 长按拖拽 # 下拉刷新上拉加载 # Android滑动优化高仿QQ6.0侧滑菜单（滑动优化） # Android仿微信滑动弹出编辑、删除菜单效果、增加下拉刷新功能 # Android利用滑动菜单框架实现滑动菜单效果 # Android Studio使用ViewPager+Fragment实现滑动菜单Tab效果 # Android自定义横向滑动菜单的实现 # Android仿人人客户端滑动菜单的侧滑菜单效果 # Android实现左侧滑动菜单 # 每页 # 当前页 # 的是 # 都是 # 这是 # 占满 # 几个 # 相关内容 # 第一个 # 就有 # 说了 # 小圆点 # 不多 # 是从 # 给大家 # 有几个 # 使其 # 甜品 # 所示 # 这篇文章

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：AI智能建站工具实战：快速生成与SEO优化全攻略

下一篇：PS怎么快速抠图换背景_Photoshop魔棒工具抠图教程【

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：AI智能建站工具实战：快速生成与SEO优化全攻略

下一篇：PS怎么快速抠图换背景_Photoshop魔棒工具抠图教程【