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);
          }
    }