android 使用TabLayout 自定义View布局作为底部菜单栏

开发工具：android studio


本文使用ViewPager + TabLayout 演示菜单功能，如图所示



1.TabLayout 使用的是

android.support.design.widget.TabLayout

所以需要在项目 根build.grade 中 引入 

compile 'com.android.support:design:23.2.1'

引入版本根据项目自行修改即可。

2.直接上代码

@BindView(R.id.tlTitle)
TabLayout tlTitle;

// 绑定TabLayout 与 ViewPager 关联
tlTitle.setupWithViewPager(avp);
// 设置初始化菜单
tlTitle.getTabAt(0).setCustomView(addTabIcon("首页", true, R.drawable.iv_menu1_choosed));
tlTitle.getTabAt(1).setCustomView(addTabIcon("事迹", false, R.drawable.iv_menu2_normal));
tlTitle.getTabAt(2).setCustomView(addTabIcon("祭拜", false, R.drawable.iv_menu5_normal));
tlTitle.getTabAt(3).setCustomView(addTabIcon("留言", false, R.drawable.iv_menu4_normal));

tlTitle.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
// 选中
if (tab == tlTitle.getTabAt(0)) {
setTabIcon(tab.getCustomView(), "首页",true, R.drawable.iv_menu1_choosed);
avp.setCurrentItem(0);
} else if (tab == tlTitle.getTabAt(1)) {

setTabIcon(tab.getCustomView(), "事迹",true, R.drawable.iv_menu2_choosded);
avp.setCurrentItem(1);
} else if (tab == tlTitle.getTabAt(2)) {

setTabIcon(tab.getCustomView(), "祭拜", true,R.drawable.iv_menu5_choosed);

avp.setCurrentItem(2);
}else if (tab == tlTitle.getTabAt(3)){
setTabIcon(tab.getCustomView(), "留言",true, R.drawable.iv_menu4_choosed);
avp.setCurrentItem(3);
}
}

@Override
public void onTabUnselected(TabLayout.Tab tab) {
// 未选中
if (tab == tlTitle.getTabAt(0)) {
setTabIcon(tab.getCustomView(), "首页",false, R.drawable.iv_menu1_normal);
} else if (tab == tlTitle.getTabAt(1)) {
setTabIcon(tab.getCustomView(), "事迹", false,R.drawable.iv_menu2_normal);

} else if (tab == tlTitle.getTabAt(2)) {
setTabIcon(tab.getCustomView(), "祭拜", false,R.drawable.iv_menu5_normal);
}else if (tab == tlTitle.getTabAt(3)){
setTabIcon(tab.getCustomView(), "留言",false, R.drawable.iv_menu4_normal);
}
}

@Override
public void onTabReselected(TabLayout.Tab tab) {

}
});

/****
* 创建自定义的菜单视图
* @param name 名字
* @param select true 选中 false 未选中
* @param iconID 图标
* @return
*/
private View addTabIcon(String name,  boolean select,int iconID){
// 自定义视图
View newtab =  LayoutInflater.from(this).inflate(R.layout.venue_tab,null);
TextView tv = (TextView) newtab.findViewById(R.id.tvTitle);
ImageView im = (ImageView)newtab.findViewById(R.id.ivIocn);
im.setImageResource(iconID);
String html = select? "<font color=\"#d8b36b\">"+name+"</font>":"<font color=\"#999999\">"+name+"</font>" ;
tv.setText(Html.fromHtml(html));
return newtab;
}

/***
* 设置自定义菜单视图内容
* @param newtab 视图
* @param name 名字
* @param select true 选中 false 未选中
* @param iconID 图标
* @return
*/
private View setTabIcon( View newtab, String name, boolean select,int iconID){
TextView tv = (TextView) newtab.findViewById(R.id.tvTitle);
ImageView im = (ImageView)newtab.findViewById(R.id.ivIocn);
im.setImageResource(iconID);
String html = select? "<font color=\"#d8b36b\">"+name+"</font>":"<font color=\"#999999\">"+name+"</font>" ;
tv.setText(Html.fromHtml(html));
return newtab;
}