android中TabHost和RadioGroup

android底部菜单应用

博客分类：

• android--UI示例

TabHostMenuRadioGroupButton 

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

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

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

Submenu：子菜单。

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

首先看布局文件：

1. <?xml version="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类中有么个方法：

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. "Your content must have a TabHost whose id attribute is " +
8. "'android.R.id.tabhost'");
9. }
10. mTabHost.setup(getLocalActivityManager());
11. }

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

再看看TabHost这个类中，

1. public void setup() {
2. mTabWidget = (TabWidget) findViewById(com.android.internal.R.id.tabs);
3. if (mTabWidget == null) {
4. throw new RuntimeException(
5. "Your TabHost must have a TabWidget whose id attribute is 'android.R.id.tabs'");
6. }
7. // KeyListener to attach to all tabs. Detects non-navigation keys
8. // and relays them to the tab content.
9. mTabKeyListener = new OnKeyListener() {
10. public boolean onKey(View v, int keyCode, KeyEvent event) {
11. switch (keyCode) {
12. case KeyEvent.KEYCODE_DPAD_CENTER:
13. case KeyEvent.KEYCODE_DPAD_LEFT:
14. case KeyEvent.KEYCODE_DPAD_RIGHT:
15. case KeyEvent.KEYCODE_DPAD_UP:
16. case KeyEvent.KEYCODE_DPAD_DOWN:
17. case KeyEvent.KEYCODE_ENTER:
18. return false;
19. }
20. mTabContent.requestFocus(View.FOCUS_FORWARD);
21. return mTabContent.dispatchKeyEvent(event);
22. }
23. };
24. mTabWidget.setTabSelectionListener(new TabWidget.OnTabSelectionChanged() {
25. public void onTabSelectionChanged(int tabIndex, 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. "Your TabHost must have a FrameLayout whose id attribute is "
36. + "'android.R.id.tabcontent'");
37. }
38. }

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

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

看一下主要代码：

1. package com.iteye.androidtoast;
2. import android.app.TabActivity;
3. import android.content.Intent;
4. import android.os.Bundle;
5. import android.widget.RadioGroup;
6. import android.widget.RadioGroup.OnCheckedChangeListener;
7. import android.widget.TabHost;
8. public class MainActivity extends TabActivity implements OnCheckedChangeListener{
9. /** Called when the activity is first created. */
10. private TabHost mHost;
11. private RadioGroup radioderGroup;
12. @Override
13. public void onCreate(Bundle savedInstanceState) {
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(new Intent(this,OneActivity.class)));
21. mHost.addTab(mHost.newTabSpec("TWO").setIndicator("TWO")
22. .setContent(new Intent(this,TwoActivity.class)));
23. mHost.addTab(mHost.newTabSpec("THREE").setIndicator("THREE")
24. .setContent(new Intent(this,ThreeActivity.class)));
25. mHost.addTab(mHost.newTabSpec("FOUR").setIndicator("FOUR")
26. .setContent(new Intent(this,FourActivity.class)));
27. mHost.addTab(mHost.newTabSpec("FIVE").setIndicator("FIVE")
28. .setContent(new Intent(this,FiveActivity.class)));
29. radioderGroup = (RadioGroup) findViewById(R.id.main_radio);
30. radioderGroup.setOnCheckedChangeListener(this);
31. }
32. @Override
33. public void onCheckedChanged(RadioGroup group, int checkedId) {
34. switch(checkedId){
35. case R.id.radio_button0:
36. mHost.setCurrentTabByTag("ONE");
37. break;
38. case R.id.radio_button1:
39. mHost.setCurrentTabByTag("TWO");
40. break;
41. case R.id.radio_button2:
42. mHost.setCurrentTabByTag("THREE");
43. break;
44. case R.id.radio_button3:
45. mHost.setCurrentTabByTag("FOUR");
46. break;
47. case R.id.radio_button4:
48. mHost.setCurrentTabByTag("FIVE");
49. break;
50. }
51. }
52. }

转载：http://androidtoast.iteye.com/blog/1187274