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

前言

本文主要给大家介绍了关于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开发者们的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对的支持。