Android编程之TabWidget选项卡用法实例分析

本文实例讲述了Android编程之TabWidget选项卡用法。分享给大家供大家参考，具体如下：
1 概览
TabWidget与TabHost。tab组件一般包括TabHost和TabWidget、FrameLayout，且TabWidget、FrameLayout属于TabHost。
是否继承TabActivity的问题
实现步骤。两种实现方式，一种是将每个Tab的布局嵌在TabHost中的FrameLayout中，每个Tab的内容布局与显示都在FrameLayout中进行，缺点是布局会显得很臃肿；一种是每个Tab从FrameLayout中独立出来，以Activity呈现，这样使得每个Tab有单独的布局。
2 效果图

Widget在顶部的情形：

3 主要布局
3.1 TabMain布局
方式一：

<?xml version="1.0" encoding="utf-8"?><TabHost xmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/tabhost"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical" ><RelativeLayoutandroid:layout_width="fill_parent"android:layout_height="fill_parent"android:orientation="vertical" ><TabWidgetandroid:id="@android:id/tabs"android:layout_width="fill_parent"android:layout_height="60dip"android:layout_alignParentBottom="true"android:background="#424242" ></TabWidget><FrameLayoutandroid:id="@android:id/tabcontent"android:layout_width="fill_parent"android:layout_height="fill_parent" ><LinearLayoutandroid:id="@+id/theme"android:layout_width="fill_parent"android:layout_height="fill_parent"android:orientation="vertical" ><TextViewandroid:id="@+id/theme_title"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Tab1" /></LinearLayout><LinearLayoutandroid:id="@+id/wallpaper"android:layout_width="fill_parent"android:layout_height="fill_parent"android:orientation="vertical" ><TextViewandroid:id="@+id/wallpaper_title"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Tab2" /></LinearLayout><LinearLayoutandroid:id="@+id/iconbg"android:layout_width="fill_parent"android:layout_height="fill_parent"android:orientation="vertical" ><TextViewandroid:id="@+id/iconbg_title"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Tab3" /></LinearLayout><LinearLayoutandroid:id="@+id/screenlock"android:layout_width="fill_parent"android:layout_height="fill_parent"android:orientation="vertical" ><TextViewandroid:id="@+id/screenlock_title"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Tab4" /></LinearLayout><LinearLayoutandroid:id="@+id/effect"android:layout_width="fill_parent"android:layout_height="fill_parent"android:orientation="vertical" ><TextViewandroid:id="@+id/effect_title"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Tab5" /></LinearLayout></FrameLayout></RelativeLayout></TabHost>

方式二：

<?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="@color/wcity_normal_bg" ><LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" ><FrameLayout android:id="@android:id/tabcontent" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1" ></FrameLayout><TabWidget android:id="@android:id/tabs" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="@drawable/tab" /> </LinearLayout></TabHost>

3.2 TabItem布局
这一部分中方式一与方式二没有什么区别，只有表示形式的区别。比如，根据需求，Tab可以
只以文字呈现，
可以只以图片呈现，
可以同时有图片和文字
其中有文字和图片的布局如下：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="fill_parent"android:layout_height="fill_parent"android:gravity="center_horizontal|center_vertical"android:orientation="vertical" ><LinearLayoutandroid:id="@+id/tabItemandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:background="@drawable/bg_ispressed"android:gravity="center_horizontal|center_vertical"android:orientation="vertical" ><ImageViewandroid:id="@+id/icon"android:layout_width="wrap_content"android:layout_height="wrap_content" /><TextViewandroid:id="@+id/name"android:layout_width="wrap_content"android:layout_height="wrap_content" /></LinearLayout></LinearLayout>

3.3点击状态
Tab键点击后状态的问题，如果点击后，没有状态提示对用户是不友好的。点击状态的实现就是对TabItem布局的android:background进行设置。例如：
上述TabItem中LinearLayout的android：background设置的属性：@drawable/bg_ispressed
其中bg_ispressed文件如下：

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/tab_selected_bg" android:state_pressed="false" android:state_selected="true"/> </selector>

