首页 > 代码库 > Android 自学之选项卡TabHost

Android 自学之选项卡TabHost

2024-07-08 10:52:49   221人阅读

选项卡(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     @Override19     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));             }}

运行效果和上面的一样。

 

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


联系
我们