Android创建标签页的两种方式

Android中创建标签页有两种方式：

一.使用TabHost和TabActivity或TabHost和ActivityGroup或TabHost和Activity

二.使用普通控件和Fragment和RadioGroup或Fragment和TabHost或Fragment和一般控件

第一种方式介绍：

1.TabHost和TabActivity

布局文件：

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical">

    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="45dp"

        android:background="#dddddd"></LinearLayout>

    <TabHost

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

     android:layout_width="match_parent"

     android:layout_height="match_parent">

     <LinearLayout

         android:layout_width="match_parent"

         android:layout_height="match_parent"

         android:orientation="vertical">

         <TabWidget

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

             android:layout_width="match_parent"

             android:layout_height="wrap_content">

         </TabWidget>

         <FrameLayout

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

             android:layout_width="match_parent"

             android:layout_height="match_parent">

             <LinearLayout

                 android:id="@+id/tab01"

                 android:layout_width="match_parent"

                 android:layout_height="match_parent">

                 <TextView

                     android:layout_width="wrap_content"

                     android:layout_height="wrap_content"

                     android:text="第一页"/>

             </LinearLayout>

             <LinearLayout

                 android:id="@+id/tab02"

                 android:layout_width="match_parent"

                 android:layout_height="match_parent">

                 <include layout="@layout/other"

                     android:id="@+id/tab02" />

             </LinearLayout>

             <include

                 android:id="@+id/tab03"

                 layout="@layout/other" />

         </FrameLayout>

     </LinearLayout>

 </TabHost>

</LinearLayout>

代码文件：

 protected void onCreate(Bundle savedInstanceState) {

  super.onCreate(savedInstanceState);

  setContentView(R.layout.activity_main);

 

  TabHost tabHost = getTabHost();

  TabSpec tab1 = tabHost.newTabSpec("tab1");

  tab1.setIndicator("标签一");

  tab1.setContent(R.id.tab01);

  tabHost.addTab(tab1);

  TabSpec tab2 = tabHost.newTabSpec("tab2");

  tab2.setIndicator("标签二");

  tab2.setContent(R.id.tab02);

  tabHost.addTab(tab2);

  TabSpec tab3 = tabHost.newTabSpec("tab3");

  tab3.setIndicator("标签三");

  tab3.setContent(R.id.tab03);

  tabHost.addTab(tab3);

  TabSpec tab4 = tabHost.newTabSpec("tab4");

  tab4.setIndicator("标签四"); //标签四启动一个Activity

  Intent tabIntent = new Intent(MainActivity.this, OtherActivity.class);

  tab4.setContent(tabIntent);

  tabHost.addTab(tab4);

 

  tabHost.setOnTabChangedListener(new OnTabChangeListener(){

   @Override

   public void onTabChanged(String tabId){

    Toast.makeText(MainActivity.this, tabId, 2).show();

   }

  });

 }

2.TabHost和ActivityGroup

布局文件：

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical">

    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="45dp"

        android:background="#dddddd"></LinearLayout>

 <TabHost

     android:id="@+id/mytabhost"

     android:layout_width="match_parent"

     android:layout_height="match_parent">

     <LinearLayout

         android:layout_width="match_parent"

         android:layout_height="match_parent"

         android:orientation="vertical">

         <TabWidget

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

             android:layout_width="match_parent"

             android:layout_height="wrap_content">

         </TabWidget>

         <FrameLayout

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

             android:layout_width="match_parent"

             android:layout_height="match_parent">

             <LinearLayout

                 android:id="@+id/tab01"

                 android:layout_width="match_parent"

                 android:layout_height="match_parent">

                 <TextView

                     android:layout_width="wrap_content"

                     android:layout_height="wrap_content"

                     android:text="第一页"/>

             </LinearLayout>

             <LinearLayout

                 android:id="@+id/tab02"

                 android:layout_width="match_parent"

                 android:layout_height="match_parent">

                 <include layout="@layout/other"

                     android:id="@+id/tab02" />

             </LinearLayout>

             <include

                 android:id="@+id/tab03"

                 layout="@layout/other" />

         </FrameLayout>

     </LinearLayout>

 </TabHost>

</LinearLayout>

代码文件：

 protected void onCreate(Bundle savedInstanceState) {

  super.onCreate(savedInstanceState);

  setContentView(R.layout.activity_main);

  Resources res = getResources();

  TabHost tabHost = (TabHost)findViewById(R.id.mytabhost);

  //如果不继承TabActivity，添加标签前必须先调用setup()方法

  //在ActivityGroup中，如果要使用setContent(Intent intent)，需要调用setup(LocalActivityManager activityGroup)

  tabHost.setup(this.getLocalActivityManager());

 

  TabSpec tab1 = tabHost.newTabSpec("tab1");

  tab1.setIndicator("标签一");

  tab1.setContent(R.id.tab01);

  tabHost.addTab(tab1);

  TabSpec tab2 = tabHost.newTabSpec("tab2");

  tab2.setIndicator("标签二",res.getDrawable(R.drawable.ic_launcher));

  tab2.setContent(R.id.tab02);

  tabHost.addTab(tab2);

  TabSpec tab3 = tabHost.newTabSpec("tab3");

  tab3.setIndicator("标签三");

  tab3.setContent(R.id.tab03);

  tabHost.addTab(tab3);

  TabSpec tab4 = tabHost.newTabSpec("tab4");

  tab4.setIndicator("标签四"); //标签四启动一个Activity

  Intent tabIntent = new Intent(MainActivity.this, OtherActivity.class);

  tab4.setContent(tabIntent);

  tabHost.addTab(tab4);

 

  tabHost.setOnTabChangedListener(new OnTabChangeListener(){

   @Override

   public void onTabChanged(String tabId){

    Toast.makeText(MainActivity.this, tabId, 2).show();

   }

  });

 }

说明：在OtherActivity中若想跳转，使用startActivity会跳到新页面，无法实现在选项卡内跳转

若想实现选项卡内的跳转OtherActivity就需要继承ActivityGroup，然后使用以下代码，还没弄明白怎么弄，再说

Window w = group.getLocalActivityManager().startActivity("",intent);

View view = w.getDecorView();

group.setContentView(view);

关于ActivityGroup的正确用法有一篇不错的博客：http://www.cnblogs.com/answer1991/archive/2012/05/08/2489844.html

3.TabHost和Activity

注意：继承Activity不能使用setContent(Intent intent),如果要使用需继承ActivityGroup或TabActivity

布局文件：

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent">

 <TabHost

     android:id="@+id/mytabhost"

     android:layout_width="match_parent"

     android:layout_height="match_parent">

     <LinearLayout

         android:layout_width="match_parent"

         android:layout_height="match_parent"

         android:orientation="vertical">

         <TabWidget

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

             android:layout_width="match_parent"

             android:layout_height="wrap_content">

         </TabWidget>

         <FrameLayout

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

             android:layout_width="match_parent"

             android:layout_height="match_parent">

             <LinearLayout

                 android:id="@+id/tab01"

                 android:layout_width="match_parent"

                 android:layout_height="match_parent">

                 <TextView

                     android:layout_width="wrap_content"

                     android:layout_height="wrap_content"

                     android:text="第一页"/>

             </LinearLayout>

             <LinearLayout

                 android:id="@+id/tab02"

                 android:layout_width="match_parent"

                 android:layout_height="match_parent">

                 <include layout="@layout/other"

                     android:id="@+id/tab02" />

             </LinearLayout>

             <include

                 android:id="@+id/tab03"

                 layout="@layout/other" />

         </FrameLayout>

     </LinearLayout>

 </TabHost>

</LinearLayout>

代码文件：

  TabHost tabHost = (TabHost)findViewById(R.id.mytabhost);

  tabHost.setup(); //如果不继承TabActivity，添加标签前必须先调用setup()方法

 

  TabSpec tab1 = tabHost.newTabSpec("tab1");

  tab1.setIndicator("标签一");

  tab1.setContent(R.id.tab01);

  tabHost.addTab(tab1);

  TabSpec tab2 = tabHost.newTabSpec("tab2");

  tab2.setIndicator("标签二");

  tab2.setContent(R.id.tab02);

  tabHost.addTab(tab2);

  TabSpec tab3 = tabHost.newTabSpec("tab3");

  tab3.setIndicator("标签三");

  tab3.setContent(R.id.tab03);

  tabHost.addTab(tab3);

  //继承Activity不能使用setContent(Intent intent),如果要使用需继承ActivityGroup或TabActivity

 

  tabHost.setOnTabChangedListener(new OnTabChangeListener(){

   @Override

   public void onTabChanged(String tabId){

    Toast.makeText(MainActivity.this, tabId, 2).show();

   }

  });

以上TabHost方式存在的问题：

用上述代码做出的标签页样式在不同版本的平台下样式不一样，需要进行美化

TabHost自定义样式：

首先TabWidget的样式是分两部分的一是底层的背景，二是在其上的标签

背景可以在<TabWidget>标签中设置

其上的标签就要在Activity中添加时设置setIndicator(View view)方法中的View了

setIndicator()的三种用法：

TabHost.TabSpec

setIndicator(CharSequence label)

Specify a label as the tab indicator.

TabHost.TabSpec

setIndicator(View view)

Specify a view as the tab indicator.

