Android开发笔记（十九）底部标签栏TabBar

底部标签页实现思路

现在的APP，大多在页面底部显示标签栏Tabbar，用于切换不同栏目的页面。Tabbar起源于iOS，iOS的Tabbar自动位于页面下方，可是Android搬过来的时候做了改动，自带的Tabbar位于页面上方，很不适合用户的使用习惯。为此我们在Android实现底部标签栏，得额外进行底部适配处理，适配思路基本都是在底部罗列一排的按钮，然后根据点击不同的按钮，跳到不同的Activity页面。具体的实现方式，博主目前发现了三个：

1、使用TabActivity。其中在布局文件中设置TabHost、TabWidget和RadioButton，在代码文件中应用TabActivity、TabSpec和CompoundButton。
2、使用ActivityGroup。将几个栏目的首页Activity都放入ActivityGroup，然后根据点击事件选择切换到哪个Activity。
3、使用FragmentActivity和Fragment。将几个栏目的首页Fragment都放入FragmentActivity，可自动响应点击事件。
其中TabActivity继承自ActivityGroup，目前Android声称TabActivity与ActivityGroup都已废弃，建议采用Fragment和FragmentManager来代替。从实现代码来看，TabActivity和ActivityGroup两种方式的代码量都较多，而FragmentActivity方式的代码就显得很简洁，所以博主也推荐第三种方式。
下面简要介绍三种方式的代码实现：

TabActivity方式

调用代码如下：

import android.app.TabActivity;import android.content.Intent;import android.os.Bundle;import android.widget.CompoundButton;import android.widget.CompoundButton.OnCheckedChangeListener;import android.widget.TabHost;@SuppressWarnings("deprecation")public class TestTabActivity extends TabActivity implements OnCheckedChangeListener {private static final String TAG = "TestTabActivity";private Bundle mBundle = new Bundle();private TabHost tab_host;private CompoundButton first_button;private CompoundButton second_button;private CompoundButton third_button;private String FIRST_TAG = "first";private String SECOND_TAG = "second";private String THIRD_TAG = "third";private TabHost.TabSpec getNewTab(String spec, int label, int icon, Intent intent) {return tab_host.newTabSpec(spec).setIndicator(getString(label), getResources().getDrawable(icon)).setContent(intent);}private void setButtonCheck(CompoundButton button) {if (button.equals(first_button)) {button.setChecked(true);second_button.setChecked(false);third_button.setChecked(false);} else if (button.equals(third_button)) {button.setChecked(true);second_button.setChecked(false);first_button.setChecked(false);} else if (button.equals(second_button)) {button.setChecked(true);first_button.setChecked(false);third_button.setChecked(false);}}@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_test_tab);mBundle.putString("tag", TAG);tab_host = getTabHost();tab_host.addTab(getNewTab(FIRST_TAG, R.string.menu_first,R.drawable.tab_first_selector, new Intent(this, FirstActivity.class).putExtras(mBundle)));tab_host.addTab(getNewTab(SECOND_TAG, R.string.menu_second,R.drawable.tab_second_selector, new Intent(this, SecondActivity.class).putExtras(mBundle)));tab_host.addTab(getNewTab(THIRD_TAG, R.string.menu_third,R.drawable.tab_third_selector, new Intent(this, ThirdActivity.class).putExtras(mBundle))); first_button = ((CompoundButton) findViewById(R.id.rbtn_tab_first)); first_button.setOnCheckedChangeListener(this); second_button = ((CompoundButton) findViewById(R.id.rbtn_tab_second)); second_button.setOnCheckedChangeListener(this); third_button = ((CompoundButton) findViewById(R.id.rbtn_tab_third)); third_button.setOnCheckedChangeListener(this);tab_host.setCurrentTabByTag(FIRST_TAG);setButtonCheck(first_button);}@Overridepublic void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {if (isChecked == true) {setButtonCheck(buttonView);if (buttonView.equals(first_button)) {tab_host.setCurrentTabByTag(FIRST_TAG);} else if (buttonView.equals(second_button)) {tab_host.setCurrentTabByTag(SECOND_TAG);} else if (buttonView.equals(third_button)) {tab_host.setCurrentTabByTag(THIRD_TAG);}}}}

