Android實(shí)現(xiàn)美團(tuán)APP的底部滑動(dòng)菜單

更新時(shí)間：2019年11月29日 09:50:27 作者：羅嗣偉

這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)美團(tuán)APP的底部滑動(dòng)菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

仿美團(tuán)APP的底部滑動(dòng)菜單Android實(shí)現(xiàn)，供大家參考，具體內(nèi)容如下

在現(xiàn)在的APP的應(yīng)用中，類(lèi)似仿美團(tuán)APP的底部滑動(dòng)菜單，應(yīng)用是挺多的，例如QQ，微信，支付寶都應(yīng)用到。開(kāi)發(fā)流程如下

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="首頁(yè)" />

   <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文件，選擇資源類(lèi)型為Drawable的selector，在每一個(gè)selector中建立item選項(xiàng)

<?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. 中間的滑動(dòng)窗口

<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. 往滑動(dòng)窗口添加按鈕對(duì)應(yīng)的Fragment, 并監(jiān)聽(tīng)相應(yīng)事件

下面的代碼注意兩點(diǎn)

MainActivity需繼承于FragmentActivity，這樣才能找到其中的getSupportFragmentManager()方法
在書(shū)寫(xiě)Fragment時(shí)切記引入的是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;
 // 主頁(yè)頁(yè)面
 private HomeFragment homeFragment;
 // 投資頁(yè)面
 private InvestmentFragment investmentFragment;
 //拍照頁(yè)面
 private CaptureFragment captureFragment;
 // 我的頁(yè)面
 private MyFragment myFragment;
 // 更多頁(yè)面
 private MoreFragment moreFragment;
 // Fragment集合
 private List<Fragment> fragmentList;
 // FragmentAdapter
 private MyPageFramgentAdapter myPageFramgentAdapter;
 // 菜單RadioGroup
 private RadioGroup radioGroup;
 // 主頁(yè)按鈕
 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展示對(duì)應(yīng)的頁(yè)面
  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發(fā)生改變，對(duì)應(yīng)的按鈕狀態(tài)變?yōu)檫x中
  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();
  }
 }


}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: