android实现tab选项的方式

实现tab的功能：一种是继承TabActivity，但这种方式在android api13已经被标记为过时了，新的API使用继承FragmentActivity实现。

使用继承TabActivity实现：

一个选项卡是由多个选项(tab)和一个帧布局(FrameLayout)组成,一个选项(tab)由多个选项投机(tabSpec)组成,一个投机(tabSpec)是由指示器(indicator),目录(content)，标签(tag)组成;指示器可以设置标注(label),或者同时设置标注(label)和图片(icon);目录的值可以为：视图（view）ID,实现视图目录的选项卡目录工厂接口（TabHost.TabContentFactory），加载Acitivity的Intent;标签可以用来标注一个投机(tabSpec);帧布局(FrameLayout)用来显示目录

1，新建一个类TabsActivity,让它继承TabActivity:

package com.jian.tabtest;

import android.os.Bundle;
import android.app.TabActivity;
import android.content.res.Resources;
import android.view.LayoutInflater;
import android.view.Menu;
import android.widget.TabHost;

@SuppressWarnings("deprecation")
public class TabsActivity extends TabActivity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		//setContentView(R.layout.activity_tabs);
		//获取资源文件
		Resources resources = this.getResources();
		//获取TabHost
		TabHost tabHost = this.getTabHost();
		//把布局文件添加到帧布局中
		LayoutInflater.from(this).inflate(R.layout.activity_tabs, tabHost.getTabContentView(), true);
		//设置tab的标签内容及显示内容，Indicator指示器，设置标题或图标
		tabHost.addTab(tabHost.newTabSpec("all").setIndicator("通话记录",resources.getDrawable(R.drawable.ic_all))
												.setContent(R.id.TextView01));
		tabHost.addTab(tabHost.newTabSpec("ok").setIndicator("未接来电")
				                               .setContent(R.id.TextView02));
		tabHost.addTab(tabHost.newTabSpec("cancel").setIndicator("已接来电").setContent(R.id.TextView03));
		//设置默认选中的tab
		tabHost.setCurrentTab(1);
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.tabs, menu);
		return true;
	}

}

2,新建activity_tabs配置文件：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:id="@+id/FrameLayout01"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
>
	<TabHost 
		android:id="@+id/TabHost01"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
	>
	</TabHost>
	<TextView 
		android:id="@+id/TextView01"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="通话记录"
	/>
	<TextView 
		android:id="@+id/TextView02"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="已接来电"
	/>
	<TextView 
		android:id="@+id/TextView03"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="未接来电"
	/>
</FrameLayout>

3，结果如下：

使用FragmentTabHost:

activity_tab配置文件：

<android.support.v4.app.FragmentTabHost
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TabWidget
            android:id="@android:id/tabs"
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0"/>

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="0"/>

        <FrameLayout
            android:id="@+id/realtabcontent"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"/>

    </LinearLayout>
</android.support.v4.app.FragmentTabHost>

MyTabActivity.java：

package com.jian.helloworld;

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentTabHost;
import android.view.Menu;
/**
 * tab标签测试（新api）
 * @author Administrator
 *
 */
public class MyTabActivity extends FragmentActivity {
	
	//FragmentTabHost对象
	private FragmentTabHost mTabHost;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		//设置当前布局
		setContentView(R.layout.activity_my_tab);
		//获得FragmentTabHost实例
		mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
		//初始化tab
		mTabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);
		
		//增加tab选项卡
		mTabHost.addTab(mTabHost.newTabSpec("all").setIndicator("已接来电"), Fragment1.class , null);
		mTabHost.addTab(mTabHost.newTabSpec("ok").setIndicator("未接来电"), Fragment2.class , null);
		
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.my_tab, menu);
		return true;
	}

}

选项卡的内容，让其继承Fragment:

Fragment1.java:

package com.jian.helloworld;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * 对应一个tab项的内容
 * @author Administrator
 *
 */
public class Fragment1 extends Fragment {

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		
	}

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		//添加布局文件
		View view = inflater.inflate(R.layout.tab_frag1,null);
		return view;
	}
	
}

tab.rag1.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:id="@+id/t1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="已接来电"
        />

</LinearLayout>

效果图如下：