Android常用控件之FragmentTabHost的使用

    最近在学TabHost时发现TabActivity在API level 13以后不用了，所以就去寻找它的替换类，找到FragmentActivity，可以把每个Fragment作为子tab添加到FragmentActivity上。tab可以放在最上面也可以放在最下面

由以下布局文件main.xml<FrameLayout>的位置决定

<?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">
    
    <!-- 这个布局决定了标签在上面还是在下面显示 -->
    <FrameLayout 
        android:id="@+id/realtabcontent"
        android:layout_width="match_parent"
        android:layout_height="0dip"
        android:layout_weight="1" />
    
    <android.support.v4.app.FragmentTabHost
        android:id="@android:id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        
        <TabWidget 
            android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"/>
    </android.support.v4.app.FragmentTabHost>
    
</LinearLayout>

创建一个类继承FragmentActivity

package com.example.tabhostdemo;

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentTabHost;
import android.view.View;
import android.widget.TextView;

import com.example.tabhost.FirstFragment;
import com.example.tabhost.ThirdFragment;
import com.example.tabhost.secondFragment;

public class MainActivity extends FragmentActivity {

	private FragmentTabHost mTabHost = null;;
	private View indicator = null;

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

		setContentView(R.layout.main);

		mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
		mTabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);

		// 添加tab名称和图标
		indicator = getIndicatorView("我的联系人", R.layout.mycontact_indicator);
		mTabHost.addTab(mTabHost.newTabSpec("myContact")
				.setIndicator(indicator), FirstFragment.class, null);

		indicator = getIndicatorView("陌生人", R.layout.strangercontact_indicator);
		mTabHost.addTab(
				mTabHost.newTabSpec("stranger").setIndicator(indicator),
				secondFragment.class, null);

		indicator = getIndicatorView("常联系人", R.layout.alwayscontact_indicator);
		mTabHost.addTab(
				mTabHost.newTabSpec("alwaysContact").setIndicator(indicator),
				ThirdFragment.class, null);
	}

	private View getIndicatorView(String name, int layoutId) {
		View v = getLayoutInflater().inflate(layoutId, null);
		TextView tv = (TextView) v.findViewById(R.id.tabText);
		tv.setText(name);
		return v;
	}

	@Override
	protected void onDestroy() {
		// TODO Auto-generated method stub
		super.onDestroy();
		mTabHost = null;
	}
}

第一个Tab的布局文件    存放两张图片，字体颜色

alwayscontact_indicator.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:layout_gravity="center" 
    android:gravity="center">

    <TextView 
        android:id="@+id/tabText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:focusable="true"
        android:drawableTop="@drawable/mycontact_selector"
        android:textColor="@drawable/tabitem_txt_sel"/>
</LinearLayout>

mycontact_selector.xml文件

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >	
	<!-- Non focused states -->
	<item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/mycontact" />
	<item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/mycontact_sel" />
	<!-- Focused states -->
	<item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/mycontact_sel" />
	<item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/mycontact_sel" />
	<!-- Pressed -->
	<item android:state_selected="true" android:state_pressed="true" android:drawable="@drawable/mycontact_sel" />
	<item android:state_pressed="true" android:drawable="@drawable/mycontact_sel" />	
</selector>

tabitem_txt_sel.xml文件

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >	
	<!-- Non focused states -->
	<item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:color="#A4A4A4" />
	<item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:color="#00A3F5" />
	<!-- Focused states -->
	<item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:color="#00A3F5" />
	<item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:color="#00A3F5" />
	<!-- Pressed -->
	<item android:state_selected="true" android:state_pressed="true" android:color="#00A3F5" />
	<item android:state_pressed="true" android:color="#00A3F5" />	
</selector>

其它的tab文件定义也是类似的，看下最后的效果图

样例代码

点击打开链接