Android 自学之选项卡TabHost

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

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

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

使用TabHost的一般步骤:

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

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

  1. 继承TabActivity,从TabActivity中用getTabHost()方法获取TabHost。各个Tab中的内容在布局文件中定义就行了。
  2. 不继承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)