仿新浪微博2014之主界面一(Fragment+FragmentTabHost+FragmentActivity)

在android版本13以前，实现底部菜单常用的手法是使用TabActivity+TabHost ，但在13版本中TabActivity已经被舍弃。

因此这里我们使用FragmentTabHost+FragmentActivity来实现底部菜单

先来看看布局文件activity_tabhost.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" >

    <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" 
        android:background="@drawable/tabbar_background">

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

这里要注意几点，FragmentTabHost 的id要为android:id="@android:id/tabhost"，TabWidget的id为android:id="@android:id/tabs" ，FrameLayout是用来显示内容的

接下来看看Fragment+FragmentTabHost+FragmentActivity是如何配合的

代码如下：

package com.xhq.xweibo.ui;


import com.sina.weibo.sdk.auth.Oauth2AccessToken;
import com.xhq.xweibo.R;
import com.xhq.xweibo.logic.CurUserKeeper;
import com.xhq.xweibo.logic.UserInfo;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentTabHost;
import android.util.Log;
import android.view.Menu;
import android.view.View;
import android.view.Window;


public class TabHostActivity extends FragmentActivity
{
	private static final String TAG = "TabHostActivity";

	private FragmentTabHost mTabHost;
	public static UserInfo mCurUser;
	public static Oauth2AccessToken mAccessToken;

	@Override
	protected void onCreate(Bundle savedInstanceState)
	{
		Log.d(TAG, "ONCREATE");
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_CUSTOM_TITLE);
		setContentView(R.layout.activity_tabhost);
		initParams();
		initTabHost();
	}
	
	private void initParams()
	{
		mCurUser = CurUserKeeper.getCurUser(getApplicationContext());
		mAccessToken = CurUserKeeper.getAccessToken(getApplicationContext());
	}

	public void initTabHost()
	{
		Log.d(TAG, "INITTABHOST");
		mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
		mTabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);
		View indicator = getLayoutInflater().inflate(
				R.layout.indicator_tabhome, null);
		mTabHost.addTab(mTabHost.newTabSpec("home").setIndicator(indicator),
				TabHomeFragment.class, null);
		indicator = getLayoutInflater()
				.inflate(R.layout.indicator_tabmsg, null);
		mTabHost.addTab(mTabHost.newTabSpec("msg").setIndicator(indicator),
				TabMsgFragment.class, null);
		indicator = getLayoutInflater().inflate(R.layout.indicator_tabprofile,
				null);
		mTabHost.addTab(mTabHost.newTabSpec("profile").setIndicator(indicator),
				TabProfileFragment.class, null);
		indicator = getLayoutInflater().inflate(R.layout.indicator_tabdiscover,
				null);
		mTabHost.addTab(
				mTabHost.newTabSpec("discover").setIndicator(indicator),
				TabDiscoverFragment.class, null);
		indicator = getLayoutInflater().inflate(R.layout.indicator_tabmore,
				null);
		mTabHost.addTab(mTabHost.newTabSpec("more").setIndicator(indicator),
				TabMoreFragment.class, null);
		mTabHost.setCurrentTabByTag("home");
	}

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

}
           

主要步骤：

（1）我们的activity需要继承FragmentActivity

（2）建立tabhost

        mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);

        mTabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);//设置我们显示Fragment的位置

（3）加入tab显示页面，新浪微博的主页面总共用5个tab页面分别为首页、消息、我、广场和更多，我们以首页为例进行介绍。

        View indicator = getLayoutInflater().inflate(R.layout.indicator_tabhome, null);

        mTabHost.addTab(mTabHost.newTabSpec("home").setIndicator(indicator), TabHomeFragment.class, null);

       这里的indicator 是菜单项的布局这样我们就可以控制菜单项的风格了，然后就把菜单项和对应的fragment加入到tabhost中了

  indicator_tabhome.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/indicator_tabhome"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:drawableTop="@drawable/selector_tabhost_home"
        android:background="@drawable/selector_tabhost_commom"
        android:text="首页"
        android:textColor="@color/white"
        android:focusable="true" />

</LinearLayout>
           

效果图如下：