TabHost.TabSpec

setIndicator(CharSequence label, Drawable icon)

Specify a label and icon as the tab indicator.

其中的View是通过LayoutInflater加载的标签布局文件

定义一个标签布局文件tablable.xml，在里边设计标签的样子，例如可以定义标签背景和标签内容以及让它们动态改变

代码：

src/com/sunqinye/androidtest/activity.java:

package com.sunqinye.androidtest.activity;

import com.sunqinye.androidtest.R;

import android.app.Activity;

import android.app.ActivityGroup;

import android.content.Intent;

import android.content.res.Resources;

import android.os.Bundle;

import android.view.LayoutInflater;

import android.view.View;

import android.widget.TabHost;

import android.widget.TabHost.TabSpec;

import android.widget.TabHost.OnTabChangeListener;

import android.widget.Toast;

public class MainActivity extends ActivityGroup{

 @Override

 protected void onCreate(Bundle savedInstanceState) {

  super.onCreate(savedInstanceState);

  setContentView(R.layout.activity_main);

 

  Resources res = getResources();

  TabHost tabHost = (TabHost)findViewById(R.id.mytabhost);

  //如果不继承TabActivity，添加标签前必须先调用setup()方法

  //在ActivityGroup中，如果要使用setContent(Intent intent)，需要调用setup(LocalActivityManager activityGroup)

  tabHost.setup(this.getLocalActivityManager());

 

  tabHost.getTabWidget().setDividerDrawable(null); //设置或去掉TabWidget的分割线

  //设置setIndicator()要用到的View

  View label1 = (View)LayoutInflater.from(this).inflate(R.layout.tablabel, null);

  View label2 = (View)LayoutInflater.from(this).inflate(R.layout.tablabel, null);

  View label3 = (View)LayoutInflater.from(this).inflate(R.layout.tablabel, null);

  View label4 = (View)LayoutInflater.from(this).inflate(R.layout.tablabel, null);

 

 

  TabSpec tab1 = tabHost.newTabSpec("tab1");

  tab1.setIndicator(label1);

  tab1.setContent(R.id.tab01);

  tabHost.addTab(tab1);

  TabSpec tab2 = tabHost.newTabSpec("tab2");

  tab2.setIndicator(label2);

  tab2.setContent(R.id.tab02);

  tabHost.addTab(tab2);

  TabSpec tab3 = tabHost.newTabSpec("tab3");

  tab3.setIndicator(label3);

  tab3.setContent(R.id.tab03);

  tabHost.addTab(tab3);

  TabSpec tab4 = tabHost.newTabSpec("tab4");

  tab4.setIndicator(label4); //标签四启动一个Activity

  Intent tabIntent = new Intent(MainActivity.this, OtherActivity.class);

  tab4.setContent(tabIntent);

  tabHost.addTab(tab4);

 

  tabHost.setOnTabChangedListener(new OnTabChangeListener(){

   @Override

   public void onTabChanged(String tabId){

    Toast.makeText(MainActivity.this, tabId, 2).show();

   }

  });

 }

}

res/layout/activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical">

    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="45dp"

        android:background="#0000ff"></LinearLayout>

 <TabHost

     android:id="@+id/mytabhost"

     android:layout_width="match_parent"

     android:layout_height="match_parent">

     <LinearLayout

         android:layout_width="match_parent"

         android:layout_height="match_parent"

         android:orientation="vertical">

         <TabWidget

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

             android:layout_width="match_parent"

             android:layout_height="45dp"

             android:background="#eeeeee">

         </TabWidget>

         <FrameLayout

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

             android:layout_width="match_parent"

             android:layout_height="match_parent">

             <LinearLayout

                 android:id="@+id/tab01"

                 android:layout_width="match_parent"

                 android:layout_height="match_parent">

                 <TextView

                     android:layout_width="wrap_content"

                     android:layout_height="wrap_content"

                     android:text="第一页"/>

             </LinearLayout>

             <LinearLayout

                 android:id="@+id/tab02"

                 android:layout_width="match_parent"

                 android:layout_height="match_parent">

                 <include layout="@layout/other"

                     android:id="@+id/tab02" />

             </LinearLayout>

             <include

                 android:id="@+id/tab03"

                 layout="@layout/other" />

         </FrameLayout>

     </LinearLayout>

 </TabHost>

</LinearLayout>

res/layout/tablabel.xml:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:background="@drawable/selector_tablabelbg" >

    <TextView

  android:layout_width="match_parent"

  android:layout_height="match_parent"

  android:gravity="center"

  android:textColor="@color/selector_tabtextcolor"

  android:text="OTHER"/>

</LinearLayout>

