Android tab widget,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布局

方式一：

android:id="@+id/tabhost"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical" >

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:orientation="vertical" >

android:id="@android:id/tabs"

android:layout_width="fill_parent"

android:layout_height="60dip"

android:layout_alignParentBottom="true"

android:background="#424242" >

android:id="@android:id/tabcontent"

android:layout_width="fill_parent"

android:layout_height="fill_parent" >

android:id="@+id/theme"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:orientation="vertical" >

android:id="@+id/theme_title"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Tab1" />

android:id="@+id/wallpaper"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:orientation="vertical" >

android:id="@+id/wallpaper_title"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Tab2" />

android:id="@+id/iconbg"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:orientation="vertical" >

android:id="@+id/iconbg_title"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Tab3" />

android:id="@+id/screenlock"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:orientation="vertical" >

android:id="@+id/screenlock_title"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Tab4" />

android:id="@+id/effect"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:orientation="vertical" >

android:id="@+id/effect_title"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Tab5" />

方式二：

android:id="@android:id/tabhost"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:background="@color/wcity_normal_bg" >

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:orientation="vertical" >

android:id="@android:id/tabcontent"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:layout_weight="1" >

android:id="@android:id/tabs"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:background="@drawable/tab"

/>

3.2 TabItem布局

这一部分中方式一与方式二没有什么区别，只有表示形式的区别。比如，根据需求，Tab可以

只以文字呈现，

可以只以图片呈现，

可以同时有图片和文字

其中有文字和图片的布局如下：

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:gravity="center_horizontal|center_vertical"

android:orientation="vertical" >

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" >

android:id="@+id/icon"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

android:id="@+id/name"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

3.3点击状态

Tab键点击后状态的问题，如果点击后，没有状态提示对用户是不友好的。点击状态的实现就是对TabItem布局的android:background进行设置。例如：

上述TabItem中LinearLayout的android：background设置的属性：@drawable/bg_ispressed

其中bg_ispressed文件如下：

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 menuItemList;

@Override

protected void onCreate(Bundle savedInstanceState) {

// TODO Auto-generated method stub

super.onCreate(savedInstanceState);

setContentView(R.layout.tab_main);

menuItemList = new ArrayList();

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 mtext;

private List mimage;

private List mTabSpec;

private List linearLayout;

private List 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();

linearLayout = new ArrayList();

mtext = new ArrayList();

intent = new ArrayList();

//****************************************************************

//若是引用有图片的布局

mimage = new ArrayList();

//****************************************************************

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布局如下：

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