Android开发：FragmentTabHost实现底部菜单栏

关注

原创最新推荐文章于 2025-07-15 16:53:35 发布 1.6k 阅读 AI 写同款· GEO 优化 ›

安卓从零开发之购物商城（一）--底部菜单栏的的实现（FragmentTabHost) 前言：最近计划学习一个商城项目进行开发练手，所以准备写写记录一下，加深一下理解。（一）商城的效果界面大概与主流的手机购物app类似，万地高楼平地起，所以第一步先进行主界面的搭建，这边文章先实现底部菜单栏。这篇文章最后的效果图应该是这样：在这里这个功能主要是用FragmentTabHost和Selector选择器来实现；有如下几个步骤： FragmentTabHost初始化必须调用s 阅读详情

之前的写项目的底部菜单栏是用FragmentTabHost嵌套Fragment来实现的，自己觉得这种实现方式也是比较简单的，感觉也还不错，下面咱们就来实现一下：

效果图：

接下来，我们就开始实现它吧~

1、在我们想要实现这种效果的Activity中来做我们的工作，一般都是主页面，我取得名字叫SecondActivity，看下这个类的代码：

/**
* Created by Administrator on 2018/1/22.
* 主页index，这里就是我的主页面了，取名SecondActivity
*/

public class SecondActivity extends AppCompatActivity {
/**
*定义 FragmentTabhost
*/
private FragmentTabHost mTabHost;

/**
* 布局填充器
*/
private LayoutInflater mLayoutInflater;
private ImageView iv_shopCar;
private ImageView iv_main;
private LinearLayout ll_search;

/**
* Fragment数组界面，用Fragment做每一个菜单的对应显示页面，分别为Fragment1，
* Fragment2，Fragment3，Fragment4
*/

private Class mFragmentArray[] = {Fragment1.class, Fragment2.class,
Fragment3.class, Fragment4.class};
/**
* 存放图片数组，用作菜单按钮的图片
*/
private int mImageArray[] = {R.drawable.icon_about,
R.drawable.icon_category_48,
R.drawable.icon_about,
R.drawable.icon_about};

/**
* 选修卡文字
*/
private String mTextArray[] = {"首页", "分类", "购物车", "个人中心"};

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_second_main);
//秒杀倒计时，这个没用了，给注释了
// CountdownView countdownView = findViewById(R.id.countdownView);
// countdownView.start(9550000); // Millisecond
// for (int time = 0; time < 1000; time++) {
// countdownView.updateShow(time);
// }

initView();
}

/**
* 初始化组件
*/
private void initView() {
mLayoutInflater = LayoutInflater.from(this);

// 找到TabHost
mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
mTabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);
// 得到fragment的个数
int count = mFragmentArray.length;
for (int i = 0; i < count; i++) {
// 给每个Tab按钮设置图标、文字和内容
TabHost.TabSpec tabSpec = mTabHost.newTabSpec(mTextArray[i])
.setIndicator(getTabItemView(i));
// 将Tab按钮添加进Tab选项卡中
mTabHost.addTab(tabSpec, mFragmentArray[i], null);
// 设置Tab按钮的背景
mTabHost.getTabWidget().getChildAt(i)
.setBackgroundColor(getResources().getColor(R.color.white_gray));

}

//获取每个菜单对应的子view，然后通过菜单的子view来查找每个view中的控件id

final View tab1 = mTabHost.getTabWidget().getChildTabViewAt(0);
final View tab2 = mTabHost.getTabWidget().getChildTabViewAt(1);
final View tab3 = mTabHost.getTabWidget().getChildTabViewAt(2);
final View tab4 = mTabHost.getTabWidget().getChildTabViewAt(3);
final TextView tv_1 = tab1.findViewById(R.id.textview);
final TextView tv_2 = tab2.findViewById(R.id.textview);
final TextView tv_3 = tab3.findViewById(R.id.textview);

