Android使用FragmentTabHost实现底部导航栏切换卡
一、编写布局
编写activity_main.xml 布局
编写footer_tabs.xml (这个布局相当于底部导航栏的一个图标和对应标题的组合体，底部导航栏一共5个，那么这个布局文件就复用了5次)
二、在drawable添加10张图片
https://www.iconfont.cn/ 此网站可以搜索并下载很好看的图标，颜色、大小也可以自定义
我命名图片名称为：
foot_fond_normal.png
foot_found_light.png
foot_news_light.png
foot_news_normal.png
foot_out_light.png
foot_out_normal.png
foot_read_light.png
foot_read_normal.png
foot_vdio_light.png
foot_vdio_normal.png
三、添加颜色配置
在values文件夹的colors.xml文件，添加下面两种颜色
#ff0000
#AEAEAE
四、编写TabDb类
这个类用来指定底部导航栏的图标路径、标题文字、各个Fragment页面对应的类
public class TabDb {
public static String[] getTabsTxt(){
String[] tabs={"新闻","读物","媒体","发现","我的"};
return tabs;
}
public static int[] getTabsImg(){
int[] ids={R.drawable.foot_news_normal,R.drawable.foot_read_normal,R.drawable.foot_vdio_normal,R.drawable.foot_fond_normal,R.drawable.foot_out_normal};
return ids;
}
public static int[] getTabsImgLight(){
int[] ids={R.drawable.foot_news_light,R.drawable.foot_read_light,R.drawable.foot_vdio_light,R.drawable.foot_found_light,R.drawable.foot_out_light};
return ids;
}
public static Class[] getFragments(){
Class[] clz={NewsFragment.class,ReadFragment.class,VideoFragment.class,FoundFragment.class,OwnerFragment.class};
return clz;
}
}五、编写所有Fragment类
这5个Fragment是要展示数据的界面
FoundFragment
NewsFragment
OwnerFragment
ReadFragment
VideoFragment
public class FoundFragment extends Fragment {
@Override
public void onAttach(Context activity) {
// TODO Auto-generated method stub
super.onAttach(activity);
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// TODO Auto-generated method stub
TextView tvTitle=new TextView(super.getActivity());
tvTitle.setText("FoundFragment");
tvTitle.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
tvTitle.setGravity(Gravity.CENTER);
tvTitle.setTextSize(30);
return tvTitle;
}
@Override
public void setArguments(Bundle args) {
// TODO Auto-generated method stub
super.setArguments(args);
}
}public class NewsFragment extends Fragment {
@Override
public void onAttach(Context activity) {
// TODO Auto-generated method stub
super.onAttach(activity);
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// TODO Auto-generated method stub
TextView tvTitle=new TextView(super.getActivity());
tvTitle.setText("NewsFragment");
tvTitle.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
tvTitle.setGravity(Gravity.CENTER);
tvTitle.setTextSize(30);
return tvTitle;
}
@Override
public void setArguments(Bundle args) {
// TODO Auto-generated method stub
super.setArguments(args);
}
}public class OwnerFragment extends Fragment {
@Override
public void onAttach(Context activity) {
// TODO Auto-generated method stub
super.onAttach(activity);
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// TODO Auto-generated method stub
TextView tvTitle=new TextView(super.getActivity());
tvTitle.setText("OwnerFragment");
tvTitle.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
tvTitle.setGravity(Gravity.CENTER);
tvTitle.setTextSize(30);
return tvTitle;
}
@Override
public void setArguments(Bundle args) {
// TODO Auto-generated method stub
super.setArguments(args);
}
}public class ReadFragment extends Fragment {
@Override
public void onAttach(Context activity) {
// TODO Auto-generated method stub
super.onAttach(activity);
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// TODO Auto-generated method stub
TextView tvTitle=new TextView(super.getActivity());
tvTitle.setText("ReadFragment");
tvTitle.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
tvTitle.setGravity(Gravity.CENTER);
tvTitle.setTextSize(30);
return tvTitle;
}
@Override
public void setArguments(Bundle args) {
// TODO Auto-generated method stub
super.setArguments(args);
}
}
public class VideoFragment extends Fragment {
@Override
public void onAttach(Context activity) {
// TODO Auto-generated method stub
super.onAttach(activity);
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// TODO Auto-generated method stub
TextView tvTitle=new TextView(super.getActivity());
tvTitle.setText("VideoFragment");
tvTitle.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
tvTitle.setGravity(Gravity.CENTER);
tvTitle.setTextSize(30);
return tvTitle;
}
@Override
public void setArguments(Bundle args) {
// TODO Auto-generated method stub
super.setArguments(args);
}
}六、编写MainActivity
public class MainActivity extends FragmentActivity implements TabHost.OnTabChangeListener {
private FragmentTabHost tabHost;
protected void onCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//tabHost属于父元素，表示整个界面，找到布局文件的tabhost，然后赋值给tabHost，这样就可以用tabHost对象来操作布局了
tabHost=(FragmentTabHost)super.findViewById(android.R.id.tabhost);
//在tabHost创建FragmentLayout , contentLayout的id就是布局文件里面FragmentLayout的id，如果在布局文件FragmentLayout添加子元素，那么实际上相互切换的3个FragmentLayout都会被添加子元素
tabHost.setup(this,super.getSupportFragmentManager(),R.id.contentLayout);
//getTabWidget()方法表示获取切换卡，setDividerDrawable(null)表示没有分割线
tabHost.getTabWidget().setDividerDrawable(null);
//点击下面5个图标的时候会变色，就是setOnTabChangedListener(this)方法影响的，如果没有这个方法，那么点击图标不会变色
tabHost.setOnTabChangedListener(this);
initTab();
}
//initTab()方法表示没有点击图标的时候的初始状态
private void initTab() {
//tabs就是下面导航栏的“新闻”，“读物”，“媒体” 。。。的5个图标下面的文字，但是觉得不好看，就直接通过设置布局把文字隐藏了
String tabs[]=TabDb.getTabsTxt();
for(int i=0;i
运行效果
