Android TabHost + RadioButton实现Tab导航栏

最近闲着无事，看了很多的关于项目中的Tab导航栏的实现，最近也好久没更新了，整理了我认为比较好的实现方式：TabHost + RadioButton，相信tabHost大家都比较熟悉，在这里就不在介绍了，感兴趣的可以自己去看看。

我们来先看布局：

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="match_parent"
            android:layout_height="0.0dip"
            android:layout_weight="1.0" >
        </FrameLayout>

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:visibility="gone" >
        </TabWidget>

        <RadioGroup
            android:id="@+id/radioGroup"
            android:layout_width="match_parent"
            android:layout_height="@dimen/title_bottom_height"
            android:background="@color/background_bottomBar"
            android:orientation="horizontal" >

            <RadioButton
                android:id="@+id/position"
                android:layout_height="match_parent"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:checked="true"
                android:drawableTop="@drawable/btn_position"
                android:button="@null"
                android:text="职位"
                android:textColor="@color/btn_text_color"
                android:textSize="@dimen/sp12"
                android:gravity="center"
                android:paddingTop="@dimen/dp5"
                />

            <RadioButton
                android:id="@+id/training"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="match_parent"
                android:drawableTop="@drawable/btn_training"
                android:button="@null"
                android:text="培训"
                android:textSize="@dimen/sp12"
                android:textColor="@color/btn_text_color"
                android:gravity="center"
                android:paddingTop="@dimen/dp5"
                 />

            <RadioButton
                android:id="@+id/found"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="match_parent"
                android:drawableTop="@drawable/btn_found"
                android:textColor="@color/btn_text_color"
                android:text="发现"
                android:textSize="@dimen/sp12"
                android:gravity="center"
                android:paddingTop="@dimen/dp5"
                android:button="@null"
                 />

            <RadioButton
                android:id="@+id/message"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:drawableTop="@drawable/btn_message"
                android:button="@null"
                android:text="消息"
                android:textSize="@dimen/sp12"
                android:textColor="@color/btn_text_color"
                android:gravity="center"
                android:paddingTop="@dimen/dp5"
               />
            <RadioButton
                android:id="@+id/my"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="match_parent"
                android:drawableTop="@drawable/btn_my"
                android:text="我的"
                android:textSize="@dimen/sp12"
                android:textColor="@color/btn_text_color"
                android:gravity="center"
                android:paddingTop="@dimen/dp5"
                android:button="@null"
                 />
        </RadioGroup>
    </LinearLayout>

</TabHost>

布局很简单，最外层tabHost，里面是radioGroup包裹的radioButton，在这里就不一一赘述了。

下面我们来看代码：

MainActivity.class:

public class MainActivity extends TabActivity {
    private static final String TAG = MainActivity.class.getName();
    private RadioGroup radioGroup;
    private TabHost tabHost;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        radioGroup = (RadioGroup) findViewById(R.id.radioGroup);
        tabHost = (TabHost) findViewById(android.R.id.tabhost);
        initTabs();
    }

    private void initTabs() {
        tabHost.setFocusable(true);
        tabHost.setCurrentTab(0);
        TabHost.TabSpec tabSpec = tabHost.newTabSpec("0");
        Intent intent = new Intent(this, PositionActivity.class);
        tabSpec.setIndicator("position").setContent(intent);
        tabHost.setup(this.getLocalActivityManager());
        tabHost.addTab(tabSpec);


        TabHost.TabSpec tabSpec2 = tabHost.newTabSpec("1");
        Intent intent2 = new Intent(this, TrainingActivity.class);
        tabSpec2.setIndicator("training").setContent(intent2);
        tabHost.addTab(tabSpec2);

        TabHost.TabSpec tabSpec3 = tabHost.newTabSpec("2");
        Intent intent3 = new Intent(this, FoundActivity.class);
        tabSpec3.setIndicator("found").setContent(intent3);
        tabHost.addTab(tabSpec3);

        TabHost.TabSpec tabSpec4 = tabHost.newTabSpec("3");
        Intent intent4 = new Intent(this, MessageActivity.class);
        tabSpec4.setIndicator("message").setContent(intent4);
        tabHost.addTab(tabSpec4);

        TabHost.TabSpec tabSpec5 = tabHost.newTabSpec("4");
        Intent intent5 = new Intent(this, MyActivity.class);
        tabSpec5.setIndicator("my").setContent(intent5);
        tabHost.addTab(tabSpec5);

        radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                switch (checkedId) {
                    case R.id.position:
                        tabHost.setCurrentTab(0);
                        break;
                    case R.id.training:
                        tabHost.setCurrentTab(1);
                        break;
                    case R.id.found:
                        tabHost.setCurrentTab(2);
                        break;
                    case R.id.message:
                        tabHost.setCurrentTab(3);
                        break;
                    case R.id.my:
                        tabHost.setCurrentTab(4);
                        break;
                }
            }
        });
    }

大家可以看到这里MainActivity继承的是TabActivity，这里值得注意的是tabHost初始化的时候必须是android.R.id;主要原理是：利用Intent跳转，设置下标，radioGroup的监听事件：setOnCheckedClick，相信大家都能看懂，是不是很简单呢，

当然实现方式很多，谷歌5.0之后推出的tabLayout +ViewPager也是可以实现的，tabHost+Fragment都是可以的