【Android】模拟Android微信APK底部的TabHost选项卡

资源准备

下载一个微信apk，解压，并找出所需的资源图片。

layout中XML布局

<?xml version="1.0" encoding="UTF-8"?>
<!-- Tab导航 最新版 -->
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
	android:id="@android:id/tabhost"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent" >

	<RelativeLayout
		android:layout_width="fill_parent"
		android:layout_height="wrap_content"
		android:orientation="vertical">

		<FrameLayout
			android:id="@android:id/tabcontent"
			android:layout_width="fill_parent"
			android:layout_height="fill_parent"
			android:background="#FFF" >

		</FrameLayout>

		<!-- TabWidget管理所有的选项卡，id名是android指定的 -->
		<TabWidget
			android:id="@android:id/tabs"
			android:layout_width="fill_parent"
			android:layout_height="fill_parent"
			android:visibility="gone" />

		<!-- Frame下放置单选群组替代TAB效果 -->
		<RadioGroup
			android:id="@+id/main_radio"
			android:layout_width="fill_parent"
			android:layout_height="wrap_content"
			android:background="#ccc"
			android:gravity="center_vertical"
			android:orientation="horizontal"
			android:layout_alignParentBottom="true" >

			<RadioButton
				android:id="@+id/tab_icon_weixin"
				style="@style/main_tab_bottom"
				android:checked="true"
				android:drawableTop="@drawable/tab_weixin_normal"
				android:text="微信" />

			<RadioButton
				android:id="@+id/tab_icon_address"
				style="@style/main_tab_bottom"
				android:checked="false"
				android:drawableTop="@drawable/tab_address_normal"
				android:text="通讯录" />

			<RadioButton
				android:id="@+id/tab_icon_find"
				style="@style/main_tab_bottom"
				android:drawableTop="@drawable/tab_find_frd_normal"
				android:text="发现" />

			<RadioButton
				android:id="@+id/tab_icon_myself"
				style="@style/main_tab_bottom"
				android:drawableTop="@drawable/tab_settings_normal"
				android:text="我" />
		</RadioGroup>
	</RelativeLayout>
</TabHost>

style中XML文档

    <!-- MainTab选项卡中单选按钮的样式，其中包括了文本、selector、padding、宽高、权重等的设置 -->
    <style name="main_tab_bottom">
        <item name="android:textSize">13sp</item>
        <item name="android:textColor">#666666</item>
        <item name="android:gravity">center_horizontal</item>
 		<!-- 该处引用drawable下面的一个xml文档(selector) -->
        <item name="android:paddingTop">5dp</item>
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_weight">1.0</item>
 		<!-- 每个按钮的权重，相等则平分尺寸 -->
        <item name="android:button">@null</item>
 		<!-- 隐藏单选按钮 -->
        <item name="android:layout_marginTop">1.0dip</item>
        <item name="android:paddingBottom">5.0dip</item>
    </style>

Activity中Java文件

package com.app;

import android.app.AlertDialog;
import android.app.TabActivity;
import android.content.DialogInterface;
import android.content.Intent;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.TabHost;
import android.widget.TextView;
import android.widget.Toast;
import android.widget.TabWidget;

/**
 * Tab导航
 */
//public class Tabs extends TabActivity implements View.OnClickListener{
public class Tabs extends TabActivity{
	public static TabHost mTabHost;
	public static TabHost getmTabHost() {
		return mTabHost;
	}

	private RadioGroup main_radio;
	private RadioButton tab_icon_weixin, tab_icon_address, tab_icon_find,tab_icon_myself;

	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.tabs);
		mTabHost = getTabHost();
		final TabWidget tabWidget = mTabHost.getTabWidget();
		tabWidget.setStripEnabled(false);// 圆角边线不启用
		//添加n个tab选项卡，定义他们的tab名，指示名，目标屏对应的类
		mTabHost.addTab(mTabHost.newTabSpec("TAG1").setIndicator("0").setContent(new Intent(this, WeixinActivity.class)));
		mTabHost.addTab(mTabHost.newTabSpec("TAG2").setIndicator("1").setContent(new Intent(this, AddressActivity.class)));
		mTabHost.addTab(mTabHost.newTabSpec("TAG3").setIndicator("2").setContent(new Intent(this, FindActivity.class)));
		mTabHost.addTab(mTabHost.newTabSpec("TAG4").setIndicator("3").setContent(new Intent(this, MyselfActivity.class)));
		// 视觉上,用单选按钮替代TabWidget
		main_radio = (RadioGroup) findViewById(R.id.main_radio);
		tab_icon_weixin = (RadioButton) findViewById(R.id.tab_icon_weixin);
		tab_icon_address = (RadioButton) findViewById(R.id.tab_icon_address);
		tab_icon_find = (RadioButton) findViewById(R.id.tab_icon_find);
		tab_icon_myself = (RadioButton) findViewById(R.id.tab_icon_myself);
		main_radio.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
					@Override
					public void onCheckedChanged(RadioGroup group, int id) {
						if (id == tab_icon_weixin.getId()) {
							mTabHost.setCurrentTab(0);
						} else if (id == tab_icon_address.getId()) {
							mTabHost.setCurrentTab(1);
						} else if (id == tab_icon_find.getId()) {
							mTabHost.setCurrentTab(2);
						} else if (id == tab_icon_myself.getId()) {
							mTabHost.setCurrentTab(3);
						}
					}
				});

		// 设置当前显示哪一个标签
		mTabHost.setCurrentTab(0);
		// 遍历tabWidget每个标签，设置背景图片 无
		for (int i = 0; i < tabWidget.getChildCount(); i++) {
			View vv = tabWidget.getChildAt(i);
			vv.getLayoutParams().height = 45;
			// vv.getLayoutParams().width = 65;
			vv.setBackgroundDrawable(null);
		}
//		findViewById(R.id.tab_icon_brand).setOnClickListener(this);
	}
}

效果图