创建底部导航栏
TabHost
TabHost
组件可以在界面中存放多个选项卡。
TabSpec
代表了选项卡界面,添加一个TabSpec
即可添加到TabHost
。
- 创建选项卡:
newTabSpec(String tag)
,创建一个选项卡 - 添加选项卡:
addTab(tabSpec)
;
FragmentTabHost继承关系图
分析图
效果图
使用步骤:
1. 在xml中引用
<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<FrameLayout
android:id="@+id/realtabcontent"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="@color/bg_color">
</FrameLayout>
<com.study.wumeng.cniaoshop.widget.FragmentTabHost
android:id="@android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white">
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="0">
</FrameLayout>
</com.study.wumeng.cniaoshop.widget.FragmentTabHost>
</LinearLayout>
注意,
- 这个FragmentTabHost是继承自原生的FragmentTabHost的,原生的FragmentTabHost每次切换,Fragment都会走一遍onCreate()和onResume()方法
- FragmentTabHost控件的id必须是android:id="@android:id/tabhost"
- FragmentTabHost里面的FrameLayout的id必须是android:id="@android:id/tabcontent"
- FragmentTabHost上面的FrameLayout才是我们真正使用的
- 对于布局,必须要这样写。
2. 创建Tab类
Tab类中包含标题,图片,和类
public class Tab {
/**
* 文字
*/
private int title;
/**
* 图标
*/
private int icon;
/**
* 对应的Fragment
*/
private Class fragment;
public Tab(int title, int icon, Class fragment) {
this.title = title;
this.icon = icon;
this.fragment = fragment;
}
public int getTitle() {
return title;
}
public void setTitle(int title) {
this.title = title;
}
public int getIcon() {
return icon;
}
public void setIcon(int icon) {
this.icon = icon;
}
public Class getFragment() {
return fragment;
}
public void setFragment(Class fragment) {
this.fragment = fragment;
}
}
3. 创建各个Tab实例
// 主页
Tab tabHome = new Tab(R.string.home, R.drawable.selector_icon_home, HomeFragment.class);
// 热卖
Tab tabHot = new Tab(R.string.hot, R.drawable.selector_icon_hot, HotFragment.class);
// 分类
Tab tabCategory = new Tab(R.string.category, R.drawable.selector_icon_category, CategoryFragment.class);
// 购物车
Tab tabCart = new Tab(R.string.cart, R.drawable.selector_icon_cart, CartFragment.class);
// 我的
Tab tabMine = new Tab(R.string.mine, R.drawable.selector_icon_mine, MineFragment.class);
mTabs.add(tabHome);
mTabs.add(tabHot);
mTabs.add(tabCategory);
mTabs.add(tabCart);
mTabs.add(tabMine);
4. 调用setup函数
mTabhost = findViewById(android.R.id.tabhost);
mTabhost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);
如果使用findViewById加载TabHost,则在添加选项卡之前setup()函数。
5. 将TabSpec添加入TabHost中
for (Tab tab : mTabs) {
// 创建一个与选项卡主机关联的TabSpec
TabHost.TabSpec tabSpec = mTabhost.newTabSpec(getString(tab.getTitle()));
// 将视图指定为选项卡指示符
tabSpec.setIndicator(buildIndicator(tab));
// 将选项卡添加进选项卡主机里
mTabhost.addTab(tabSpec,tab.getFragment(),null);
}
private View buildIndicator(Tab tab) {
View view = mInflater.inflate(R.layout.tab_indicator,null);
ImageView img = view.findViewById(R.id.icon_tab);
TextView text = view.findViewById(R.id.text_indicator);
img.setBackgroundResource(tab.getIcon());
text.setText(tab.getTitle());
return view;
}
// 设置item之间的分割线的,这里设置为无
mTabhost.getTabWidget().setShowDividers(LinearLayout.SHOW_DIVIDER_NONE);
// 设置当前默认选中的tab
mTabhost.setCurrentTab(0);
TabSpec的布局为:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="3dp"
android:paddingBottom="3dp"
android:gravity="center"
android:layout_gravity="center">
<ImageView
android:id="@+id/icon_tab"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/text_indicator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/selector_tab_text"
android:layout_marginTop="2dp"/>
</LinearLayout>
Color文件夹下的字体选择器
对于布局中字体选择器,即在不同状态下,显示不同颜色的字体。需要在res文件夹下创建一个color文件夹,专门用来放置。