Android realizes the bottom sliding menu of Meituan APP
- 2021-11-14 06:56:00
- OfStack
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 () methodWhen 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();
}
}
}