基于RadioGroup的TabHost实现[ 转]

转自: http://blog.csdn.net/mongdb/article/details/7056024

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;
    }
}