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

概述本文实例讲述了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" >  <relativeLayout    androID:layout_wIDth="fill_parent"    androID:layout_height="fill_parent"    androID:orIEntation="vertical" >    <TabWidget      androID:ID="@androID:ID/tabs"      androID:layout_wIDth="fill_parent"      androID:layout_height="60dip"      androID:layout_alignParentBottom="true"      androID:background="#424242" >    </TabWidget>    <FrameLayout      androID:ID="@androID:ID/tabcontent"      androID:layout_wIDth="fill_parent"      androID:layout_height="fill_parent" >      <linearLayout        androID:ID="@+ID/theme"        androID:layout_wIDth="fill_parent"        androID:layout_height="fill_parent"        androID:orIEntation="vertical" >        <TextVIEw          androID:ID="@+ID/theme_Title"          androID:layout_wIDth="wrap_content"          androID:layout_height="wrap_content"          androID:text="Tab1" />      </linearLayout>      <linearLayout        androID:ID="@+ID/wallpaper"        androID:layout_wIDth="fill_parent"        androID:layout_height="fill_parent"        androID:orIEntation="vertical" >        <TextVIEw          androID:ID="@+ID/wallpaper_Title"          androID:layout_wIDth="wrap_content"          androID:layout_height="wrap_content"          androID:text="Tab2" />      </linearLayout>      <linearLayout        androID:ID="@+ID/iconbg"        androID:layout_wIDth="fill_parent"        androID:layout_height="fill_parent"        androID:orIEntation="vertical" >        <TextVIEw          androID:ID="@+ID/iconbg_Title"          androID:layout_wIDth="wrap_content"          androID:layout_height="wrap_content"          androID:text="Tab3" />      </linearLayout>      <linearLayout        androID:ID="@+ID/screenlock"        androID:layout_wIDth="fill_parent"        androID:layout_height="fill_parent"        androID:orIEntation="vertical" >        <TextVIEw          androID:ID="@+ID/screenlock_Title"          androID:layout_wIDth="wrap_content"          androID:layout_height="wrap_content"          androID:text="Tab4" />      </linearLayout>      <linearLayout        androID:ID="@+ID/effect"        androID:layout_wIDth="fill_parent"        androID:layout_height="fill_parent"        androID:orIEntation="vertical" >        <TextVIEw          androID: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" >  <linearLayout    androID:ID="@+ID/tabItem    androID:layout_wIDth="wrap_content"    androID:layout_height="wrap_content"    androID:background="@drawable/bg_ispressed"    androID:gravity="center_horizontal|center_vertical"    androID:orIEntation="vertical" >    <ImageVIEw      androID:ID="@+ID/icon"      androID:layout_wIDth="wrap_content"      androID:layout_height="wrap_content" />    <TextVIEw      androID: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;  @OverrIDe  protected voID onCreate(Bundle savedInstanceState) {    // Todo auto-generated method stub    super.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. */  @OverrIDe  public 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的Activity      switch (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程序设计有所帮助。

总结

以上是内存溢出为你收集整理的Android编程之TabWidget选项卡用法实例分析全部内容，希望文章能够帮你解决Android编程之TabWidget选项卡用法实例分析所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。