自定義TabHost，TabWidget樣式 .

大家好，今天我爲大家分享TabHost中怎樣修改TabWidget樣式。在很多界面美觀的應用中很多都用到了TabHost，但他們要比系統默認的要漂亮得多。先看幾張圖：

                             京東商城底部菜單欄

                            新浪微博底部菜單欄

   好了，看到這些漂亮的菜單欄是不是很驚訝，你可能會說用Button就可以實現啊 ，可是用Button的話控制顯示的內容很麻煩，不如用TabHost控制效率更高。很想知道用TabHost是怎麼實現的吧，下面就來研究如何實現這種漂亮的TabHost。先看一下效果圖：

 

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

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

<?xml version="1.0" encoding="utf-8"?>
    <TabHost android:id="@+id/tabhost"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      xmlns:android="http://schemas.android.com/apk/res/android">
        <LinearLayout android:layout_width="fill_parent"
          android:id="@+id/linearLayout1"
          android:layout_height="fill_parent"
          android:orientation="vertical">
            <TabWidget android:layout_width="fill_parent"
              android:layout_height="wrap_content"
              android:id="@android:id/tabs"></TabWidget>
            <FrameLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@android:id/tabcontent">
                <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@+id/tab1"></LinearLayout>
                <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@+id/tab2"></LinearLayout>
                <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@+id/tab3"></LinearLayout>
            </FrameLayout>
        </LinearLayout>
    </TabHost>

<?xml version="1.0" encoding="utf-8"?>
    <TabHost android:id="@+id/tabhost" 
      android:layout_width="fill_parent" 
      android:layout_height="fill_parent" 
      xmlns:android="http://schemas.android.com/apk/res/android">
        <LinearLayout android:layout_width="fill_parent" 
          android:id="@+id/linearLayout1" 
          android:layout_height="fill_parent" 
          android:orientation="vertical">
            <TabWidget android:layout_width="fill_parent" 
              android:layout_height="wrap_content" 
              android:id="@android:id/tabs"></TabWidget>
            <FrameLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@android:id/tabcontent">
                <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@+id/tab1"></LinearLayout>
                <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@+id/tab2"></LinearLayout>
                <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@+id/tab3"></LinearLayout>
            </FrameLayout>
        </LinearLayout>
    </TabHost>

這裏我們已經把LinearLayout和TextView去掉了，並將“xmlns:android="……" ”添加大TabHost裏了，這裏要注意我們將TabHost的id定義爲自己定義的id比不用android規定的id="@android:id/tabhost"。

第二步：創建顯示此TabWidget的佈局tabmini.xml：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="40dp"
    android:paddingLeft="5dip"
    android:paddingRight="5dip"
    android:background="@drawable/head_bg">

    <TextView android:id="@+id/tab_label"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:gravity="center"
        android:textColor="#000000"
        android:textStyle="bold"
        android:background="@drawable/tabmini"/>
</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="fill_parent"
    android:layout_height="40dp"
    android:paddingLeft="5dip"
    android:paddingRight="5dip"
    android:background="@drawable/head_bg">  
    
    <TextView android:id="@+id/tab_label"  
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:gravity="center"
        android:textColor="#000000"
        android:textStyle="bold"
        android:background="@drawable/tabmini"/> 
</RelativeLayout>

第三步：創建一個selector在drawable裏面 命名tabmini.xml，用來點擊TabHost的一個tab時TextView的變化：

<?xml version="1.0" encoding="utf-8"?>
<selector
  xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true"
        android:drawable="@drawable/add_managebg_down"/>
    <item android:state_selected="false"
        android:drawable="@drawable/add_managebg"/>
</selector>

<?xml version="1.0" encoding="utf-8"?>
<selector
  xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true"
        android:drawable="@drawable/add_managebg_down"/>
    <item android:state_selected="false"
        android:drawable="@drawable/add_managebg"/>
</selector>

第四步：在Activity裏實現TabHost：

package cn.li.tabstyle;

import android.app.Activity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.TabHost;
import android.widget.TextView;

public class TabHostStyleActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        View niTab = (View) LayoutInflater.from(this).inflate(R.layout.tabmini, null);
        TextView text0 = (TextView) niTab.findViewById(R.id.tab_label);
        text0.setText("ni");

        View woTab = (View) LayoutInflater.from(this).inflate(R.layout.tabmini, null);
        TextView text1 = (TextView) woTab.findViewById(R.id.tab_label);
        text1.setText("wo");

        View taTab = (View) LayoutInflater.from(this).inflate(R.layout.tabmini, null);
        TextView text2 = (TextView) taTab.findViewById(R.id.tab_label);
        text2.setText("ta");

        View weTab = (View) LayoutInflater.from(this).inflate(R.layout.tabmini, null);
        TextView text3 = (TextView) weTab.findViewById(R.id.tab_label);
        text3.setText("we");

        TabHost tabHost = (TabHost)findViewById(R.id.tabhost);
        tabHost.setup();   //Call setup() before adding tabs if loading TabHost using findViewById().

        tabHost.addTab(tabHost.newTabSpec("nitab").setIndicator(niTab).setContent(R.id.tab1));
        tabHost.addTab(tabHost.newTabSpec("wotab").setIndicator(woTab).setContent(R.id.tab2));
        tabHost.addTab(tabHost.newTabSpec("tatab").setIndicator(taTab).setContent(R.id.tab3));
        tabHost.addTab(tabHost.newTabSpec("wetab").setIndicator(weTab).setContent(R.id.tab4));
    }
}