res/drawable/selector_tablabelbg.xml:

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:state_selected="true" android:drawable="@color/black"/>

    <item android:state_selected="false" android:drawable="@color/white" />

</selector>

res/color/selector_tabtextcolor.xml

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:state_selected="true" android:color="@color/white" />

    <item android:state_selected="false" android:color="@color/black" />

</selector>

第二种方法介绍：

1.Fragment和RadioGroup:

创建HomeFragment.java等Fragment文件

创建fragment_home.xml等Fragment文件所对应的布局文件

在MainActivity.java中使用Fragment

自定义RadioGroup和RadioButton样式

代码：

src/com/sunqinye/androidtest/activity/MainActivity.java:

package com.sunqinye.androidtest.activity;

import android.os.Bundle;

import android.support.v4.app.Fragment;

import android.support.v4.app.FragmentActivity;

import android.support.v4.app.FragmentManager;

import android.support.v4.app.FragmentTransaction;

import android.widget.RadioGroup;

import android.widget.RadioGroup.OnCheckedChangeListener;

import com.sunqinye.androidtest.R;

import com.sunqinye.androidtest.fragment.AutoFragment;

import com.sunqinye.androidtest.fragment.GameFragment;

import com.sunqinye.androidtest.fragment.HomeFragment;

import com.sunqinye.androidtest.fragment.TechFragment;

public class MainActivity extends FragmentActivity{

 private HomeFragment homeFragment;

 private TechFragment techFragment;

 private AutoFragment autoFragment;

 private GameFragment gameFragment;

 

 private RadioGroup radioGroup;

 

 private FragmentManager fragmentManager;

 private FragmentTransaction fragmentTransaction;

 

 @Override

 protected void onCreate(Bundle savedInstanceState) {

  super.onCreate(savedInstanceState);

  setContentView(R.layout.activity_main);

  //获取碎片管理器

  fragmentManager = getSupportFragmentManager();

 

  initView();

  setTabSelect(0);

 

  radioGroup.setOnCheckedChangeListener(new OnCheckedChangeListener(){

   @Override

   public void onCheckedChanged(RadioGroup group, int checkedId) {

    switch (checkedId) {

    case R.id.tablabel_home:

     setTabSelect(1);

     break;

    case R.id.tablabel_tech:

     setTabSelect(2);

     break;

    case R.id.tablabel_auto:

     setTabSelect(3);

     break;

    case R.id.tablabel_game:

     setTabSelect(4);

     break;

    default:

     setTabSelect(1);

     break;

    }

   }

  });

 }

 

 private void initView() {

  radioGroup = (RadioGroup) findViewById(R.id.tabwidget);

  radioGroup.check(R.id.tablabel_home);

 }

 

 private void setTabSelect(int id) {

  //开启一个事务

  fragmentTransaction = fragmentManager.beginTransaction();

  switch (id) {

   case 1:

    homeFragment = new HomeFragment();

    fragmentTransaction.replace(R.id.app_container, homeFragment);

    break;

   case 2:

    techFragment = new TechFragment();

    fragmentTransaction.replace(R.id.app_container, techFragment);

    break;

   case 3:

    autoFragment = new AutoFragment();

    fragmentTransaction.replace(R.id.app_container, autoFragment);

    break;

   case 4:

    gameFragment = new GameFragment();

    fragmentTransaction.replace(R.id.app_container, gameFragment);

    break;

   default:

    homeFragment = new HomeFragment();

    fragmentTransaction.replace(R.id.app_container, homeFragment);

    break;

  }

  fragmentTransaction.commit();

 }

}

src/com/sunqinye/androidtest/fragment/HomeFragment.java

package com.sunqinye.androidtest.fragment;

import com.sunqinye.androidtest.R;

import android.os.Bundle;

import android.support.v4.app.Fragment;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

public class HomeFragment extends Fragment{

 @Override

 public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

  // TODO Auto-generated method stub

  return inflater.inflate(R.layout.fragment_home, container, false);

 }

}

res/layout/fragment_home.xml:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical" >

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="首页布局"/>

</LinearLayout>

res/drawable/selector_tablabelbg.xml:

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:state_checked="true" android:drawable="@color/black"/>

    <item android:state_checked="false" android:drawable="@color/white" />

</selector>

res/color/selector_tabtextcolor.xml:

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:state_checked="true" android:color="@color/white" />

    <item android:state_checked="false" android:color="@color/black" />

</selector>

2.Fragment和TabHost：

FrameLayout中不需要放置多个控件了，通过Fragment动态添加

添加tab标签但不绑定显示容器

通过tabchange监听，在其中使用Fragment

3.Fragment和一般控件：

一般控件需要自己处理选中和去掉选中的样式

有篇不错的博客：http://blog.csdn.net/guolin_blog/article/details/13171191