Android仿新浪微博底栏(FragmentTabHost的使用)

主布局：

<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/realtabcontent"
	    android:layout_width="match_parent"
	    android:layout_height="0dip"
	    android:layout_weight="1">
	</FrameLayout>
	
	<android.support.v4.app.FragmentTabHost
	    android:id="@android:id/tabhost"
	    android:layout_width="match_parent"
	    android:layout_height="wrap_content"
	    android:background="@drawable/tabbar_background">
	    <TabHost 
	        android:id="@android:id/tabs"
	        android:layout_width="match_parent"
	        android:layout_height="wrap_content">
	    </TabHost>
	 	<FrameLayout 
		    android:id="@android:id/tabcontent"
		    android:layout_width="match_parent"
		    android:layout_height="wrap_content">
		</FrameLayout>	    
	</android.support.v4.app.FragmentTabHost>
</LinearLayout>

Indicator的layout

<?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" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
   	android:gravity="center_horizontal|bottom"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/iv_icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/icon_home" />

        <TextView
            android:id="@+id/tv_icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#FFFFFFFF"
            android:textSize="10sp" />
    </LinearLayout>

</LinearLayout>

底部按钮的selector

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/tabbar_home_highlighted" android:state_selected="true"></item>
    <item android:drawable="@drawable/tabbar_home"/>
</selector>

按下效果的selector

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/tabbar_slider" android:state_pressed="true"/>
    <item android:drawable="@drawable/tabbar_slider" android:state_selected="true"/>
</selector>

MainActivity

package cn.cl.tebdemo;

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentTabHost;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TabHost.TabSpec;
import android.widget.TextView;

/**
 * 仿新浪微博底栏
 * @author chenleicpp
 *
 */
public class MainActivity extends FragmentActivity {

	private FragmentTabHost mTabHost;

	private Class fragmentArray[] = { Main1Fragment.class, Main2Fragment.class, Main3Fragment.class, Main4Fragment.class, Main5Fragment.class };
	private int iconArray[] = { R.drawable.icon_home, R.drawable.icon_meassage, R.drawable.icon_selfinfo, R.drawable.icon_square,
			R.drawable.icon_more };
	private String titleArray[] = { "首页", "消息", "个人", "广场", "更多" };

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		setupView();
	}

	private void setupView() {
		mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
		mTabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);
		mTabHost.getTabWidget().setDividerDrawable(null);

		int count = fragmentArray.length;

		for (int i = 0; i < count; i++) {
			TabSpec tabSpec = mTabHost.newTabSpec(titleArray[i]).setIndicator(getTabItemView(i));
			mTabHost.addTab(tabSpec, fragmentArray[i], null);
			mTabHost.getTabWidget().getChildAt(i).setBackgroundResource(R.drawable.home_btn_bg);
		}

	}

	private View getTabItemView(int index) {
		LayoutInflater layoutInflater = LayoutInflater.from(this);
		View view = layoutInflater.inflate(R.layout.view_idle_bottom_navi, null);

		ImageView imageView = (ImageView) view.findViewById(R.id.iv_icon);
		imageView.setImageResource(iconArray[index]);

		TextView textView = (TextView) view.findViewById(R.id.tv_icon);
		textView.setText(titleArray[index]);

		return view;
	}

}

至此为止，主要代码就写完了，具体的请看demo源码：

源码下载