在做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>
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;
}
}
代码运行之后就直接可以看到效果了。
代码地址：