该方式的核心是getNewTab函数，可设置标签的文本和图标，以及该标签对应的跳转页面。当发生点击事件时，系统调用TabHost的setCurrentTabByTag函数来定位到具体的跳转页面。

ActivityGroup方式

调用代码如下：

import android.app.ActivityGroup;import android.content.Intent;import android.os.Bundle;import android.view.View;import android.view.View.OnClickListener;import android.widget.ImageView;import android.widget.LinearLayout;import android.widget.TextView;@SuppressWarnings("deprecation")public class TestGroupActivity extends ActivityGroup implements OnClickListener {private static final String TAG = "TestGroupActivity";private Bundle mBundle = new Bundle();private LinearLayout layout_container, layout_first, layout_second, layout_third;private ImageView img_first, img_second, img_third;private TextView txt_first, txt_second, txt_third;public static final int PAGE_FIRST = 1001;public static final int PAGE_SECOND = 1002;public static final int PAGE_XINXI = 1003;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_test_group);layout_container = (LinearLayout) findViewById(R.id.layout_container);layout_first = (LinearLayout) findViewById(R.id.layout_first);layout_second = (LinearLayout) findViewById(R.id.layout_second);layout_third = (LinearLayout) findViewById(R.id.layout_third);img_first = (ImageView) findViewById(R.id.img_first);img_second = (ImageView) findViewById(R.id.img_second);img_third = (ImageView) findViewById(R.id.img_third);txt_first = (TextView) findViewById(R.id.txt_first);txt_second = (TextView) findViewById(R.id.txt_second);txt_third = (TextView) findViewById(R.id.txt_third);layout_first.setOnClickListener(this);layout_second.setOnClickListener(this);layout_third.setOnClickListener(this);mBundle.putString("tag", TAG);changeContainerView(PAGE_FIRST);}private void changeContainerView(int page) {switch (page) {case PAGE_FIRST:layout_first.setBackgroundResource(R.drawable.ic_tabbar_bg_click);layout_second.setBackgroundResource(R.drawable.ic_tabbar_bg_normal);layout_third.setBackgroundResource(R.drawable.ic_tabbar_bg_normal);img_first.setBackgroundResource(R.drawable.ic_tabbar_first_pressed);img_second.setBackgroundResource(R.drawable.ic_tabbar_second_normal);img_third.setBackgroundResource(R.drawable.ic_tabbar_third_normal);txt_first.setTextColor(getResources().getColor(R.color.tab_text_selected));txt_second.setTextColor(getResources().getColor(R.color.tab_text_normal));txt_third.setTextColor(getResources().getColor(R.color.tab_text_normal));toActivity("item1", new Intent(this, FirstActivity.class).putExtras(mBundle));return;case PAGE_SECOND:layout_first.setBackgroundResource(R.drawable.ic_tabbar_bg_normal);layout_second.setBackgroundResource(R.drawable.ic_tabbar_bg_click);layout_third.setBackgroundResource(R.drawable.ic_tabbar_bg_normal);img_first.setBackgroundResource(R.drawable.ic_tabbar_first_normal);img_second.setBackgroundResource(R.drawable.ic_tabbar_second_pressed);img_third.setBackgroundResource(R.drawable.ic_tabbar_third_normal);txt_first.setTextColor(getResources().getColor(R.color.tab_text_normal));txt_second.setTextColor(getResources().getColor(R.color.tab_text_selected));txt_third.setTextColor(getResources().getColor(R.color.tab_text_normal));toActivity("item1", new Intent(this, SecondActivity.class).putExtras(mBundle));return;case PAGE_XINXI:layout_first.setBackgroundResource(R.drawable.ic_tabbar_bg_normal);layout_second.setBackgroundResource(R.drawable.ic_tabbar_bg_normal);layout_third.setBackgroundResource(R.drawable.ic_tabbar_bg_click);img_first.setBackgroundResource(R.drawable.ic_tabbar_first_normal);img_second.setBackgroundResource(R.drawable.ic_tabbar_second_normal);img_third.setBackgroundResource(R.drawable.ic_tabbar_third_pressed);txt_first.setTextColor(getResources().getColor(R.color.tab_text_normal));txt_second.setTextColor(getResources().getColor(R.color.tab_text_normal));txt_third.setTextColor(getResources().getColor(R.color.tab_text_selected));toActivity("item1", new Intent(this, ThirdActivity.class).putExtras(mBundle));return;default:return;}}@Overridepublic void onClick(View view) {switch (view.getId()) {case R.id.layout_first:changeContainerView(PAGE_FIRST);return;case R.id.layout_second:changeContainerView(PAGE_SECOND);return;case R.id.layout_third:changeContainerView(PAGE_XINXI);return;default:return;}}private void toActivity(String label, Intent intent) {layout_container.removeAllViews();View view = getLocalActivityManager().startActivity(label, intent).getDecorView();layout_container.addView(view);}}

