100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > android实现美团首页滑动菜单功能 Android模仿美团顶部的滑动菜单实例代码

android实现美团首页滑动菜单功能 Android模仿美团顶部的滑动菜单实例代码

时间:2023-03-26 10:30:05

相关推荐

android实现美团首页滑动菜单功能 Android模仿美团顶部的滑动菜单实例代码

前言

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

先来看下效果图:

实现方法

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

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

/**

* created by czy on /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 /6/23.

*/

public class gridviewadapter extends baseadapter {

private list subjectlist;

private layoutinflater layoutinflater;

//当前页索引

private int currentindex;

//占满屏幕时每页展示的主题个数

private int pagesize;

public gridviewadapter(context context, list 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 如下所示

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:paddingbottom="10dp"

android:paddingtop="10dp">

android:id="@+id/iv_subject"

android:layout_width="40dp"

android:layout_height="40dp"

android:layout_centerhorizontal="true" />

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" />

使用到了 viewpager,自然也需要一个 viewpageradapter

/**

* created by czy on /6/23.

*/

public class viewpageradapter extends pageradapter {

private list viewlist;

public viewpageradapter(list 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 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 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 属性,使其呈现圆形

android:layout_width="wrap_content"

android:layout_height="wrap_content">

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" />

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

总结

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。