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;
    }