tab_selected_bg即是点击后变换的图片效果。
3.4 关于Tab位置的问题
Tab标签显示在顶部还是底部也是经常会遇到的问题。
通常TabMain布局中TabWidget在FrameLayout上面默认就是显示在顶部了，如果改成在底部显示，首先会想到的是直接调换顺序，将TabWidget放在FrameLayout后面。
情形一：
问题来了，Tab栏直接消失掉（我试过），后来解决方法是：FrameLayout中添加属性：android:layout_weight="1"。这种情形可以解决的条件是，TabWidget和FrameLayout被嵌套在LinearLayout布局中，如果是其他则行不通。
情形二：
TabWidget与FrameLayout顺序任意，在TabWidget中添加属性
复制代码代码如下:android:layout_alignParentBottom="true"
当然，这种情形适合TabWidget和FrameLayout被嵌套在RelativeLayout布局中，同样的，如果是其他则行不通。
注：以上两种情形也不是绝对的，只实践过以上两种情形，至于其他布局就不清楚了，具体问题具体分析吧。
4 继承TabActivity?
4.1 继承TabActivity与不继承的问题
继承不继承TabActivity，看自己习惯了，都能正确实现，没什么区别，至于在代码方面唯一的区别在于：
不继承TabActivity而继承Activity的需要在代码中加入：
复制代码代码如下:mTabHost.setup（）;
4.2 主要代码
直接继承自Activity的代码

