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>

图片文件如下：