Tab与TabHost详细教程


下面的就是Tab,而盛放Tab的容器就是TabHost。下面我就来介绍它的制作教程。

  1.新建一个Tab项目,注意,不要生成main Activity;

  2.在包里面新建一个类MyTab,继承于TabActivity,其实,TabActivity是Activity的子类;

  package zyf.tab.test;

  import android.app.TabActivity;

  public class MyTab extends TabActivity {

  }

  3.从父类继承OnCreate()入口方法

  package zyf.tab.test;
  import android.app.TabActivity;
  import android.os.Bundle;
  public class MyTab extends TabActivity {
     
      protected void onCreate(Bundle savedInstanceState) {
         
          super.onCreate(savedInstanceState);
      }
  }

  4.在Manifest.xml文件中注册一下MyTab类(Activity)

  <activity android:name=".MyTab">
      <intent-filter>
          <action android:name="android.intent.action.MAIN"></action>
          <category android:name="android.intent.category.LAUNCHER"></category>
      </intent-filter>
  </activity>

  5.这时候,需要设计一下标签页对应的布局,一般采用FrameLayout作为根布局,每个标签页面对应一个子节点的Layout

  <?xml version="1.0" encoding="utf-8"?>
  <!--  这里是根节点布局  -- >
  <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="fill_parent" android:layout_height="fill_parent">

  <!--  第一个Tab 对应的布局  -- >
      <LinearLayout android:id="@+id/widget_layout_Blue"
          android:layout_width="fill_parent" android:layout_height="fill_parent"
          androidrientation="vertical" >
          <EditText android:id="@+id/widget34" android:layout_width="fill_parent"
              android:layout_height="wrap_content" android:text="EditText"
              android:textSize="18sp">
          </EditText>
          <Button android:id="@+id/widget30" android:layout_width="wrap_content"
              android:layout_height="wrap_content" android:text="Button">
          </Button>
      </LinearLayout>
  <!--  第二个Tab 对应的布局  -- >
      <LinearLayout android:id="@+id/widget_layout_red"
          android:layout_width="fill_parent" android:layout_height="fill_parent"
          androidrientation="vertical"  >
          <AnalogClock android:id="@+id/widget36"
              android:layout_width="wrap_content" android:layout_height="wrap_content">
          </AnalogClock>
      </LinearLayout>
  <!--  第三个Tab 对应的布局  -- >
      <LinearLayout android:id="@+id/widget_layout_green"
          android:layout_width="fill_parent" android:layout_height="fill_parent"
          androidrientation="vertical">
          <RadioGroup android:id="@+id/widget43"
              android:layout_width="166px" android:layout_height="98px"
              androidrientation="vertical">
              <RadioButton android:id="@+id/widget44"
                  android:layout_width="wrap_content" android:layout_height="wrap_content"
                  android:text="RadioButton">
              </RadioButton>
              <RadioButton android:id="@+id/widget45"
                  android:layout_width="wrap_content" android:layout_height="wrap_content"
                  android:text="RadioButton">
              </RadioButton>
          </RadioGroup>
      </LinearLayout>
  </FrameLayout>


6.首先,应该声明TabHost,然后用LayoutInflater过滤出布局来,给TabHost加上含有Tab页面的FrameLayout

  private TabHost myTabhost;
  myTabhost=this.getTabHost();//从TabActivity上面获取放置Tab的TabHost
  LayoutInflater.from(this).inflate(R.layout.main, myTabhost.getTabContentView(), true);
  //from(this)从这个TabActivity获取LayoutInflater
  //R.layout.main 存放Tab布局
  //通过TabHost获得存放Tab标签页内容的FrameLayout
  //是否将inflate 拴系到根布局元素上
  myTabhost.setBackgroundColor(Color.argb(150, 22, 70, 150));
  //设置一下TabHost的颜色

  7.接着,在TabHost创建一个标签,然后设置一下标题/图标/标签页布局

  myTabhost
                  .addTab(myTabhost.newTabSpec("TT")// 制造一个新的标签TT
                          .setIndicator("KK",
                                  getResources().getDrawable(R.drawable.ajjc))
                          // 设置一下显示的标题为KK,设置一下标签图标为ajjc
                          .setContent(R.id.widget_layout_red));
          //设置一下该标签页的布局内容为R.id.widget_layout_red,这是FrameLayout中的一个子Layout

  8.标签切换事件处理,setOnTabChangedListener

  myTabhost.setOnTabChangedListener(new OnTabChangeListener(){
              @Override
              public void onTabChanged(String tabId) {
                  // TODO Auto-generated method stub
              }           
          });

  9.各个标签页的动态MENU

  private static final int myMenuResources[] = { R.menu.phonebook_menu,
              R.menu.addphone_menu, R.menu.chatting_menu, R.menu.userapp_menu };

  在setOnTabChangedListener()方法中根据标签的切换情况来设置myMenuSettingTag

  public void onTabChanged(String tagString) {
          // TODO Auto-generated method stub
          if (tagString.equals("One")) {
              myMenuSettingTag = 1;
          }
          if (tagString.equals("Two")) {
              myMenuSettingTag = 2;
          }
          if (tagString.equals("Three")) {
              myMenuSettingTag = 3;
          }
          if (tagString.equals("Four")) {
              myMenuSettingTag = 4;
          }
          if (myMenu != null) {
              onCreateOptionsMenu(myMenu);
          }
      }

  10.运行效果


你可能感兴趣的:(Tab与TabHost详细教程)