final TextView tv_4 = tab4.findViewById(R.id.textview);

//子菜单的点击事件

tab1.setOnClickListener(new View.OnClickListener() {
@Override

public void onClick(View v) {

//设置子菜单中字体颜色

// ll_search.setBackgroundColor(getResources().getColor(R.color.white_gray));
ll_search.setVisibility(View.VISIBLE);
tv_1.setTextColor(getResources().getColor(R.color.red));
tv_2.setTextColor(getResources().getColor(R.color.black));
tv_3.setTextColor(getResources().getColor(R.color.black));
tv_4.setTextColor(getResources().getColor(R.color.black));
tab1.setBackgroundColor(getResources().getColor(R.color.light_gray));
tab2.setBackgroundColor(getResources().getColor(R.color.white_gray));
tab3.setBackgroundColor(getResources().getColor(R.color.white_gray));
tab4.setBackgroundColor(getResources().getColor(R.color.white_gray));
mTabHost.setCurrentTab(0);
}
});
tab2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// ll_search.setBackgroundColor(getResources().getColor(R.color.white_gray));
ll_search.setVisibility(View.VISIBLE);
tv_1.setTextColor(getResources().getColor(R.color.black));
tv_2.setTextColor(getResources().getColor(R.color.red));
tv_3.setTextColor(getResources().getColor(R.color.black));
tv_4.setTextColor(getResources().getColor(R.color.black));
tab1.setBackgroundColor(getResources().getColor(R.color.white_gray));
tab2.setBackgroundColor(getResources().getColor(R.color.light_gray));
tab3.setBackgroundColor(getResources().getColor(R.color.white_gray));
tab4.setBackgroundColor(getResources().getColor(R.color.white_gray));
mTabHost.setCurrentTab(1);
}
});
tab3.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// ll_search.setBackgroundColor(getResources().getColor(R.color.white_gray));
ll_search.setVisibility(View.VISIBLE);
tv_1.setTextColor(getResources().getColor(R.color.black));
tv_2.setTextColor(getResources().getColor(R.color.black));
tv_3.setTextColor(getResources().getColor(R.color.red));
tv_4.setTextColor(getResources().getColor(R.color.black));
tab1.setBackgroundColor(getResources().getColor(R.color.white_gray));
tab2.setBackgroundColor(getResources().getColor(R.color.white_gray));
tab3.setBackgroundColor(getResources().getColor(R.color.light_gray));
tab4.setBackgroundColor(getResources().getColor(R.color.white_gray));
mTabHost.setCurrentTab(2);
}
});
tab4.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// ll_search.setBackgroundColor(getResources().getColor(R.color.red));
ll_search.setVisibility(View.GONE);
tv_1.setTextColor(getResources().getColor(R.color.black));
tv_2.setTextColor(getResources().getColor(R.color.black));
tv_3.setTextColor(getResources().getColor(R.color.black));
tv_4.setTextColor(getResources().getColor(R.color.red));
tab1.setBackgroundColor(getResources().getColor(R.color.white_gray));
tab2.setBackgroundColor(getResources().getColor(R.color.white_gray));
tab3.setBackgroundColor(getResources().getColor(R.color.white_gray));
tab4.setBackgroundColor(getResources().getColor(R.color.light_gray));
mTabHost.setCurrentTab(3);
}

});

//设置页面初始化时，默认选中的菜单

tv_1.setTextColor(getResources().getColor(R.color.red));
tv_2.setTextColor(getResources().getColor(R.color.black));
tv_3.setTextColor(getResources().getColor(R.color.black));
tv_4.setTextColor(getResources().getColor(R.color.black));
tab1.setBackgroundColor(getResources().getColor(R.color.light_gray));
tab2.setBackgroundColor(getResources().getColor(R.color.white_gray));
tab3.setBackgroundColor(getResources().getColor(R.color.white_gray));
tab4.setBackgroundColor(getResources().getColor(R.color.white_gray));

