android 2.2 系統中自定義title 3.0的效果

  在android中使用tab時候有很多的辦法，activityGroup ,RadioGraoup,....在使用系統自帶的tab的時候越到一個問題，就是tab頁的大小不能控制，經過一番研究發現其實很簡單，主要是定義他自己的tab頁的布局，具體的實現如下：

效果圖：

 

TestTab.java >>>>>>>>>>>
/** 
 * 自定義tab的使用
 * TODO 簡要說明該類所實現的功能
 * @author pengqinping
 *
 */
public class TestTab extends TabActivity implements TabContentFactory,OnTabChangeListener
{
    TabHost mTabHost;
    
    TabSpec tabSpec1,tabSpec2;
    
    TextView tv;
    
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        
        //由於是繼承了TabActivity類。所以可以直接獲取tabHost
        mTabHost = getTabHost();
        
        //加載主布局
        getLayoutInflater().inflate(R.layout.activity_tab_test,
                mTabHost.getTabContentView(),
                true);
       
        tv = (TextView) findViewById(R.id.tv_tab);
        
        //第一個 tab 的布局文件
        LinearLayout linearLayout = (LinearLayout)getLayoutInflater().inflate(R.layout.tab_custom, null);
        ((TextView)linearLayout.findViewById(R.id.tv_content)).setText("tab1列表");
        tabSpec1 = mTabHost.newTabSpec("Tab1").setIndicator(linearLayout).setContent(this);
        
        //第二個 tab 的布局文件
        LinearLayout linearLayout1 = (LinearLayout)getLayoutInflater().inflate(R.layout.tab_custom, null);
        ((TextView)linearLayout1.findViewById(R.id.tv_content)).setText("tab2列表");
        tabSpec2 = mTabHost.newTabSpec("Tab2").setIndicator(linearLayout1).setContent(this);
        
        mTabHost.addTab(tabSpec1);
        mTabHost.addTab(tabSpec2);
        
        mTabHost.setOnTabChangedListener(this);
    }

    @Override
    public View createTabContent(String tag)
    {
        if(tag.equals("Tab1")){
            tv.setText("tab1_content_msg");
            return tv;
        }else if(tag.equals("Tab2")){
            tv.setText("tab2_content_msg");
            return tv;
        }
        return null;
    }

    @Override
    public void onTabChanged(String tabId)
    {
        if(tabId.equals("Tab1")){
            tv.setText("tab1_content_msg");
            
        }else if(tabId.equals("Tab2")){
            tv.setText("tab2_content_msg");
        }
    }
   

 

然后是這個activity的布局文件，注意FrameLayout的使用，

 要是沒有使用的話是沒有自定義的效果的,

activity_tab_test.xml文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <TextView
            android:id="@+id/tv_tab"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="tab" />
    </FrameLayout>

</LinearLayout>

自定義的title布局：tab_custom.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="50dip"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/tv_content"
        android:layout_width="fill_parent"
        android:layout_height="30dip"
        android:gravity="center_vertical|center_horizontal"
        android:background="@drawable/tab_select"/>

    <ImageView
        android:id="@+id/image_view"
        android:layout_width="fill_parent"
        android:layout_height="8dip"
        android:background="@drawable/overscroll_edge"
        android:scaleType="fitXY" />

</LinearLayout>

背景選擇器的文件，

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/list_selector_background_pressed" android:state_selected="true"/>
    <item android:drawable="@drawable/list_selector_background_disabled" android:state_selected="false"/>

</selector>

圖片文件如下：