使用Fragment实现底部菜单的切换

在做android项目的时候，经常会遇到底部有几个菜单，点击之后，页面上面部分需要展示不同的内容，如下图：

在我的这个例子里面，采用了Fragment来展示点击下面菜单之后的不同数据。

开发步骤：

1）分析页面布局

     页面分成底部菜单和上面的展示区域。整体布局采用LinearLayout垂直布局，下面的菜单同样使用LinearLayout，水平线性布局。每一个小图标和下面的文字，我这里采用的是线性垂直布局，首页、热点、留言和我的，平分页面宽度。

     main.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/content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >
    </FrameLayout>
    <include layout="@layout/include_bottom"/>
</LinearLayout>

main.xml文件中包含了一个include_bottom.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="wrap_content"
    android:orientation="vertical">
    <View 
	    android:layout_width="match_parent"
	    android:layout_height="1dp"
	    android:background="@color/line_view"
        />
    <LinearLayout 
	    android:layout_width="match_parent"
	    android:layout_height="wrap_content"
	    android:orientation="horizontal"
	    android:background="@color/menu_bgcolor"
        >
        <!-- 首页 -->
        <LinearLayout 
            android:id="@+id/ll_menu_home"
		    android:layout_width="0dp"
		    android:layout_height="wrap_content"
		    android:layout_weight="1"
	    	android:orientation="vertical"
		    android:gravity="center"
		    android:padding="5dp"
		    android:onClick="clickMenu"
            >
            <ImageView
                android:id="@+id/iv_menu_home" 
			    android:layout_width="wrap_content"
			    android:layout_height="wrap_content"
                android:background="@drawable/menu_home"
                android:contentDescription="@string/app_name"/>
            <TextView 
                android:id="@+id/tv_menu_home"
			    android:layout_width="wrap_content"
			    android:layout_height="wrap_content"
                android:text="@string/menu_home"
                android:textColor="@color/menu_nomarl"
                android:textSize="12sp"
                />
        </LinearLayout>
        <!-- 热点 -->
        <LinearLayout 
            android:id="@+id/ll_menu_hot"
		    android:layout_width="0dp"
		    android:layout_height="wrap_content"
		    android:layout_weight="1"
		    android:gravity="center"
	    	android:orientation="vertical"
		    android:padding="5dp"
		    android:onClick="clickMenu"
            >
            <ImageView
                android:id="@+id/iv_menu_hot" 
			    android:layout_width="wrap_content"
			    android:layout_height="wrap_content"
                android:background="@drawable/menu_hot"
                android:contentDescription="@string/app_name"/>
            <TextView 
                android:id="@+id/tv_menu_hot"
			    android:layout_width="wrap_content"
			    android:layout_height="wrap_content"
                android:text="@string/menu_hot"
                android:textColor="@color/menu_nomarl"
                android:textSize="12sp"
                />
        </LinearLayout>
        <!-- 发言 -->
        <LinearLayout 
            android:id="@+id/ll_menu_talk"
		    android:layout_width="0dp"
		    android:layout_height="wrap_content"
		    android:layout_weight="1"
		    android:gravity="center"
	    	android:orientation="vertical"
		    android:padding="5dp"
		    android:onClick="clickMenu"
            >
            <ImageView
                android:id="@+id/iv_menu_talk" 
			    android:layout_width="wrap_content"
			    android:layout_height="wrap_content"
                android:background="@drawable/menu_talk"
                android:contentDescription="@string/app_name"/>
            <TextView 
                android:id="@+id/tv_menu_talk"
			    android:layout_width="wrap_content"
			    android:layout_height="wrap_content"
                android:text="@string/menu_talk"
                android:textColor="@color/menu_nomarl"
                android:textSize="12sp"
                />
        </LinearLayout>
        <!-- 我的 -->
        <LinearLayout 
            android:id="@+id/ll_menu_me"
		    android:layout_width="0dp"
		    android:layout_height="wrap_content"
		    android:layout_weight="1"
		    android:gravity="center"
	    	android:orientation="vertical"
		    android:padding="5dp"
		    android:onClick="clickMenu"
            >
            <ImageView
                android:id="@+id/iv_menu_me" 
			    android:layout_width="wrap_content"
			    android:layout_height="wrap_content"
                android:background="@drawable/menu_me"
                android:contentDescription="@string/app_name"
                />
            <TextView 
                android:id="@+id/tv_menu_me"
			    android:layout_width="wrap_content"
			    android:layout_height="wrap_content"
                android:text="@string/menu_me"
                android:textColor="@color/menu_nomarl"
                android:textSize="12sp"
                />
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

2）MainActivity中处理点击不同菜单之后，如何变换展示内容的，先贴上这个类的代码：

package com.zym.app_frame;

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

public class MainActivity extends FragmentActivity {
	// 布局管理器
	private FragmentManager fManager;

	private FragmentHome fragment_home;
	private FragmentHot fragment_hot;
	private FragmentTalk fragment_talk;
	private FragmentMe fragment_me;
	
	// 首页
	private ImageView iv_menu_home;
	private TextView tv_menu_home;
	
	// 热点
	private ImageView iv_menu_hot;
	private TextView tv_menu_hot;
	
	// 留言
	private ImageView iv_menu_talk;
	private TextView tv_menu_talk;

