12.Android之Tabhost组件学习

TabHost是整个Tab的容器，TabHost的实现有两种方式：

第一种继承TabActivity，从TabActivity中用getTabHost()方法获取TabHost。各个Tab中的内容在布局文件中定义就行了。

第二种方式，不继承TabActivity，在布局文件中定义TabHost即可，但是TabWidget的id必须是@android:id/tabs，FrameLayout的id必须是@android:id/tabcontent。

1)继承TabActivity

如果加载该TabHost画面的类继承TabActivity，并且想通过getTabHost()方法来获取TabHost，getTabWidget()方法获取TabWidget，那么TabHost、TabWidget 、FrameLayout 三者的ID必须是android.R.id.tabhost、android.R.id.tabs、android.R.id.tabcontent, 否则会报运行时异常, 比如提示Your content must have a TabHost whose id attribute is 'android.R.id.tabhost'之类错误

修改主布局activity_main文件：

 <?xml version="1.0" encoding="utf-8"?>
 <TabHost
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:id="@android:id/tabhost"
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"
     android:background="@drawable/back">

     <LinearLayout
         android:orientation="vertical"
         android:layout_width="fill_parent"
         android:layout_height="fill_parent">

         <TabWidget
             android:id="@android:id/tabs"
             android:layout_alignParentBottom="true"
             android:layout_width="fill_parent"
             android:layout_height="wrap_content"/>
         <FrameLayout
             android:id="@android:id/tabcontent"
             android:layout_weight="1"
             android:layout_width="fill_parent"
             android:layout_height="fill_parent" />

     </LinearLayout>

 </TabHost>  

再增加自己定义的子TabHost页面布局文件tabhost1如下：

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

     <LinearLayout
         android:id="@+id/tab01"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:orientation="vertical">

         <TextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text="小明"/>

         <TextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text="小东"/>

     </LinearLayout>

     <LinearLayout
         android:id="@+id/tab02"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:orientation="vertical">

         <TextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text="小红"/>

         <TextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text="小紫"/>

     </LinearLayout>

     <LinearLayout
         android:id="@+id/tab03"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:orientation="vertical">

         <TextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text="小李"/>

         <TextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text="小北"/>

     </LinearLayout>

 </TabHost>

最后修改下MainActivity.java代码：

 package com.example.administrator.dialog1;

 import android.os.Bundle;
 import android.app.TabActivity;
 import android.view.LayoutInflater;
 import android.widget.TabHost;

 public class MainActivity extends TabActivity {

     TabHost mtabHost = null;
     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_main);

         //调用TabActivity的getTabHost()方法获取TabHost对象
         mtabHost = this.getTabHost();

         //设置使用TabHost布局
         LayoutInflater.from(this).inflate(R.layout.tabhost1, mtabHost.getTabContentView(),true);

         //添加第一个标签页
         mtabHost.addTab(mtabHost.newTabSpec("tab01").setIndicator("已接电话").setContent(R.id.tab01));

         //添加第二个标签页,并在其标签上添加一个图片
         mtabHost.addTab(mtabHost.newTabSpec("tab02").setIndicator("未接电话",getResources().getDrawable(R.mipmap.ic_launcher)).setContent(R.id.tab02));

         //添加第三个标签页
         mtabHost.addTab(mtabHost.newTabSpec("tab03").setIndicator("已拨电话").setContent(R.id.tab03));

     }

 }

运行效果：

2) 不继承TabActivity

修改MainActivity.java代码：

 package com.example.administrator.dialog1;

 import android.app.Activity;
 import android.os.Bundle;
 import android.widget.TabHost;
 import android.widget.TabWidget;

 public class MainActivity extends Activity {

     TabHost mtabHost = null;
     TabWidget tabWidget = null;
     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.tabhost1);

         //以下三句代码，注意顺序
         mtabHost = (TabHost)findViewById(R.id.mytabhost);
         mtabHost.setup();
         tabWidget = mtabHost.getTabWidget();

         //添加第一个标签页
         mtabHost.addTab(mtabHost.newTabSpec("tab01").setIndicator("已接电话").setContent(R.id.tab01));

         //添加第二个标签页,并在其标签上添加一个图片
         mtabHost.addTab(mtabHost.newTabSpec("tab02").setIndicator("未接电话",getResources().getDrawable(R.mipmap.ic_launcher)).setContent(R.id.tab02));

         //添加第三个标签页
         mtabHost.addTab(mtabHost.newTabSpec("tab03").setIndicator("已拨电话").setContent(R.id.tab03));

         mtabHost.setCurrentTab(0);
     }

 }

再修改下tabhost1布局文件：

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

     <TabWidget
         android:id="@android:id/tabs"
         android:layout_width="fill_parent"
         android:layout_height="wrap_content"/>

     <FrameLayout
         android:id="@android:id/tabcontent"
         android:layout_weight="1"
         android:layout_width="fill_parent"
         android:layout_height="fill_parent" >

         <LinearLayout
             android:id="@+id/tab01"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:orientation="vertical">

             <TextView
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:layout_marginTop="60dp"
                 android:text="小明"/>

             <TextView
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:layout_marginBottom="60dp"
                 android:text="小东"/>

         </LinearLayout>

         <LinearLayout
             android:id="@+id/tab02"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:orientation="vertical">

             <TextView
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:gravity="center"
                 android:layout_marginTop="60dp"
                 android:text="小红"/>

             <TextView
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:gravity="center"
                 android:layout_marginBottom="60dp"
                 android:text="小紫"/>

         </LinearLayout>

         <LinearLayout
             android:id="@+id/tab03"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:orientation="vertical">

             <TextView
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:gravity="right"
                 android:layout_marginTop="60dp"
                 android:text="小李"/>

             <TextView
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:gravity="right"
                 android:layout_marginBottom="60dp"
                 android:text="小北"/>

         </LinearLayout>

     </FrameLayout>

 </TabHost>

最终运行效果：