之前的写项目的底部菜单栏是用FragmentTabHost嵌套Fragment来实现的,自己觉得这种实现方式也是比较简单的,感觉也还不错,下面咱们就来实现一下:
效果图:
11
接下来,我们就开始实现它吧~
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" />
</LinearLayout>
5、Fragment根据自己项目的需求,自己定义即可。
到这里FragmentTabHost实现底部菜单栏就实现了,是不是很简单呢?