Android TabHost 實現Tab切換

標籤：不容易   abs   對象   com   width   布局檔案   zid   class   gpo   

TabHost是整個Tab的容器，包含TabWidget和FrameLayout兩個部分，TabWidget是每個Tab的表情(表徵圖效果)，FrameLayout是Tab內容

實現方式有兩種：

1、繼承TabActivity

2、繼承Activity類

 

方法一：繼承TabActivity

從TabActivity中用getTabHost()方法擷取TabHost，然後設定標籤內容

布局：

1、TabHost　　　　必須設定android:id為@android:id/tabhost
2、TabWidget　　　必須設定android:id為@android:id/tabs
3、FrameLayout　  必須設定android:id為@android:id/tabcontent

這幾個都是系統內建id，最好是快速鍵聯想產生，不要手寫，這樣不容易出錯

 

XML布局檔案：

 1 <TabHost xmlns:android="http://schemas.android.com/apk/res/android" 2     android:layout_width="match_parent" 3     android:layout_height="match_parent" 4     android:id="@android:id/tabhost" 5     > 6  7     <LinearLayout 8         android:layout_width="match_parent" 9         android:layout_height="match_parent"10         android:orientation="vertical"11         >12 13 14 15         <FrameLayout16             android:layout_width="match_parent"17             android:layout_height="0dp"18             android:layout_weight="1"19             android:id="@android:id/tabcontent"20             >21             <LinearLayout22                 android:layout_width="match_parent"23                 android:layout_height="match_parent"24                 android:id="@+id/widget_layout_red"25                 android:background="#ff0000"26                 android:orientation="vertical"27                 ></LinearLayout>28 29             <LinearLayout30                 android:layout_width="match_parent"31                 android:layout_height="match_parent"32                 android:id="@+id/widget_layout_yellow"33                 android:background="#FCD209"34                 android:orientation="vertical"35                 ></LinearLayout>36 37         </FrameLayout>38         <TabWidget39             android:layout_width="match_parent"40             android:layout_height="wrap_content"41             android:id="@android:id/tabs"42             android:background="@mipmap/ic_launcher"43             >44 45         </TabWidget>46     </LinearLayout>47 </TabHost>

 

 

Java代碼實現：

 1 public class MainActivity extends TabActivity { 2     private TabHost tabhost; 3     @Override 4     protected void onCreate(Bundle savedInstanceState) { 5         super.onCreate(savedInstanceState); 6         setContentView(R.layout.activity_main); 7  8         //從TabActivity上面擷取放置Tab的TabHost 9         tabhost = getTabHost();10 11         tabhost.addTab(tabhost12                 //建立新標籤one13                 .newTabSpec("one")14                 //設定標籤標題15                 .setIndicator("紅色")16                 //設定該標籤的布局內容17                 .setContent(R.id.widget_layout_red));18         tabhost.addTab(tabhost.newTabSpec("two").setIndicator("黃色").setContent(R.id.widget_layout_yellow));19     }20 }

 

 

實現效果如下：

 

 

方法二：繼承Activity類

布局：

1、TabHost　　　　可自訂id
2、TabWidget　　　必須設定android:id為@android:id/tabs
3、FrameLayout　  必須設定android:id為@android:id/tabcontent

 

XML布局：

 

<TabHost xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:id="@+id/zidingyi"    >    <LinearLayout        android:layout_width="match_parent"        android:layout_height="match_parent"        android:orientation="vertical"        >        <FrameLayout            android:layout_width="match_parent"            android:layout_height="0dp"            android:layout_weight="1"            android:id="@android:id/tabcontent"            >            <LinearLayout                android:layout_width="match_parent"                android:layout_height="match_parent"                android:id="@+id/widget_layout_red"                android:background="#ff0000"                android:orientation="vertical"                ></LinearLayout>            <LinearLayout                android:layout_width="match_parent"                android:layout_height="match_parent"                android:id="@+id/widget_layout_yellow"                android:background="#FCD209"                android:orientation="vertical"                ></LinearLayout>        </FrameLayout>        <TabWidget            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:id="@android:id/tabs"            android:background="@mipmap/ic_launcher"            >        </TabWidget>    </LinearLayout></TabHost>

 

 

 

 

java代碼實現：

public class MainActivity extends Activity {    private TabHost tabhost;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        //得到TabHost對象執行個體        tabhost =(TabHost) findViewById(R.id.ho);        //調用 TabHost.setup()        tabhost.setup();        //建立Tab標籤        tabhost.addTab(tabhost.newTabSpec("one").setIndicator("紅色").setContent(R.id.widget_layout_red));        tabhost.addTab(tabhost.newTabSpec("two").setIndicator("黃色").setContent(R.id.widget_layout_yellow));    }}

 

Android TabHost 實現Tab切換