Android realizes the bottom sliding menu of Meituan APP

The bottom sliding menu Android of the imitation US group APP is realized for your reference, and the specific contents are as follows

In the current application of APP, there are many applications, such as QQ, WeChat and Alipay, which are similar to the bottom sliding menu of APP. The development process is as follows

1. Bottom button

The bottom button uses RadioButton.

//  Button layout 
<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=" Home page " />

   <RadioButton
    android:id="@+id/rbtn_vest"
    style="@style/RadioButton"
    android:drawableTop="@drawable/investment"
    android:text=" Investment " />

   <RadioButton
    android:id="@+id/rbtn_photo"
    style="@style/RadioButton"
    android:drawableTop="@drawable/shooting"
    android:text=" Pat " />

   <RadioButton
    android:id="@+id/rbtn_mine"
    style="@style/RadioButton"
    android:drawableTop="@drawable/recom_member"
    android:text=" Mine " />

   <RadioButton
    android:id="@+id/rbtn_more"
    style="@style/RadioButton"
    android:drawableTop="@drawable/more"
    android:text=" More " />

</RadioGroup>

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

menueselector in the style style is the background selector, which makes the button selection change color

Create a new folder (drawable-nodpi) under the Res directory, create a new xml file in it, select selector with the resource type of Drawable, and create item option in every selector

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <!-- Select the background color -->
 <item android:drawable="@color/checked" android:state_checked="true" />
 <!-- Background color not selected -->
 <item android:drawable="@color/nochecked" android:state_checked="false" />
</selector>

2. Sliding window in the middle

<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. Add the Fragment corresponding to the button to the sliding window and listen for the corresponding event

The following code pays attention to two points

MainActivity needs to inherit from FragmentActivity in order to find the getSupportFragmentManager () method
When writing Fragment, remember to introduce android. support. v. app. Fragment instead of android. app. Fragment (android. app. android was introduced in 3.0, and android. support. v4.app. Fragment is preferred for compatibility with lower versions)

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;
 //  Home page 
 private HomeFragment homeFragment;
 //  Investment page 
 private InvestmentFragment investmentFragment;
 // Photo page 
 private CaptureFragment captureFragment;
 //  My Pages 
 private MyFragment myFragment;
 //  More pages 
 private MoreFragment moreFragment;
 // Fragment Set 
 private List<Fragment> fragmentList;
 // FragmentAdapter
 private MyPageFramgentAdapter myPageFramgentAdapter;
 //  Menu RadioGroup
 private RadioGroup radioGroup;
 //  Home button 
 private RadioButton rbtnHome;
 //  Investment button 
 private RadioButton rbtnInvest;
 //  Photo button 
 private RadioButton rbtnCapture;
 //  My Button 
 private RadioButton rbtnMine;
 //  More buttons 
 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);
  //  Button is selected, viewPager Show the corresponding page 
  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;
    }
   }
  });
  // Will Fragment Add to the collection 
  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 Change, and the corresponding button status becomes selected 
  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 Required adapters 
 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();
  }
 }


}