基于RadioGroup的TabHost实现

    TabHost可以让手机屏幕的内容尽量丰富，是一个比较常用的控件，但原生的TabHost用户体验并不好，实际开发中通常是借助其他控件来达到更好的控制显示效果。比如GridView+ActivityGroup的组合、RadioGroup等等。今天就给出RadioGroup的实现方式。老规矩，先上图：

    仿周末画报（iWeekly）双击隐藏bottom。实际应用场景：阅读一篇文章时，为了享受更大的屏幕空间，双击屏幕，隐藏顶部、底部的一些功能性控件，比如回退按钮、刷新按钮，当你想回退或者刷新时，再双击一次，显示控件。

 双击前：

双击后：

下面给出具体的实现代码：

清单文件就不说了，就是自动生成的：

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.focustech.radiogrouptabhost"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk android:minSdkVersion="14" />

    <application
        android:label="@string/app_name" >
        <activity
            android:label="@string/app_name"
            android:name=".RadioGroupTabHostActivity" >
            <intent-filter >
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

定义按钮被点击，选中时的背景 ：

<?xml version="1.0" encoding="utf-8"?>
<!--定义按钮被点击，选中时的背景 -->
<selector
  xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="true" android:state_pressed="true" android:drawable="@drawable/main_btn_bg" />
    <item android:state_enabled="true" android:state_checked="true" android:drawable="@drawable/main_btn_bg" />
</selector>

样式文件，主要是为了改造原生的单选按钮：

<?xml version="1.0" encoding="utf-8"?>
<resources>
<!--设定按钮样式-->
<style name="main_btn_style">

    <!-- 去除原生的单选按钮图标 -->
	<item name="android:button">@null</item>
	<item name="android:textSize">10dp</item>
	<item name="android:textColor">#ffffff</item>
	<item name="android:gravity">center_horizontal</item>
	<item name="android:layout_width">fill_parent</item>
	<item name="android:layout_height">wrap_content</item>
	<item name="android:drawablePadding">4dp</item>
	<item name="android:layout_weight">1.0</item>
	<!-- 引用 main_btn_bg_d.xml，设定当按钮被press、checked时的背景图，以此增强点击、选中按钮时的视觉效果-->
    <item name="android:background">@drawable/main_btn_bg_d</item>
</style>

</resources>

布局文件：

<?xml version="1.0" encoding="utf-8"?>

<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#104E8B"
    android:id="@android:id/tabhost"
    >
<LinearLayout
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >

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

<FrameLayout android:id="@android:id/tabcontent"
		android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1.0"
        >

     <TextView android:id="@+id/home_content"
		android:layout_width="fill_parent"
		android:layout_height="fill_parent"
		android:text="主页"
		/>

     <TextView android:id="@+id/message_content"
		android:layout_width="fill_parent"
		android:layout_height="fill_parent"
		android:text="信息"/>

     <TextView android:id="@+id/more_content"
		android:layout_width="fill_parent"
		android:layout_height="fill_parent"
		android:text="更多"/>

</FrameLayout>

<RadioGroup android:id="@+id/rg_main_btns"
 			android:layout_width="fill_parent"
    		android:layout_height="wrap_content"
    		android:background="@drawable/bar"
    		android:layout_gravity="bottom"
    		android:orientation="horizontal"
    		android:gravity="center_vertical"
    		>

   <RadioButton android:id="@+id/rd_home"
   				android:layout_width="wrap_content"
    		    android:layout_height="wrap_content"
    		    android:text="主页"
    		    style="@style/main_btn_style"
    		    android:checked="true"
    		    android:drawableTop="@drawable/home_icon"/>

   <RadioButton android:id="@+id/rd_msg"
   				android:layout_width="wrap_content"
    		    android:layout_height="wrap_content"
    		    android:text="信息"
    		    style="@style/main_btn_style"
    		    android:drawableTop="@drawable/msg_icon"/>

   <RadioButton android:id="@+id/rd_more"
   				android:layout_width="wrap_content"
    		    android:layout_height="wrap_content"
    		    android:text="更多"
    		    style="@style/main_btn_style"
    		    android:drawableTop="@drawable/more_icon"/>

</RadioGroup>

</LinearLayout>
</TabHost>

RadioGroupTabHostActivity.java文件：

package com.focustech.radiogrouptabhost;

import android.app.TabActivity;

@SuppressWarnings("deprecation")
public class RadioGroupTabHostActivity extends TabActivity implements
		OnCheckedChangeListener, OnTouchListener {

	private static final String HOME_TAB = "home";
	private static final String MSG_TAB = "message";
	private static final String MORE_TAB = "more";

	private TextView homeContent;

	private int count = 0;
	private long firClick = 0L;

	private TabHost tabHost;
	private RadioGroup radioGroup;

	protected void onCreate(Bundle savedInstanceState) {

		super.onCreate(savedInstanceState);

		setContentView(R.layout.main);

		init();

	}

	public void init() {

		tabHost = this.getTabHost();

		// 由于在布局文件main中已经定义了TabHost、FrameLayout布局，这里不需要手动将布局文件添加到tabHost的FrameLayout下面
		// LayoutInflater.from(this).inflate(R.layout.main,
		// tabHost.getTabContentView(), true);

		TabSpec homeSpec = tabHost.newTabSpec(HOME_TAB).setIndicator(HOME_TAB)
				.setContent(R.id.home_content);
		TabSpec msgSpec = tabHost.newTabSpec(MSG_TAB).setIndicator(MSG_TAB)
				.setContent(R.id.message_content);
		TabSpec moreSpec = tabHost.newTabSpec(MORE_TAB).setIndicator(MORE_TAB)
				.setContent(R.id.more_content);

		// 添加面板
		tabHost.addTab(homeSpec);
		tabHost.addTab(msgSpec);
		tabHost.addTab(moreSpec);

		homeContent = (TextView) this.findViewById(R.id.home_content);
		homeContent.setOnTouchListener(this);

		radioGroup = (RadioGroup) this.findViewById(R.id.rg_main_btns);
		radioGroup.setOnCheckedChangeListener(this);
	}

	public void onCheckedChanged(RadioGroup group, int checkedId) {

		switch (checkedId) {
		case R.id.rd_home:
			tabHost.setCurrentTabByTag(HOME_TAB);
			break;
		case R.id.rd_msg:
			tabHost.setCurrentTabByTag(MSG_TAB);
			break;
		case R.id.rd_more:
			tabHost.setCurrentTabByTag(MORE_TAB);
			break;
		default:
			break;
		}

	}

	// 模拟双击事件
	public boolean onTouch(View v, MotionEvent event) {

		if (MotionEvent.ACTION_DOWN == event.getAction()) {
			// 这里的count、firClick都要定义成全局变量，secClick则没有必要
			count++;
			if (count == 1) {
				firClick = System.currentTimeMillis();

			} else if (count == 2) {
				Long secClick = System.currentTimeMillis();
				count = 0;
				// 设定当两次触摸时间间隔小于一秒时为双击事件
				if ((secClick - firClick) < 1000) {
					// 切换底部tab的显示与隐藏
					switch (radioGroup.getVisibility()) {
					case View.VISIBLE:
						radioGroup.setVisibility(View.GONE);
						break;
					default:
						radioGroup.setVisibility(View.VISIBLE);
						break;
					}

				}

			}
		}
		return false;
	}
}

好了，同事喊我吃午饭了，今天就到这里。