Android 自定義TabHost，TabWidget樣式

 

界面比較簡單，要想做得漂亮換幾張圖片就可以了。

第一步：先在布局（這里用了main.xml創建時自動生成的）里面放上TabHost ，只要將TabHost控件托至屏幕中就可：

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/taskdescribe_buildingmeter_tabhost"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white" >

    <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        
        <TabWidget 
            android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">  
        </TabWidget>
        <FrameLayout 
            android:id="@android:id/tabcontent"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1">
            <LinearLayout
                android:id="@+id/buildingmeter_layout_unitname" 
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:orientation="vertical"
                android:background="@color/white">
            </LinearLayout>
            <LinearLayout 
                android:id="@+id/buildingmeter_layout_installstatus" 
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:orientation="vertical"
                android:background="@color/white">
            </LinearLayout>
            <LinearLayout 
                android:id="@+id/buildingmeter_layout_storey" 
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:orientation="vertical"
                android:background="@color/white">
            </LinearLayout>
            
        </FrameLayout>
    </LinearLayout>
</TabHost>

 

第二步：創建顯示此TabWidget的布局tab項tabmini.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="40dip" 
    android:paddingLeft="5dip"
    android:paddingRight="5dip">

    <TextView
        android:id="@+id/tab_lable"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="TextView" />

</LinearLayout>

第三步：在Activity里實現TabHost：

private TabHost tabHost;
private TabWidget tabWidget;

LayoutInflater inflater = activity.getLayoutInflater();
        
View view1 = inflater.inflate(R.layout.tabhost_tag, null);
TextView txt1 = (TextView) view1.findViewById(R.id.tab_lable);
txt1.setText("按單元名");
        
View view2 = inflater.inflate(R.layout.tabhost_tag, null);
TextView txt2 = (TextView) view2.findViewById(R.id.tab_lable);
txt2.setText("按狀態");
        
View view3 = inflater.inflate(R.layout.tabhost_tag, null);
TextView txt3 = (TextView) view3.findViewById(R.id.tab_lable);
txt3.setText("按樓層");
        
//得到TabHost對象實例
tabHost =(TabHost) activity.findViewById(R.id.taskdescribe_buildingmeter_tabhost);
//調用 TabHost.setup()
tabHost.setup();
tabWidget = tabHost.getTabWidget();
//創建Tab標簽
tabHost.addTab(tabHost.newTabSpec("one").setIndicator(view1).setContent(R.id.buildingmeter_layout_unitname));
tabHost.addTab(tabHost.newTabSpec("two").setIndicator(view2).setContent(R.id.buildingmeter_layout_installstatus));
tabHost.addTab(tabHost.newTabSpec("three").setIndicator(view3).setContent(R.id.buildingmeter_layout_storey));
        
//設置第一次打開時默認顯示的標簽
tabHost.setCurrentTab(0);
//初始化Tab的顏色，和字體的顏色
updateTab(tabHost);
//選擇監聽器
tabHost.setOnTabChangedListener(new tabChangedListener());

　　/**
     * 更新Tab標簽的顏色，和字體的顏色
     * @param tabHost
     */
    private void updateTab(final TabHost tabHost) 
    {
        for (int i = 0; i < tabHost.getTabWidget().getChildCount(); i++) 
        {
            View view = tabHost.getTabWidget().getChildAt(i);
            TextView tv = (TextView) tabHost.getTabWidget().getChildAt(i).findViewById(R.id.tab_lable);
            tv.setTextSize(16);
            tv.setTypeface(Typeface.SERIF, 0); // 設置字體和風格
            if (tabHost.getCurrentTab() == i) 
            {
                //選中
                view.setBackground(getResources().getDrawable(R.drawable.tabhost_current));//選中后的背景
                tv.setTextColor(this.getResources().getColorStateList(android.R.color.white));
            } 
            else 
            {
                //不選中
                view.setBackground(getResources().getDrawable(R.drawable.tabhost_default));//非選擇的背景
                tv.setTextColor(this.getResources().getColorStateList(android.R.color.black));
            }
        }
    }
    
    /**
     * TabHost選擇監聽器
     * @author 
     *
     */
    private class tabChangedListener implements OnTabChangeListener {

          @Override
          public void onTabChanged(String tabId) 
          {
              tabHost.setCurrentTabByTag(tabId);
              updateTab(tabHost);
          }
    }