android底部菜单应用

朴灿烈づ我的快乐病毒、 2022-05-12 22:46 319阅读 0赞

在android中实现菜单功能有多种方法。

Options Menu:用户按下menu Button时显示的菜单。

Context Menu:用户长时间按下屏幕,所显示出来的菜单也称为上下文菜单。

Submenu:子菜单。

但是有时候这些内置的菜单并不能满足我们功能,这就需要自己自定义一种菜单。接下来我说的这种就是通过TabHost与RadioGroup结合完成的菜单。这也是很常用的一种底部菜单做法。先上图:

e92b55bc-fd18-3d1c-b928-496426337de0.gif

首先看布局文件:

Xml代码 收藏代码

  1. <?**xmlversion=”1.0”encoding=”UTF-8”?>**
  2. <**TabHost**android:id=”@android:id/tabhost”android:layout_width=”fill_parent”android:layout_height=”fill_parent”
  3. xmlns:android=”http://schemas.android.com/apk/res/android"**>**
  4. <**LinearLayout**
  5. android:orientation=”vertical”
  6. android:layout_width=”fill_parent”
  7. android:layout_height=”fill_parent”>
  8. <**FrameLayout**
  9. android:id=”@android:id/tabcontent”
  10. android:layout_width=”fill_parent”
  11. android:layout_height=”0.0dip”
  12. android:layout_weight=”1.0”/>
  13. <**TabWidget**
  14. android:id=”@android:id/tabs”
  15. android:visibility=”gone”
  16. android:layout_width=”fill_parent”
  17. android:layout_height=”wrap_content”
  18. android:layout_weight=”0.0”/>
  19. <**RadioGroup**
  20. android:gravity=”center_vertical”
  21. android:layout_gravity=”bottom”
  22. android:orientation=”horizontal”
  23. android:id=”@+id/main_radio”
  24. android:background=”@drawable/maintab_toolbar_bg”
  25. android:layout_width=”fill_parent”
  26. android:layout_height=”wrap_content”>
  27. <**RadioButton**
  28. android:id=”@+id/radio_button0”
  29. android:tag=”radio_button0”
  30. android:layout_marginTop=”2.0dip”
  31. android:text=”@string/alarm”
  32. android:drawableTop=”@drawable/icon_1”
  33. style=”@style/main_tab_bottom”/>
  34. <**RadioButton**
  35. android:id=”@+id/radio_button1”
  36. android:tag=”radio_button1”
  37. android:layout_marginTop=”2.0dip”
  38. android:text=”@string/message”
  39. android:drawableTop=”@drawable/icon_2”
  40. style=”@style/main_tab_bottom”/>
  41. <**RadioButton**
  42. android:id=”@+id/radio_button2”
  43. android:tag=”radio_button2”
  44. android:layout_marginTop=”2.0dip”
  45. android:text=”@string/photo”
  46. android:drawableTop=”@drawable/icon_3”
  47. style=”@style/main_tab_bottom”/>
  48. <**RadioButton**
  49. android:id=”@+id/radio_button3”
  50. android:tag=”radio_button3”
  51. android:layout_marginTop=”2.0dip”
  52. android:text=”@string/music”
  53. android:drawableTop=”@drawable/icon_4”
  54. style=”@style/main_tab_bottom”/>
  55. <**RadioButton**
  56. android:id=”@+id/radio_button4”
  57. android:tag=”radio_button4”
  58. android:layout_marginTop=”2.0dip”
  59. android:text=”@string/setting”
  60. android:drawableTop=”@drawable/icon_5”
  61. style=”@style/main_tab_bottom”/>
  62. </**RadioGroup**>
  63. </**LinearLayout**>
  64. </**TabHost**>

需要注意的是,如果用TabHost这个控件,其中有几个ID是必须这么写的,android:id=”@android:id/tabhost ;android:id=”@android:id/tabcontent” ;android:id=”@android:id/tabs” ;之所以要这么写是因为在TabHost这个类中。需要实例化上述这个ID的控件。看源码:

在TabActivity中有么个方法:

Java代码 收藏代码

  1. @Override
  2. public**void**onContentChanged(){
  3. super.onContentChanged();
  4. mTabHost=(TabHost)findViewById(com.android.internal.R.id.tabhost);
  5. if(mTabHost==null){
  6. throw**new**RuntimeException(
  7. “YourcontentmusthaveaTabHostwhoseidattributeis”+
  8. “‘android.R.id.tabhost’”);
  9. }
  10. mTabHost.setup(getLocalActivityManager());
  11. }
  12. private**void**ensureTabHost(){
  13. if(mTabHost==null){
  14. this.setContentView(com.android.internal.R.layout.tab_content);
  15. }
  16. }

当内容发生改变时它会调用这个方法,来更新列表或者其他视图,而这个方法中需要实例化TabHost,所以必须通过ID为tabhost实例化。

再看看TabHost这个类中,

Java代码 收藏代码

  1. public**void**setup(){
  2. mTabWidget=(TabWidget)findViewById(com.android.internal.R.id.tabs);
  3. if(mTabWidget==null){
  4. throw**new**RuntimeException(
  5. “YourTabHostmusthaveaTabWidgetwhoseidattributeis’android.R.id.tabs’”);
  6. }
  7. //KeyListenertoattachtoalltabs.Detectsnon-navigationkeys
  8. //andrelaysthemtothetabcontent.
  9. mTabKeyListener=newOnKeyListener(){
  10. public**booleanonKey(Viewv,int**keyCode,KeyEventevent){
  11. switch(keyCode){
  12. caseKeyEvent.KEYCODE_DPAD_CENTER:
  13. caseKeyEvent.KEYCODE_DPAD_LEFT:
  14. caseKeyEvent.KEYCODE_DPAD_RIGHT:
  15. caseKeyEvent.KEYCODE_DPAD_UP:
  16. caseKeyEvent.KEYCODE_DPAD_DOWN:
  17. caseKeyEvent.KEYCODE_ENTER:
  18. return**false**;
  19. }
  20. mTabContent.requestFocus(View.FOCUS_FORWARD);
  21. returnmTabContent.dispatchKeyEvent(event);
  22. }
  23. };
  24. mTabWidget.setTabSelectionListener(newTabWidget.OnTabSelectionChanged(){
  25. public**voidonTabSelectionChanged(inttabIndex,boolean**clicked){
  26. setCurrentTab(tabIndex);
  27. if(clicked){
  28. mTabContent.requestFocus(View.FOCUS_FORWARD);
  29. }
  30. }
  31. });
  32. mTabContent=(FrameLayout)findViewById(com.android.internal.R.id.tabcontent);
  33. if(mTabContent==null){
  34. throw**new**RuntimeException(
  35. “YourTabHostmusthaveaFrameLayoutwhoseidattributeis”
  36. +“‘android.R.id.tabcontent’”);
  37. }
  38. }

这个方法,是在增加选项卡之前由系统调用。在这个方法中需要通过tabs 这个ID实例化一个TabWidget,通过tabcontent这个ID实例化一个FrameLayout,用来放置选项卡内容。所以这两个ID也是固定的。

在上述布局文件中隐藏了系统默认的Widget,取而代之的是带有图片的Button。

看一下主要代码:

Java代码 收藏代码

  1. packagecom.iteye.androidtoast;
  2. importandroid.app.TabActivity;
  3. importandroid.content.Intent;
  4. importandroid.os.Bundle;
  5. importandroid.widget.RadioGroup;
  6. importandroid.widget.RadioGroup.OnCheckedChangeListener;
  7. importandroid.widget.TabHost;
  8. public**classMainActivityextendsTabActivityimplements**OnCheckedChangeListener{
  9. /**Calledwhentheactivityisfirstcreated.*/
  10. privateTabHostmHost;
  11. privateRadioGroupradioderGroup;
  12. @Override
  13. public**void**onCreate(BundlesavedInstanceState){
  14. super.onCreate(savedInstanceState);
  15. setContentView(R.layout.maintabs);
  16. //实例化TabHost
  17. mHost=this.getTabHost();
  18. //添加选项卡
  19. mHost.addTab(mHost.newTabSpec(“ONE”).setIndicator(“ONE”)
  20. .setContent(newIntent(this,OneActivity.class)));
  21. mHost.addTab(mHost.newTabSpec(“TWO”).setIndicator(“TWO”)
  22. .setContent(newIntent(this,TwoActivity.class)));
  23. mHost.addTab(mHost.newTabSpec(“THREE”).setIndicator(“THREE”)
  24. .setContent(newIntent(this,ThreeActivity.class)));
  25. mHost.addTab(mHost.newTabSpec(“FOUR”).setIndicator(“FOUR”)
  26. .setContent(newIntent(this,FourActivity.class)));
  27. mHost.addTab(mHost.newTabSpec(“FIVE”).setIndicator(“FIVE”)
  28. .setContent(newIntent(this,FiveActivity.class)));
  29. radioderGroup=(RadioGroup)findViewById(R.id.main_radio);
  30. radioderGroup.setOnCheckedChangeListener(this);
  31. }
  32. @Override
  33. public**voidonCheckedChanged(RadioGroupgroup,int**checkedId){
  34. switch(checkedId){
  35. caseR.id.radio_button0:
  36. mHost.setCurrentTabByTag(“ONE”);
  37. break;
  38. caseR.id.radio_button1:
  39. mHost.setCurrentTabByTag(“TWO”);
  40. break;
  41. caseR.id.radio_button2:
  42. mHost.setCurrentTabByTag(“THREE”);
  43. break;
  44. caseR.id.radio_button3:
  45. mHost.setCurrentTabByTag(“FOUR”);
  46. break;
  47. caseR.id.radio_button4:
  48. mHost.setCurrentTabByTag(“FIVE”);
  49. break;
  50. }
  51. }
  52. }

这个应该没有什么好难理解的。OK该睡了。有什么问题留言!

  • BottomMenu1.rar(126.9 KB)
  • 下载次数: 2785

发表评论

表情:
评论列表 (有 0 条评论,319人围观)

还没有评论,来说两句吧...

相关阅读

    相关 MUI底部二级菜单

    引言 底部二级菜单,笔者在原生的APP很少看到该功能,而在微信公众号倒是挺常见的,不过既然在MUI中看到此技巧,那笔者就在此记录一下方便自己日后查阅,同时也希望可以帮...