Android 自学之选项卡TabHost

2021-08-25 18:35:04

选项卡(TabHost)是一种非常实用的组件，TabHost可以很方便地在窗口上放置多个标签页，每个标签页相当于获得了一个与外部容器相同大小的组建摆放区域。通过这种方式，就可以在一个容器中放置更多组件，例如许多手机系统会在同一个窗口第一多个标签页；来显示通话记录，包括“未接来电”，“已接来电”，“呼出电话”等。

TabHost仅仅是一个简单的容器，他提供了如下两个方法来创建选项卡、添加选项卡。

newTabSpec(String tag) : 创建选项卡
addTab(TabHost.TabSpec TabSpec) : 添加选项卡

使用TabHost的一般步骤：

在界面布局中定义TabHost组件，并为该组件定义该选项卡的内容。
Activity应继承TabActivity。
调用TabActivity的getTabHost()方法获取TabHost对象。
通过TabHost对象的方法创建选项卡、添加选项卡。

盛放Tab的容器就是TabHost。TabHost的实现有两种方式：

继承TabActivity，从TabActivity中用getTabHost()方法获取TabHost。各个Tab中的内容在布局文件中定义就行了。
不继承TabActivity，在布局文件中定义TabHost即可，但是TabWidget的id必须是@android:id/tabs，FrameLayout的id必须是@android:id/tabcontent。

案例：

第一种继承TabActivity

layout/main.xml

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <TabHost xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="fill_parent"
 4     android:layout_height="fill_parent"
 5     >
 6 <!-- 定义第一个标签页的内容 -->
 7 <LinearLayout android:id="@+id/tab01"
 8     android:orientation="vertical"
 9     android:layout_width="fill_parent"
10     android:layout_height="fill_parent"
11     >
12 <TextView 
13     android:layout_width="wrap_content"
14     android:layout_height="wrap_content"
15     android:text="女儿国国王 - 2014/6/16"
16     android:textSize="11pt"
17     />
18 <TextView 
19     android:layout_width="wrap_content"
20     android:layout_height="wrap_content"
21     android:text="东海龙女 - 2014/6/15"
22     android:textSize="11pt"
23     />
24 </LinearLayout>
25 <!-- 定义第二个标签页的内容 -->
26 <LinearLayout android:id="@+id/tab02"
27     android:orientation="vertical"
28     android:layout_width="fill_parent"
29     android:layout_height="fill_parent"
30     >
31 <TextView 
32     android:layout_width="wrap_content"
33     android:layout_height="wrap_content"
34     android:text="白骨精  - 2014/6/12"
35     android:textSize="11pt"
36     />
37 <TextView 
38     android:layout_width="wrap_content"
39     android:layout_height="wrap_content"
40     android:text="蜘蛛精 - 2014/5/16"
41     android:textSize="11pt"
42     />
43 </LinearLayout>
44 <!-- 定义第三个标签页的内容 -->
45 <LinearLayout android:id="@+id/tab03"
46     android:orientation="vertical"
47     android:layout_width="fill_parent"
48     android:layout_height="fill_parent"
49     android:textSize="11pt"
50     >
51 <TextView 
52     android:layout_width="wrap_content"
53     android:layout_height="wrap_content"
54     android:text="孙悟空 - 2014/6/16"
55     android:textSize="11pt"
56     />
57 <TextView 
58     android:layout_width="wrap_content"
59     android:layout_height="wrap_content"
60     android:text="猪八戒  - 2014/6/16"
61     android:textSize="11pt"
62     />    
63 </LinearLayout>        
64 </TabHost>

com.example.tabhost.TabHostActivity.java

 1 package com.example.tabhost;
 2 
 3 import android.support.v7.app.ActionBarActivity;
 4 import android.support.v7.app.ActionBar;
 5 import android.support.v4.app.Fragment;
 6 import android.app.TabActivity;
 7 import android.os.Bundle;
 8 import android.view.LayoutInflater;
 9 import android.view.Menu;
