Android實(shí)現(xiàn)美團(tuán)APP的底部滑動(dòng)菜單
仿美團(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í)有所幫助,也希望大家多多支持腳本之家。
- Android制作微信app頂部menu菜單(ActionBar)
- Android仿今日頭條APP實(shí)現(xiàn)下拉導(dǎo)航選擇菜單效果
- Android App中DrawerLayout抽屜效果的菜單編寫(xiě)實(shí)例
- Android界面設(shè)計(jì)(APP設(shè)計(jì)趨勢(shì) 左側(cè)隱藏菜單右邊顯示content)
- Android實(shí)現(xiàn)頂部導(dǎo)航菜單左右滑動(dòng)效果
- Android滑動(dòng)優(yōu)化高仿QQ6.0側(cè)滑菜單(滑動(dòng)優(yōu)化)
- Android實(shí)現(xiàn)自定義滑動(dòng)式抽屜菜單效果
- android RecyclerView側(cè)滑菜單,滑動(dòng)刪除,長(zhǎng)按拖拽,下拉刷新上拉加載
- Android仿微信滑動(dòng)彈出編輯、刪除菜單效果、增加下拉刷新功能
- Android利用滑動(dòng)菜單框架實(shí)現(xiàn)滑動(dòng)菜單效果
相關(guān)文章
Android框架Volley使用之Json請(qǐng)求實(shí)現(xiàn)
這篇文章主要介紹了Android框架Volley使用之Json請(qǐng)求實(shí)現(xiàn),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05移動(dòng)端開(kāi)發(fā)之Jetpack?Hilt技術(shù)實(shí)現(xiàn)解耦
Hilt的出現(xiàn)解決前兩點(diǎn)問(wèn)題,因?yàn)镠ilt是Dagger針對(duì)Android平臺(tái)的場(chǎng)景化框架,比如Dagger需要我們手動(dòng)聲明注入的地方,而Android聲明的地方不都在onCreate()嗎,所以Hilt就幫我們做了,除此之外還做了很多事情2023-02-02Android官方的側(cè)滑控件DrawerLayout的示例代碼
這篇文章主要介紹了Android官方的側(cè)滑控件DrawerLayout的示例代碼,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-09-09Android自定義ScrollView實(shí)現(xiàn)阻尼回彈
這篇文章主要為大家詳細(xì)介紹了Android自定義ScrollView實(shí)現(xiàn)阻尼回彈,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04