//iv_shopCar ,iv_main ,ll_search ,这三项是顶端标题栏中的控件，可以不用理会，跟实现底部菜单栏没关系
iv_shopCar = findViewById(R.id.iv_shopCar);
iv_main = findViewById(R.id.iv_main);
ll_search = findViewById(R.id.ll_search);

iv_shopCar.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// ll_search.setBackgroundColor(getResources().getColor(R.color.white_gray));
ll_search.setVisibility(View.VISIBLE);
tv_1.setTextColor(getResources().getColor(R.color.black));
tv_2.setTextColor(getResources().getColor(R.color.black));
tv_3.setTextColor(getResources().getColor(R.color.red));
tv_4.setTextColor(getResources().getColor(R.color.black));
tab1.setBackgroundColor(getResources().getColor(R.color.white_gray));
tab2.setBackgroundColor(getResources().getColor(R.color.white_gray));
tab3.setBackgroundColor(getResources().getColor(R.color.light_gray));
tab4.setBackgroundColor(getResources().getColor(R.color.white_gray));
mTabHost.setCurrentTab(2);
}
});
iv_main.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// ll_search.setBackgroundColor(getResources().getColor(R.color.red));
ll_search.setVisibility(View.GONE);
tv_1.setTextColor(getResources().getColor(R.color.black));
tv_2.setTextColor(getResources().getColor(R.color.black));
tv_3.setTextColor(getResources().getColor(R.color.black));
tv_4.setTextColor(getResources().getColor(R.color.red));
tab1.setBackgroundColor(getResources().getColor(R.color.white_gray));
tab2.setBackgroundColor(getResources().getColor(R.color.white_gray));
tab3.setBackgroundColor(getResources().getColor(R.color.white_gray));
tab4.setBackgroundColor(getResources().getColor(R.color.light_gray));
mTabHost.setCurrentTab(3);
}
});
}

/**
* 给每个Tab按钮设置图标和文字
*/
private View getTabItemView(int index) {
View view = mLayoutInflater.inflate(R.layout.tab_item_view, null);
ImageView imageView = (ImageView) view.findViewById(R.id.imageview);
imageView.setImageResource(mImageArray[index]);
TextView textView = (TextView) view.findViewById(R.id.textview);
textView.setText(mTextArray[index]);
return view;
}

/**
* 启动SecondActivity
*
* @param context 上下文
*/
public static void startActivity(Context context) {
Intent intent = new Intent();
intent.setClass(context, SecondActivity.class);
context.startActivity(intent);
}

}

2、布局文件 activity_second_main

<?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">
<include layout="@layout/activity_title" />
<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="@color/white_gray">
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="0" />
</android.support.v4.app.FragmentTabHost>

</LinearLayout>

3、自定义顶端标题栏布局文件 activity_title

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/ll_search"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="@color/white_gray"
android:orientation="horizontal">
<ImageView
android:id="@+id/iv_main"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_gravity="center_vertical"
android:layout_margin="@dimen/margin_5"
android:src="@drawable/icon_user_48" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="35dp"
android:layout_gravity="center_vertical"
android:layout_marginLeft="@dimen/margin_10"
android:layout_marginRight="@dimen/margin_10"
android:layout_weight="1"
android:background="@color/white"
android:orientation="horizontal">
<ImageView
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_gravity="center_vertical"
android:src="@drawable/search" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="搜索你想要的" />
</LinearLayout>
<ImageView
android:id="@+id/iv_shopCar"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_gravity="center_vertical"
android:layout_margin="@dimen/margin_5"
android:src="@drawable/icon_shop_car_48" />

</LinearLayout>

4、用于显示菜单的布局文件 tab_item_view

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical">

<ImageView
android:id="@+id/imageview"
android:layout_width="35dp"
android:layout_height="35dp"
android:focusable="false"
android:padding="3dp" />

<TextView
android:id="@+id/textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="10sp" />