	// 我的
	private ImageView iv_menu_me;
	private TextView tv_menu_me;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		
		// 初始化组件
		initViews();
		// 默认先点中第一个“首页”
		clickMenu(findViewById(R.id.ll_menu_home));
	}

	private void initViews() {
		// 布局管理器
		fManager = getSupportFragmentManager();
		
		iv_menu_home = (ImageView)findViewById(R.id.iv_menu_home);
		tv_menu_home = (TextView)findViewById(R.id.tv_menu_home);
		
		iv_menu_hot = (ImageView)findViewById(R.id.iv_menu_hot);
		tv_menu_hot = (TextView)findViewById(R.id.tv_menu_hot);

		iv_menu_talk = (ImageView)findViewById(R.id.iv_menu_talk);
		tv_menu_talk = (TextView)findViewById(R.id.tv_menu_talk);

		iv_menu_me = (ImageView)findViewById(R.id.iv_menu_me);
		tv_menu_me = (TextView)findViewById(R.id.tv_menu_me);
	}
	
	/**
	 * 点击底部菜单事件
	 * @param v
	 */
	public void clickMenu(View v){
		FragmentTransaction trans = fManager.beginTransaction();
		int vID = v.getId();
		// 设置menu样式
		setMenuStyle(vID);
		// 隐藏所有的fragment
		hideFrament(trans);
		// 设置Fragment
		setFragment(vID,trans);
		trans.commit();
	}

	/**
	 * 隐藏所有的fragment(编程初始化状态)
	 * @param trans
	 */
	private void hideFrament(FragmentTransaction trans) {
		if(fragment_home!=null){
			trans.hide(fragment_home);
		}
		if(fragment_hot!=null){
			trans.hide(fragment_hot);
		}	
		if(fragment_talk!=null){
			trans.hide(fragment_talk);
		}
		if(fragment_me!=null){
			trans.hide(fragment_me);
		}
	}

	/**
	 * 设置menu样式
	 * @param vID
	 * @param trans
	 */
	private void setMenuStyle(int vID) {
		// 首页
		if(vID==R.id.ll_menu_home){
			iv_menu_home.setImageDrawable(getResources().getDrawable(R.drawable.menu_home_click));
			tv_menu_home.setTextColor(getResources().getColor(R.color.menu_click));
		}else {
			iv_menu_home.setImageDrawable(getResources().getDrawable(R.drawable.menu_home));
			tv_menu_home.setTextColor(getResources().getColor(R.color.menu_nomarl));
		}
		// 热点
		if(vID==R.id.ll_menu_hot){
			iv_menu_hot.setImageDrawable(getResources().getDrawable(R.drawable.menu_hot_click));
			tv_menu_hot.setTextColor(getResources().getColor(R.color.menu_click));
		}else {
			iv_menu_hot.setImageDrawable(getResources().getDrawable(R.drawable.menu_hot));
			tv_menu_hot.setTextColor(getResources().getColor(R.color.menu_nomarl));
		}
		// 发言
		if(vID==R.id.ll_menu_talk){
			iv_menu_talk.setImageDrawable(getResources().getDrawable(R.drawable.menu_talk_click));
			tv_menu_talk.setTextColor(getResources().getColor(R.color.menu_click));
		}else {
			iv_menu_talk.setImageDrawable(getResources().getDrawable(R.drawable.menu_talk));
			tv_menu_talk.setTextColor(getResources().getColor(R.color.menu_nomarl));
		}
		// 我的
		if(vID==R.id.ll_menu_me){
			iv_menu_me.setImageDrawable(getResources().getDrawable(R.drawable.menu_me_click));
			tv_menu_me.setTextColor(getResources().getColor(R.color.menu_click));
		}else {
			iv_menu_me.setImageDrawable(getResources().getDrawable(R.drawable.menu_me));
			tv_menu_me.setTextColor(getResources().getColor(R.color.menu_nomarl));
		}
	}

	/**
	 * 设置Fragment
	 * @param vID
	 * @param trans
	 */
	private void setFragment(int vID,FragmentTransaction trans) {
		switch (vID) {
		case R.id.ll_menu_home:
			if(fragment_home==null){
				fragment_home = new FragmentHome();
				trans.add(R.id.content, fragment_home);
			}else{
				trans.show(fragment_home);
			}
			break;
		case R.id.ll_menu_hot:
			if(fragment_hot==null){
				fragment_hot = new FragmentHot();
				trans.add(R.id.content, fragment_hot);
			}else{
				trans.show(fragment_hot);
			}
			break;
		case R.id.ll_menu_talk:
			if(fragment_talk==null){
				fragment_talk = new FragmentTalk();
				trans.add(R.id.content, fragment_talk);
			}else{
				trans.show(fragment_talk);
			}
			break;
		case R.id.ll_menu_me:
			if(fragment_me==null){
				fragment_me = new FragmentMe();
				trans.add(R.id.content, fragment_me);
			}else{
				trans.show(fragment_me);
			}
			break;
		default:
			break;
		}
	}
}

代码有注释，大家应该能看懂，需要注意的几点是：

<1>因为使用到了Fragment，所以MainActivity需要继承FragmentActivity

<2>具体加载到哪个Fragment才会去生成，不会一次性生成所有的Fragment

关于Fragment的使用，大家有不清楚的具体去参考相关资料。

3)Fragment代码

4个Fragment做的比较简单，写一个其他复制就可以，代码如下：

package com.zym.app_frame;

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

public class FragmentHome extends Fragment{

	private View view;// 需要返回的布局

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		if (view == null) {// 优化View减少View的创建次数
			view = inflater.inflate(R.layout.frag_home, null);
			return view;
		}
		return view;
	}
	
	
	
}

代码运行之后就直接可以看到效果了。

代码地址：

源代码