基于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;

    }

}