android 自定义tabhost的tabs 用gridview实现

android 自定义tabhost的tabs 

android tabhost 

2011.09.14（3）——— android 自定义tabhost的tabs 
参考： http://www.cnblogs.com/over140/archive/2011/03/02/1968042.html 

http://www.iteye.com/topic/1116261

我们直接用系统的tabhost时 如下图 
 

可以看见 两个tab中间有空隙 也许我们不需要这些空隙或者系统的样式 但是没有相关的xml属性来修改 所以我们可以自定义tabs 
效果如下图 可以看见 没有了中间的空隙 

 

我们用单选按钮来实现tabs 


1、看布局文件 

<?xml version="1.0" encoding="utf-8"?>
<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"
    android:background = "#d7d7d7">
    <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="wrap_content"
            android:layout_weight = "1">
        </FrameLayout>

        <TabWidget android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:visibility = "gone"/>
         <RadioGroup android:gravity="right"
                    android:layout_gravity="bottom"
                    android:orientation="horizontal"
                    android:id="@+id/main_radio"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content">

            <RadioButton
                android:id="@+id/radio_contact"
                android:layout_marginTop="2.0dip"
                android:background = "@drawable/tabcontact"
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:button= "@null"
                />
            <RadioButton android:checked="true"
                android:id="@+id/radio_session"
                android:layout_marginTop="2.0dip"
                android:background = "@drawable/tabsession"
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:button= "@null"/>
            <RadioButton
                android:id="@+id/radio_setting"
                android:layout_marginTop="2.0dip"
                android:background = "@drawable/tabsetting"
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:button= "@null"
                />
        </RadioGroup>
    </LinearLayout>
</TabHost>

关键 在于 TabWidget里面 

android:visibility = "gone"

2、代码 

主要是三个方法： 

初始化Tabhost 

private void initTabHost() {
        mTabHost = getTabHost();
        mTabHost.addTab(mTabHost.newTabSpec("tab session").setIndicator(
                "").setContent(new Intent(this,SessionListActivity.class)));
        mTabHost.addTab(mTabHost.newTabSpec("tab contact").setIndicator(
                "").setContent(new Intent(this,ContactListActivity.class)));
        mTabHost.addTab(mTabHost.newTabSpec("tab setting").setIndicator(
                "").setContent(new Intent(this,UserSettingActivitiy.class)));

        mTabHost.setCurrentTabByTag(_contactListTag);
        mTabHost.setCurrentTabByTag(_settingTag);
        mTabHost.setCurrentTabByTag(_sessionListTag);

    }

初始化RadioButton 

private void initTabWidget() {
         ((RadioButton) findViewById(R.id.radio_session)).setOnCheckedChangeListener(this);
         ((RadioButton) findViewById(R.id.radio_contact)).setOnCheckedChangeListener(this);
         ((RadioButton) findViewById(R.id.radio_setting)).setOnCheckedChangeListener(this);
    }

设置切换事件
  

@Override
   public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
       if (isChecked) {
           switch (buttonView.getId()) {
           case R.id.radio_contact:
               this.mTabHost.setCurrentTabByTag(_contactListTag);
               break;
           case R.id.radio_session:
               this.mTabHost.setCurrentTabByTag(_sessionListTag);
               break;
           case R.id.radio_setting:
            this.mTabHost.setCurrentTabByTag(_settingTag);
               break;
           }
       }
   }

1.　　由于TabWidget被隐藏，所以相关的事件也会无效，这里取巧用RadioGroup与RadioButton的特性来处理切换，然后监听事件调用setCurrentTabByTag来切换Activity。 
2.　　注意即使TabWidget被隐藏，也要为其设置indicator，否则会保持。