import java.util.ArrayList;import java.util.List;import android.app.Activity;import android.content.Context;import android.os.Bundle;import android.view.LayoutInflater;import android.view.View;import android.widget.ImageView;import android.widget.LinearLayout;import android.widget.TabHost;import android.widget.TextView;public class TabDesignActivity extends Activity{private Context mContex = this;private TabHost mTabHost;private String TAB1 = "tab1";private String TAB2 = "tab2";private String TAB3 = "tab3";private String TAB4 = "tab4";private String TAB5 = "tab5";private List<LinearLayout> menuItemList;@Overrideprotected void onCreate（Bundle savedInstanceState） {// TODO Auto-generated method stubsuper.onCreate（savedInstanceState）;setContentView（R.layout.tab_main）;menuItemList = new ArrayList<LinearLayout>（）;mTabHost = （TabHost） findViewById（R.id.tabhost）;mTabHost.setup（）;mTabHost.addTab（mTabHost.newTabSpec（"tab1"）.setIndicator（getMenuItem（R.drawable.tab1_ispressed, TAB1））.setContent（R.id.tab1））;mTabHost.addTab（mTabHost.newTabSpec（"tab2"）.setIndicator（getMenuItem（R.drawable.tab2_ispressed, TAB2））.setContent（R.id.tab2））;mTabHost.addTab（mTabHost.newTabSpec（"tab3"）.setIndicator（getMenuItem（R.drawable.tab3_ispressed, TAB3））.setContent（R.id.tab3））;mTabHost.addTab（mTabHost.newTabSpec（"tab4"）.setIndicator（getMenuItem（R.drawable.tab4_ispressed, TAB4））.setContent（R.id.tab4））;mTabHost.addTab（mTabHost.newTabSpec（"tab5"）.setIndicator（getMenuItem（R.drawable.tab5_ispressed, TAB5））.setContent（R.id.tab5））;}public View getMenuItem（int imgID, String textID）{LinearLayout ll = （LinearLayout）LayoutInflater.from（mContex）.inflate（R.layout.tab_item, null）;ImageView imgView = （ImageView）ll.findViewById（R.id.icon）;imgView.setBackgroundResource（imgID）;TextView textView = （TextView）ll.findViewById（R.id.name）;textView.setText（textID）;menuItemList.add（ll）;return ll;}}

继承自TabActivity的实现

/** * @author aaron */package com.aaron.activity;import java.util.ArrayList;import java.util.List;import android.annotation.SuppressLint;import android.app.TabActivity;import android.content.Context;import android.content.Intent;import android.os.Bundle;import android.view.LayoutInflater;import android.widget.ImageView;import android.widget.LinearLayout;import android.widget.TabHost;import android.widget.TextView;import android.widget.TabHost.TabSpec;import com.aaron.util.R;/** * @author aaron **/public class TabWidget extends TabActivity {// 声明TabHost对象private TabHost mTabhost;private LayoutInflater mInflater;private List<TextView> mtext;private List<ImageView> mimage;private List<TabSpec> mTabSpec;private List<LinearLayout> linearLayout;private List<Intent> intent;private Context mContext;private static final String[] tabTitle = { "Tab1", "Tab2", "Tab3", "Tab4","Tab5"};private static final int[] tabImage = { R.drawable.main1, R.drawable.main2, R.drawable.main3, R.drawable.main4,R.drawable.main5};/** Called when the activity is first created. */@Overridepublic void onCreate（Bundle savedInstanceState） {super.onCreate（savedInstanceState）;setContentView（R.layout.tab_main）;mContext = this;mInflater = LayoutInflater.from（this）;mTabhost = （TabHost） findViewById（android.R.id.tabhost）;mTabSpec = new ArrayList<TabSpec>（）;linearLayout = new ArrayList<LinearLayout>（）;mtext = new ArrayList<TextView>（）;intent = new ArrayList<Intent>（）;//****************************************************************//若是引用有图片的布局mimage = new ArrayList<ImageView>（）;//****************************************************************creatTab（）;}@SuppressLint（"NewApi"）public void creatTab（） {for （int i = 0; i < tabTitle.length; i++） {mTabSpec.add（mTabhost.newTabSpec（tabTitle[i]））;//****************************************************************//选择使用哪种布局//****************************************************************linearLayout.add（（LinearLayout） mInflater.inflate（R.layout.tabwidget2, null））; mtext.add（（TextView） linearLayout.get（i）.findViewById（R.id.tab_Text_name））;mtext.get（i）.setText（tabTitle[i]）;//****************************************************************//若是引用有图片的布局依次添加进图片mimage.add（（ImageView） linearLayout.get（i）.findViewById（R.id.tab_Image_name））;mimage.get（i）.setImageResource（tabImage[i]）;//****************************************************************// 依次加入每个Tab的Activityswitch （i） {case 0:intent.add（new Intent（）.setClass（TabWidget.this, UdoActivity.class））;break;case 1:intent.add（new Intent（）.setClass（TabWidget.this, UdoActivity.class））;break;case 2:intent.add（new Intent（）.setClass（TabWidget.this, UdoActivity.class））;break;case 3:intent.add（new Intent（）.setClass（TabWidget.this, UdoActivity.class））;break;case 4:intent.add（new Intent（）.setClass（TabWidget.this, UdoActivity.class））;break;}mTabSpec.get（i）.setIndicator（linearLayout.get（i））;mTabSpec.get（i）.setContent（intent.get（i））;mTabhost.addTab（mTabSpec.get（i））;}}

4.3 关键代码详解
1）mTabHost.newTabSpec（"tab1"）用来new一个tab，同时标记这个tab的tag。
2）setContent（）用来处理点击这个tab后的动作，可以是这个Activity下的一个组件，如setContent（R.id.tab1），也可以是一个intent，比如：setContent（newIntent（this, SubTab.class））。
3）setIndicator（）用来标记这个tab的名字，可以是setIndicator（"tab1"），也可以包含其他的属性，如图片：setIndicator（ "名称",getResources（）.getDrawable（android.R.tab1））。
4）tabs.addTab（spec）将这个tab添加进TabHost。
5）getMenuItem（R.drawable.tab_ispressed,TAB1）设置其中一Tab被按下的状态改变，R.drawable.tab_ispressed布局如下：

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:drawable="@drawable/tab1_menu_effect_selected" android:state_pressed="false" android:state_selected="true"/><item android:drawable="@drawable/tab1_menu_effect"/></selector>

希望本文所述对大家Android程序设计有所帮助。