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

前端技术 2023/09/06 Android

本文实例讲述了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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/15372

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案