Tab效果之FragmentTabhost

前面介绍了TabHost,但是在API 13以后Tabhost就不再使用了呢，而FragmentTabhost是它的替换类，接下来简单的介绍下自己的demo

效果图：

项目架构如下：

1、这次selector的属性比之前的要全些，如下；

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Non focused states -->
    <item android:drawable="@drawable/tab_answer_nor" android:state_focused="false" android:state_pressed="false" android:state_selected="false"></item>
    <item android:drawable="@drawable/tab_answer_select" android:state_focused="false" android:state_pressed="false" android:state_selected="true"></item>
    <!-- Focused states -->
    <item android:drawable="@drawable/tab_answer_select" android:state_focused="true" android:state_pressed="false" android:state_selected="false"></item>
    <item android:drawable="@drawable/tab_answer_select" android:state_focused="true" android:state_pressed="false" android:state_selected="true"></item>
    <!-- Pressed -->
    <item android:drawable="@drawable/tab_answer_select" android:state_pressed="true" android:state_selected="true"></item>
    <item android:drawable="@drawable/tab_answer_select" android:state_pressed="true"></item>

</selector>

其他类似

2、展现一下文字选中的xml：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Non focused states -->
    <item android:color="@color/tv_checked_nor" android:state_focused="false" android:state_pressed="false" android:state_selected="false"></item>
    <item android:color="@color/tv_checked_bg" android:state_focused="false" android:state_pressed="false" android:state_selected="true"></item>
    <!-- Focused states -->
    <item android:color="@color/tv_checked_bg" android:state_focused="true" android:state_pressed="false" android:state_selected="false"></item>
    <item android:color="@color/tv_checked_bg" android:state_focused="true" android:state_pressed="false" android:state_selected="true"></item>
    <!-- Pressed -->
    <item android:color="@color/tv_checked_bg" android:state_pressed="true" android:state_selected="true"></item>
    <item android:color="@color/tv_checked_bg" android:state_pressed="true"></item>

</selector>

虽然我们在selector里面没有感知出来android:color，但是你这么写上去是没有问题的

3、主布局的xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >


    <FrameLayout
        android:id="@+id/layout_container_tabcontent"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >
    </FrameLayout>
    <View
        android:id="@+id/div_view"
        android:layout_width="fill_parent"
        android:layout_height="1.0px"
        android:layout_above="@+id/main_radiogroup"
        android:layout_marginBottom="2dip"
        android:background="#ffc9cacb" />
    
    <android.support.v4.app.FragmentTabHost
        android:id="@android:id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >
    </android.support.v4.app.FragmentTabHost>


</LinearLayout>

4、底部item的布局：

<?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"
    android:layout_gravity="center"
    android:gravity="center"
     >
    
    <TextView
        android:id="@+id/textview2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawableTop="@drawable/selector_tab_answer"
        android:textColor="@drawable/selector_tab_textview"
        ></TextView>

</LinearLayout>

5、Java代码：

package com.tab_bamboo.fragmenttabhost;

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

public class MainActivity extends FragmentActivity {
	private FragmentTabHost mTabHost;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		mTabHost = (FragmentTabHost) this.findViewById(android.R.id.tabhost);

		mTabHost.setup(this, getSupportFragmentManager(),
				R.id.layout_container_tabcontent);
		/** 添加第一个选项卡 */
		Bundle b1 = new Bundle();
		b1.putString("name", "一");
		mTabHost.addTab(
				mTabHost.newTabSpec("fisrt").setIndicator(
						getIndicatorView("第一页", R.layout.item_answer)),
				ItemFragment.class, b1);
		/** 改变选中后的背景颜色 */
		mTabHost.getTabWidget().getChildAt(0)
				.setBackgroundResource(R.drawable.selector_bg);

		/** 添加第二个选项卡 */
		Bundle b2 = new Bundle();
		b2.putString("name", "二");
		mTabHost.addTab(
				mTabHost.newTabSpec("second").setIndicator(
						getIndicatorView("第二页", R.layout.item_discover)),
				ItemFragment.class, b2);
		/** 改变选中后的背景颜色 */
		mTabHost.getTabWidget().getChildAt(1)
				.setBackgroundResource(R.drawable.selector_bg);
	}

	private View getIndicatorView(String textname, int id) {
		View view = LayoutInflater.from(this).inflate(id, null);
		TextView tv = (TextView) view.findViewById(R.id.textview2);
		tv.setText(textname);
		return view;
	}

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

}

对上面的设置bundle做个简单的解释下，因为这里是做了个demo，在fragment中显示的内容，其实就是我传入的bundle的值，这个看你项目中需要不需要呢！

源码下载地址：

点击打开链接