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>

最终运行效果：