Android实现美团APP的底部滑动菜单
程序员文章站
2022-05-08 13:14:19
仿美团app的底部滑动菜单android实现,供大家参考,具体内容如下
在现在的app的应用中,类似仿美团app的底部滑动菜单,应用是挺多的,例如qq,微信,支付宝都应用到。开发流程...
仿美团app的底部滑动菜单android实现,供大家参考,具体内容如下
在现在的app的应用中,类似仿美团app的底部滑动菜单,应用是挺多的,例如qq,微信,支付宝都应用到。开发流程如下
1. 底部按钮
底部按钮使用radiobutton。
// 按钮布局 <linearlayout android:id="@+id/llradiogroup" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignparentbottom="true"> <radiogroup android:id="@+id/rg_menu" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <radiobutton android:id="@+id/rbtn_home" style="@style/radiobutton" android:checked="true" android:drawabletop="@drawable/home" android:text="首页" /> <radiobutton android:id="@+id/rbtn_vest" style="@style/radiobutton" android:drawabletop="@drawable/investment" android:text="投资" /> <radiobutton android:id="@+id/rbtn_photo" style="@style/radiobutton" android:drawabletop="@drawable/shooting" android:text="拍拍" /> <radiobutton android:id="@+id/rbtn_mine" style="@style/radiobutton" android:drawabletop="@drawable/recom_member" android:text="我的" /> <radiobutton android:id="@+id/rbtn_more" style="@style/radiobutton" android:drawabletop="@drawable/more" android:text="更多" /> </radiogroup>
// style样式 <style name="radiobutton"> <item name="android:layout_width">match_parent</item> <item name="android:layout_height">60dp</item> <item name="android:gravity">center</item> <item name="android:layout_weight">1</item> <item name="android:button">@null</item> <item name="android:background">@drawable/menueselector</item> </style>
style样式中的menueselector为背景选择器,使按钮选中变色
在res目录下新建文件夹(drawable-nodpi),在里面建立新的xml文件,选择资源类型为drawable的selector,在每一个selector中建立item选项
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <!--选中背景颜色--> <item android:drawable="@color/checked" android:state_checked="true" /> <!--未选中背景颜色--> <item android:drawable="@color/nochecked" android:state_checked="false" /> </selector>
2. 中间的滑动窗口
<android.support.v4.view.viewpager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_above="@+id/llradiogroup"> </android.support.v4.view.viewpager>
3. 往滑动窗口添加按钮对应的fragment, 并监听相应事件
下面的代码注意两点
- mainactivity需继承于fragmentactivity,这样才能找到其中的getsupportfragmentmanager()方法
- 在书写fragment时切记引入的是android.support.v4.app.fragment,而非android.app.fragment(android.app.fragment是在3.0引入的,为了兼容更低版本首选android.support.v4.app.fragment)
package com.lsw.wealthapp.activity; import android.support.v4.app.fragment; import android.os.bundle; import android.support.v4.app.fragmentactivity; import android.support.v4.app.fragmentmanager; import android.support.v4.app.fragmentpageradapter; import android.support.v4.view.viewpager; import android.widget.radiobutton; import android.widget.radiogroup; import com.lsw.wealthapp.r; import com.lsw.wealthapp.fragment.capturefragment; import com.lsw.wealthapp.fragment.homefragment; import com.lsw.wealthapp.fragment.investmentfragment; import com.lsw.wealthapp.fragment.morefragment; import com.lsw.wealthapp.fragment.myfragment; import java.util.arraylist; import java.util.list; public class mainactivity extends fragmentactivity { // homefragmentindex private static final int homeviewpagerindex = 0; // investmentfragmentindex private static final int invsetviewpagerindex = 1; // capturefragmentindex private static final int captureviewpagerindex = 2; // myfragmentindex private static final int myviewpagerindex = 3; // morefragmentindex private static final int moreviewpagerindex = 4; private viewpager viewpager; // 主页页面 private homefragment homefragment; // 投资页面 private investmentfragment investmentfragment; //拍照页面 private capturefragment capturefragment; // 我的页面 private myfragment myfragment; // 更多页面 private morefragment morefragment; // fragment集合 private list<fragment> fragmentlist; // fragmentadapter private mypageframgentadapter mypageframgentadapter; // 菜单radiogroup private radiogroup radiogroup; // 主页按钮 private radiobutton rbtnhome; // 投资按钮 private radiobutton rbtninvest; // 拍照按钮 private radiobutton rbtncapture; // 我的按钮 private radiobutton rbtnmine; // 更多按钮 private radiobutton rbtnmore; @override protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); initviews(); } private void initviews() { viewpager = (viewpager) findviewbyid(r.id.viewpager); homefragment = new homefragment(); investmentfragment = new investmentfragment(); capturefragment = new capturefragment(); myfragment = new myfragment(); morefragment = new morefragment(); fragmentlist = new arraylist<fragment>(); radiogroup = (radiogroup) findviewbyid(r.id.rg_menu); rbtnhome = (radiobutton) findviewbyid(r.id.rbtn_home); rbtninvest = (radiobutton) findviewbyid(r.id.rbtn_vest); rbtncapture = (radiobutton) findviewbyid(r.id.rbtn_photo); rbtnmine = (radiobutton) findviewbyid(r.id.rbtn_mine); rbtnmore = (radiobutton) findviewbyid(r.id.rbtn_more); // 按钮选中,viewpager展示对应的页面 radiogroup.setoncheckedchangelistener(new radiogroup.oncheckedchangelistener() { @override public void oncheckedchanged(radiogroup radiogroup, int i) { switch (i) { case r.id.rbtn_home: viewpager.setcurrentitem(homeviewpagerindex); break; case r.id.rbtn_vest: viewpager.setcurrentitem(invsetviewpagerindex); break; case r.id.rbtn_photo: viewpager.setcurrentitem(captureviewpagerindex); break; case r.id.rbtn_mine: viewpager.setcurrentitem(myviewpagerindex); break; case r.id.rbtn_more: viewpager.setcurrentitem(moreviewpagerindex); break; } } }); //将fragment加入集合中 fragmentlist.add(homefragment); fragmentlist.add(investmentfragment); fragmentlist.add(capturefragment); fragmentlist.add(myfragment); fragmentlist.add(morefragment); fragmentmanager fm = getsupportfragmentmanager(); mypageframgentadapter = new mypageframgentadapter(fm); viewpager.setadapter(mypageframgentadapter); // viewpager发生改变,对应的按钮状态变为选中 viewpager.setonpagechangelistener(new viewpager.onpagechangelistener() { @override public void onpagescrolled(int position, float positionoffset, int positionoffsetpixels) { } @override public void onpageselected(int position) { switch (position) { case homeviewpagerindex: rbtnhome.setchecked(true); break; case invsetviewpagerindex: rbtninvest.setchecked(true); break; case captureviewpagerindex: rbtncapture.setchecked(true); break; case myviewpagerindex: rbtnmine.setchecked(true); break; case moreviewpagerindex: rbtnmore.setchecked(true); break; default: break; } } @override public void onpagescrollstatechanged(int state) { } }); } // viewpager所需的适配器 class mypageframgentadapter extends fragmentpageradapter { public mypageframgentadapter(fragmentmanager fm) { super(fm); } @override public fragment getitem(int position) { return fragmentlist.get(position); } @override public int getcount() { return fragmentlist.size(); } } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: Android碎片fragment实现静态加载的实例代码
下一篇: vue组件的写法汇总