Android实现美团APP的底部滑动菜单

177 阅读 0 评论 117 点赞

我是靠谱客的博主多情飞鸟，最近开发中收集的这篇文章主要介绍Android实现美团APP的底部滑动菜单，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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


}

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