10 import android.view.MenuItem;
11 import android.view.View;
12 import android.view.ViewGroup;
13 import android.widget.TabHost;
14 import android.os.Build;
15 
16 public class TabHostActivity extends TabActivity {
17 
18     @Override
19     protected void onCreate(Bundle savedInstanceState) {
20         super.onCreate(savedInstanceState);
21         TabHost tabHost = getTabHost();
22         //设置使用TabHost布局
23         LayoutInflater.from(this).inflate(R.layout.main,tabHost.getTabContentView(), true);
24         //添加第一个标签页
25         tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator("已接电话").setContent(R.id.tab01)); 
26         
27         //在标签标题上放置图标
28         //tabHost.addTab(tabHost.newTabSpec("tab2").setIndicator("呼出电话", getResources().getDrawable(R.drawable.icon)).setContent(R.id.tab02)); 
29         //添加第二个标签页
30         tabHost.addTab(tabHost.newTabSpec("tab2").setIndicator("呼出电话").setContent(R.id.tab02)); 
31         //添加第三个标签页
32         tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("未接电话").setContent(R.id.tab03));         
33     }
34 
35 }

运行效果：

第二种不继承TabActivity [第二种是我在网上找到的，我自学的pdf上面没有介绍这种]

继承普通Activity，<TabWidget>标签id必须为tabs、<FrameLayout>标签id必须为tabcontent.这个方式在通过findViewById获得TabHost之后，必须要调用setup方法。

main.xml

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

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

        <!-- TabWidget的id属性必须为 @android:id/tabs -->

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal" />
        <!-- FrameLayout的id属性必须为 @android:id/tabcontent -->

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

            <!-- 定义第一个标签页的内容 -->

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

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="女儿国国王 - 2014/6/16"
                    android:textSize="11pt" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="东海龙女 - 2014/6/15"
                    android:textSize="11pt" />
            </LinearLayout>
            <!-- 定义第二个标签页的内容 -->

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

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="白骨精  - 2014/6/12"
                    android:textSize="11pt" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="蜘蛛精 - 2014/5/16"
                    android:textSize="11pt" />
            </LinearLayout>
            <!-- 定义第三个标签页的内容 -->

            <LinearLayout
                android:id="@+id/tab03"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:orientation="vertical"
                android:textSize="11pt" >

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="孙悟空 - 2014/6/16"
                    android:textSize="11pt" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="猪八戒  - 2014/6/16"
                    android:textSize="11pt" />
            </LinearLayout>
        </FrameLayout>
    </LinearLayout>

</TabHost>

com.example.tabhost.TabHostActivity.java

package com.example.tabhost;

import android.support.v4.app.Fragment;
import android.app.Activity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TabHost;
import android.os.Build;

public class TabHostActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        TabHost tabHost = (TabHost) findViewById(R.id.tabhost);
        // 如果没有继承TabActivity时，通过该种方法加载启动tabHost 
        tabHost.setup();
        //添加第一个标签页
        tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator("已接电话").setContent(R.id.tab01)); 
        
        //在标签标题上放置图标
        tabHost.addTab(tabHost.newTabSpec("tab2").setIndicator("呼出电话", getResources().getDrawable(R.drawable.icon)).setContent(R.id.tab02)); 
        //添加第二个标签页
//        tabHost.addTab(tabHost.newTabSpec("tab2").setIndicator("呼出电话").setContent(R.id.tab02)); 
        //添加第三个标签页
        tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("未接电话").setContent(R.id.tab03));         
    }

}

运行效果和上面的一样。

问题：在编写的过程里，我跟书上；甚至和网上的代码都一样，但是就是没弄出来那个标签标题上放置的图标；我也没搞清这是为什么？望会的朋友帮我解疑惑

Android 自学之选项卡TabHost,布布扣,bubuko.com

Android 自学之选项卡TabHost

码农公寓

相关文章