欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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();
  }
 }


}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。