package cn.li.tabstyle;

import android.app.Activity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.TabHost;
import android.widget.TextView;

public class TabHostStyleActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        View niTab = (View) LayoutInflater.from(this).inflate(R.layout.tabmini, null);
        TextView text0 = (TextView) niTab.findViewById(R.id.tab_label);
        text0.setText("ni");
        
        View woTab = (View) LayoutInflater.from(this).inflate(R.layout.tabmini, null);
        TextView text1 = (TextView) woTab.findViewById(R.id.tab_label);
        text1.setText("wo");
        
        View taTab = (View) LayoutInflater.from(this).inflate(R.layout.tabmini, null);
        TextView text2 = (TextView) taTab.findViewById(R.id.tab_label);
        text2.setText("ta");
        
        View weTab = (View) LayoutInflater.from(this).inflate(R.layout.tabmini, null);
        TextView text3 = (TextView) weTab.findViewById(R.id.tab_label);
        text3.setText("we");
        
        TabHost tabHost = (TabHost)findViewById(R.id.tabhost);
        tabHost.setup();   //Call setup() before adding tabs if loading TabHost using findViewById(). 
        
        tabHost.addTab(tabHost.newTabSpec("nitab").setIndicator(niTab).setContent(R.id.tab1));
        tabHost.addTab(tabHost.newTabSpec("wotab").setIndicator(woTab).setContent(R.id.tab2));
        tabHost.addTab(tabHost.newTabSpec("tatab").setIndicator(taTab).setContent(R.id.tab3));
        tabHost.addTab(tabHost.newTabSpec("wetab").setIndicator(weTab).setContent(R.id.tab4));
    }
}

這裏我們用findViewById創建了TabHost，這樣的話我們就需要在添加tab時調用TabHost的setup()方法；這裏我們添加內容時添加的是佈局，我們完全可以換成自己創建的Activity。

好了，讓我們來看看運行效果吧：

好了，我們自定義的TabHost算是結束了。不過看到Activity裏的代碼很多都是重複的我們可以這樣把他們簡化：

package cn.li.tabstyle;

import android.app.Activity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.TabHost;
import android.widget.TextView;

public class TabHostStyleActivity extends Activity {
    /** Called when the activity is first created. */
    String[] title = new String[]{"ni","wo","ta","we"};
    View userTab,articeTab,feedTab,weTab;
    View[] tabs = new View[]{userTab,articeTab,feedTab,weTab};
    int[] tabIds = new int[]{R.id.tab1,R.id.tab2,R.id.tab3,R.id.tab4};
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        TabHost tabHost = (TabHost)findViewById(R.id.tabhost);
        tabHost.setup();   //Call setup() before adding tabs if loading TabHost using findViewById().

        for(int i=0;i<tabs.length;i++){
            tabs[i] = (View) LayoutInflater.from(this).inflate(R.layout.tabmini, null);
            TextView text = (TextView) tabs[i].findViewById(R.id.tab_label);
            text.setText(title[i]);
            tabHost.addTab(tabHost.newTabSpec(title[i]).setIndicator(tabs[i]).setContent(tabIds[i]));
        }
    }
}

package cn.li.tabstyle;

import android.app.Activity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.TabHost;
import android.widget.TextView;

public class TabHostStyleActivity extends Activity {
    /** Called when the activity is first created. */
	String[] title = new String[]{"ni","wo","ta","we"};
	View userTab,articeTab,feedTab,weTab;
	View[] tabs = new View[]{userTab,articeTab,feedTab,weTab};
	int[] tabIds = new int[]{R.id.tab1,R.id.tab2,R.id.tab3,R.id.tab4};
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        TabHost tabHost = (TabHost)findViewById(R.id.tabhost);
        tabHost.setup();   //Call setup() before adding tabs if loading TabHost using findViewById(). 
        
        for(int i=0;i<tabs.length;i++){
        	tabs[i] = (View) LayoutInflater.from(this).inflate(R.layout.tabmini, null);
            TextView text = (TextView) tabs[i].findViewById(R.id.tab_label);
            text.setText(title[i]);            
            tabHost.addTab(tabHost.newTabSpec(title[i]).setIndicator(tabs[i]).setContent(tabIds[i]));
        }
    }
}