最近项目在做优化,而且也到年底了,工作量不多,所以趁着有空闲的时间,就静下心来写写博客,对项目中所用的技术进行一个巩固,也对自己所掌握的技术做一个分享。好了,废话不多说。今天分享的内容主要是用TasbHost实现底部底部导航栏效果。
具体的实现步骤:
- activity_main的布局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.wanxiaohulian.tabhostdemo.MainActivity">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</FrameLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
android:background="#000000"
android:layout_width="match_parent"
android:layout_height="1px">
</View>
<android.support.v4.app.FragmentTabHost
android:id="@+id/tabhost"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.v4.app.FragmentTabHost>
</RelativeLayout>
</LinearLayout>
2.底部导航栏TabHost的布局文件view_main_tab_layout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
android:padding="3dp">
<ImageView
android:id="@+id/iv_tab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/main_tab_act"/>
<TextView
android:id="@+id/tv_tab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="活动"
android:textColor="@color/main_tab_text"/>
</LinearLayout>
3.每一个FragmentTabHost所对应Fragment布局,总共有五个Fragment,这里只贴出其中一个,其他四个的布局类似
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- TODO: Update blank fragment layout -->
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:background="?attr/colorPrimary"
android:id="@+id/toolbar"
app:title="发现"
style="@style/Widget.App.Toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<TextView
android:id="@+id/tv_find"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
4.定义一个枚举类MainTab
public enum MainTab {
ACT(0, R.string.main_tab_name_act,R.drawable.main_tab_act, ActFragment.class),
FIND(1,R.string.main_tab_name_find,R.drawable.main_tab_find, FindFragment.class),
MALL(2,R.string.main_tab_name_mall,R.drawable.main_tab_mall,MallFragment.class),
MESSAGE(3,R.string.main_tab_name_message,R.drawable.main_tab_message, MessageFragment.class),
MY(4,R.string.main_tab_name_my,R.drawable.main_tab_user, MyFragment.class);
private int id;
private int resName;
private int resIcon;
private Class<?> clazz;
MainTab(int id, int resName, int resIcon, Class<?> clazz) {
this.id = id;
this.resName = resName;
this.resIcon = resIcon;
this.clazz = clazz;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public int getResName() {
return resName;
}
public void setResName(int resName) {
this.resName = resName;
}
public int getResIcon() {
return resIcon;
}
public void setResIcon(int resIcon) {
this.resIcon = resIcon;
}
public Class<?> getClazz() {
return clazz;
}
public void setClazz(Class<?> clazz) {
this.clazz = clazz;
}
}
5.接着在MainActivity实现具体的逻辑
- 初始化FragmentTabHost,关联容器
tabhost.setup(this,getSupportFragmentManager(),R.id.fl_container);
- 去除分割线
tabhost.setup(this,getSupportFragmentManager(),R.id.fl_container);
- 遍历枚举,找到view_main_tab_layout布局文件,设置不同的文字和图标
MainTab[] mainTabs = MainTab.values();
for(int i = 0 ; i < mainTabs.length ; i++){
MainTab tab = mainTabs[i];
View indicator = View.inflate(this,R.layout.view_main_tab_layout,null);
TextView tvTab = (TextView) indicator.findViewById(R.id.tv_tab);
ImageView ivTab = (ImageView) indicator.findViewById(R.id.iv_tab);
tvTab.setText(getString(tab.getResName()));
ivTab.setImageResource(tab.getResIcon());
- 创建Fragment选项卡
TabHost.TabSpec tabSpec = tabhost.newTabSpec(getString(tab.getResName()));
tabSpec.setIndicator(indicator);
- 将新的选项卡添加到TabHost中
Bundle bundle = new Bundle();
bundle.putString("key","content:"+ getString(tab.getResName()));
tabhost.addTab(tabSpec,tab.getClazz(),bundle);
tabhost.getTabWidget().getChildAt(i).setOnTouchListener(this);
6.最后在每一个Fragmnet中,接收Bundle传递过来的字符串,展示不同的内容,实现TabHost之间的选项卡切换
- onCreate中接收Bundle传递过来的字符串
Bundle arguments = getArguments();
if (arguments != null) {
mArg = arguments.getString("key");
}
- onViewCreated在页面设置不同的内容
if (!TextUtils.isEmpty(mArg)) {
mTvAct.setText(mArg);
}
7.效果图
以上就是如何用FragmentTabHost来实现底部导航栏。本人第一次写博客,写得不是很好。如果写的哪里有错误或者不足的地方,还请给位大神纠正。接下来的一遍博客主要是分享DrawerLayout来实现侧滑抽屉效果。