该方式的核心是toActivity函数，也可设置标签的文本和图标，以及该标签对应的跳转页面。在toActivity函数中可以看到，startActivity方法返回一个Window对象，系统从该Window对象提取标签页的实际视图getDecorView（我们可以把DecorView理解为该标签页的根视图），然后这个DecorView加入到Tabbar的视图容器中。

FragmentActivity方式

调用代码如下：

import android.annotation.SuppressLint;import android.graphics.drawable.Drawable;import android.os.Bundle;import android.support.v4.app.FragmentActivity;import android.support.v4.app.FragmentTabHost;import android.view.View;import android.widget.LinearLayout;import android.widget.TabHost.TabSpec;import android.widget.TextView;@SuppressLint("InflateParams")public class TestFragmentActivity extends FragmentActivity {private static final String TAG = "TestFragmentActivity";private Bundle mBundle = new Bundle();private FragmentTabHost mTabHost;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_test_fragment);mBundle.putString("tag", TAG);mTabHost = (FragmentTabHost)findViewById(android.R.id.tabhost);       mTabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);//addTab(标题，跳转的Fragment，传递参数的Bundle)mTabHost.addTab(getTabView(R.string.menu_first, R.drawable.tabbar_first_selector), FirstFragment.class, mBundle);mTabHost.addTab(getTabView(R.string.menu_second, R.drawable.tabbar_second_selector), SecondFragment.class, mBundle);mTabHost.addTab(getTabView(R.string.menu_third, R.drawable.tabbar_third_selector), ThirdFragment.class, mBundle);//设置tabs之间的分隔线不显示mTabHost.getTabWidget().setShowDividers(LinearLayout.SHOW_DIVIDER_NONE);}private TabSpec getTabView(int textId, int imgId) {String text = getResources().getString(textId);Drawable drawable = getResources().getDrawable(imgId);//必须设置图片大小，否则不显示drawable.setBounds(0, 0, drawable.getMinimumWidth(), drawable.getMinimumHeight());View tabbar_item = getLayoutInflater().inflate(R.layout.tabbar_item, null);TextView tv_item = (TextView) tabbar_item.findViewById(R.id.tv_item);tv_item.setText(text);tv_item.setCompoundDrawables(null, drawable, null, null);TabSpec spec = mTabHost.newTabSpec(text).setIndicator(tabbar_item);return spec;}}

该方式的核心是getTabView函数，可自定义每个标签项的具体视图。因为FragmentTabHost已经自动处理了点击事件，所以该方式的代码量比前两种缩小很多。



下面是底部标签页三种方式的效果图






点击下载本文用到的底部标签页三种方式的工程代码

点此查看Android开发笔记的完整目录