现在的位置: 首页 > 编程语言 > 正文

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

2020年02月13日 编程语言 ⁄ 共 6429字 ⁄ 字号 评论关闭

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

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

本文标题: Android实现美团APP的底部滑动菜单

以上就上有关Android实现美团APP的底部滑动菜单的全部内容,学步园全面介绍编程技术、操作系统、数据库、web前端技术等内容。

抱歉!评论已关闭.