使用TabHost实现QQ标签栏

一、实现效果图如下：

二、实现

实现比较简单，主要是使用TabHost去切换四个Activity，关键部分在xml布局上，主要布局写法如下：

<?xml version= "1.0" encoding="utf-8" ?>
<TabHost
    android:id = "@android:id/tabhost"
    android:layout_width = "fill_parent"
    android:layout_height="fill_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">
    
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
        <FrameLayout 
            android:id ="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="10dip"
            android:layout_weight="1.0"/>
        <TabWidget
            android:id="@android:id/tabs"
            android:visibility="gone"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0.0" />
        <RadioGroup 
            android:id="@+id/main_radioGroup"
            android:gravity="center_vertical"
            android:layout_gravity="bottom"
            android:orientation="horizontal"
          
            android:background="@drawable/skin_bottom_bar_background"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content">
            <RadioButton 
                android:id="@+id/tab_conversation"
                android:checked="true"
                android:background="@drawable/first_tab_select"
                android:drawableTop="@drawable/tab_conversation_selector"
                style="@style/tab_btn"/>
            <RadioButton 
                android:id="@+id/tab_contact"
                android:background="@drawable/first_tab_select"
                android:drawableTop="@drawable/tab_contact_selector"
                style="@style/tab_btn"/>

            <RadioButton
                android:id="@+id/tab_plugin"
                android:background="@drawable/first_tab_select"
                android:drawableTop="@drawable/tab_plugin_selector" 
                style="@style/tab_btn"/>

            <RadioButton 
                android:id="@+id/tab_setting"
                android:background="@drawable/first_tab_select"
                android:drawableTop="@drawable/tab_setting_selector"
                style="@style/tab_btn"/>
        </RadioGroup>
    </LinearLayout>
</TabHost>

这里使用了RadioButton，通过定制样式以达到我们的需求，样式写法如下

 <style name="tab_btn">
        <item name="android:gravity">center_horizontal</item>
        
        <item name="android:layout_width">0.0dip</item>
        <item name="android:layout_height">60dip</item>
        <item name="android:button">@null</item>
        <item name="android:layout_weight">1.0</item>
    </style>

其他地方都是加载图片，这里不做介绍了，都比较简单，下面是使用TabHost切换Activity

public class MainActivity extends TabActivity {
	private TabHost tabHost;
	private RadioGroup radioGroup;
	private static final String CONVERSATION = "消息";
	private static final String CONTACT = "联系人";
	private static final String PLUGIN = "动态";
	private static final String SETTING = "设置";
	
	private Intent conversationIntent;
	private Intent contactIntent;
	private Intent pluginIntent;
	private Intent settingIntent;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		tabHost = this.getTabHost();
		setupIntent();
		
		radioGroup = (RadioGroup)findViewById(R.id.main_radioGroup);
		radioGroup.setOnCheckedChangeListener(new OnCheckedChangeListener() {
			public void onCheckedChanged(RadioGroup group, int checkedId) {
				switch(checkedId)
				{
				case R.id.tab_conversation:
				{
					tabHost.setCurrentTabByTag(CONVERSATION);
				}
				break;
				case R.id.tab_contact:
				{
					tabHost.setCurrentTabByTag(CONTACT);
				}
				break;
				case R.id.tab_plugin:
				{
					tabHost.setCurrentTabByTag(PLUGIN);
				}
				break;
				case R.id.tab_setting:
				{
					tabHost.setCurrentTabByTag(SETTING);
				}
				break;
				default:
					break;
				}
			}
		});
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}
	
	private void setupIntent() {
		conversationIntent = new Intent(this, ConversationActivity.class);
		contactIntent = new Intent(this, ContactActivity.class);
		pluginIntent = new Intent(this, PluginActivity.class);
		settingIntent = new Intent(this, SettingActivity.class);
		
		TabSpec tabSpec1 = tabHost.newTabSpec(CONVERSATION).setIndicator(CONVERSATION)
				.setContent(conversationIntent);
		TabSpec tabSpec2 = tabHost.newTabSpec(CONTACT).setIndicator(CONTACT)
				.setContent(contactIntent);
		TabSpec tabSpec3 = tabHost.newTabSpec(PLUGIN).setIndicator(PLUGIN)
				.setContent(pluginIntent);
		TabSpec tabSpec4 = tabHost.newTabSpec(SETTING).setIndicator(SETTING)
				.setContent(settingIntent);
		
		tabHost.addTab(tabSpec1);
		tabHost.addTab(tabSpec2);
		tabHost.addTab(tabSpec3);
		tabHost.addTab(tabSpec4);
	}

}

源码地址： http://download.csdn.net/detail/m370809968/6482397