TabLayout自定义总结

1、常用属性

1、app:tabMode="scrollable"属性：

能实现滑动均分，当导航不足一屏的时候,去掉app:tabMode="scrollable"才能实现均分展示.

2、取消选中水波纹效果：

app:tabRippleColor=“@android:color/transparent”

3、改变整个TabLayout的背景色：
app:tabBackground=“@color/blue”

4、修改TabItem 字体大小：
app:tabTextAppearance=“@style/kd_enet_TabLayoutTextStyle”

5、圆角指示器：

参考：官方文档：

2、文字选中加粗

1、效果：

2、自定义TabItem 布局：kd_enet_tab_item.xml

3、代码控制选中字体的样式（粗细、颜色等）

private void initTab1() {
    String[] mTitles1 = {
            "业务应用", "指挥调度", "技术赋能"};

    TabLayout mTabLayout1 = nViewDataBinding.tabLayout1;

    //TabLayout的基本使用
    for (int i = 0; i < mTitles1.length; i++) {
        TabLayout.Tab tab = mTabLayout1.newTab();
        tab.setText(mTitles1[i]);//这里一定要设置，否则不显示
        tab.setCustomView(getTabView(i, mTitles1));//使用自定义Item布局
        mTabLayout1.addTab(tab);
    }
    //初始值默认选中
    updateTabTextView(mTabLayout1.getTabAt(mTabLayout1.getSelectedTabPosition()),
            true, R.color.kd_enet_cl_3F78DF, R.color.kd_enet_cl_333);

    mTabLayout1.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {
            updateTabTextView(tab, true, R.color.kd_enet_cl_3F78DF, R.color.kd_enet_cl_333);
        }

        @Override
        public void onTabUnselected(TabLayout.Tab tab) {
            updateTabTextView(tab, false, R.color.kd_enet_cl_3F78DF, R.color.kd_enet_cl_333);
        }

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

/**
* 使用自定义的Item布局
*/    
private View getTabView(int currentPosition, String[] strings) {
    View view = LayoutInflater.from(getContext()).inflate(R.layout.kd_enet_tab_item, null);
    TextView textView = view.findViewById(R.id.tab_item_textview);
    textView.setText(strings[currentPosition]);
    return view;
}

/**
* 每次选择更新Item样式
*/
private void updateTabTextView(TabLayout.Tab tab, boolean isSelect, int textSelectColor, int textUnSelectColor) {
    if (isSelect) {
        //选中加粗
        TextView tabSelect = tab.getCustomView().findViewById(R.id.tab_item_textview);
        tabSelect.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD));//加粗
        tabSelect.setTextColor(ContextCompat.getColor(getContext(), textSelectColor));//颜色
        tabSelect.setText(tab.getText());
    } else {
        TextView tabUnSelect = tab.getCustomView().findViewById(R.id.tab_item_textview);
        tabUnSelect.setTypeface(Typeface.defaultFromStyle(Typeface.NORMAL));
        tabUnSelect.setTextColor(ContextCompat.getColor(getContext(), textUnSelectColor));
        tabUnSelect.setText(tab.getText());
    }
}

注意：如果使用自定义布局，xml中文字相关的设置就不会生效了：

//这些样式设置不会生效了
app:tabSelectedTextColor="@color/kd_enet_cl_3F78DF"
app:tabTextColor="@color/kd_enet_cl_333" 

参考：TabLayout选中加粗

3、自定义指示器样式

1、效果图：

2、需求：圆角指示器，控制宽高：

3、自定义样式：R.drawable.kd_enet_indicator_14.xml

4、使用：

app:tabIndicator="@drawable/kd_enet_indicator_14"

4、自定义Tab样式

参考：TabLayout使用自定义的图文布局，每个Tab设置不同的背景

1、需求：TabLayout每个Tab选中背景不一样：左侧圆角、中间方块、右侧圆角。

2、页面布局：

3、代码控制每个Item的样式：

private final String[] titleArr = {"待完成", "待提交", "主动检查"};
private final int[] selectedArr = {R.drawable.icon_pending_selected, R.drawable.icon_uncommit_selected, R.drawable.icon_initiative_check_selected};
private final int[] unSelectedArr = {R.drawable.icon_pending_unselected, R.drawable.icon_uncommit_unselected, R.drawable.icon_initiative_check_unselected};
private TabLayout.OnTabSelectedListener onTabSelectedListener;

/**
* 导航栏布局：https://blog.csdn.net/xiaoshuxgh/article/details/80389570
 */
private void initLayout() {
    myFragment = new ArrayList<>();
    myFragment.add(new PendingFragment());
    myFragment.add(new UnCommitFragment());
    myFragment.add(new InitiativeCheckFragment());

    nViewDataBinding.viewpager.setAdapter(new FragmentPagerAdapter(getChildFragmentManager()) {
        @Override
        public Fragment getItem(int i) {
            return myFragment.get(i);
        }

        @Override
        public int getCount() {
            return myFragment.size();
        }

        @Nullable
        @Override
        public CharSequence getPageTitle(int position) {
            return titleArr[position];
        }
    });

    nViewDataBinding.viewpager.setOffscreenPageLimit(2);
    nViewDataBinding.tablayout.setupWithViewPager(nViewDataBinding.viewpager);

    // 注意：这个方法需要放在setupWithViewPager()后面
    for (int i = 0; i < nViewDataBinding.tablayout.getTabCount(); i++) {
        TabLayout.Tab tabView = nViewDataBinding.tablayout.getTabAt(i);
        tabView.setCustomView(getTabView(i));
        setTabBackground(tabView, false);
    }

    onTabSelectedListener = new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {
            //设置选中图标样式
            View tabView = tab.getCustomView();
            if (tabView == null) {
                LegoLog.d("tabView is null");
                return;
            }
            tabView.findViewById(R.id.tabicon).setBackgroundResource(selectedArr[tab.getPosition()]);

            //设置选中字体颜色
            TextView textView = tabView.findViewById(R.id.tabtext);
            textView.setTextColor(ContextCompat.getColor(getContext(), R.color.theme_color));
            setTabBackground(tab, true);
        }

        @Override
        public void onTabUnselected(TabLayout.Tab tab) {
            //设置未选中图标样式
            View tabView = tab.getCustomView();
            if (tabView == null) {
                LegoLog.d("tabView is null");
                return;
            }
            tabView.findViewById(R.id.tabicon).setBackgroundResource(unSelectedArr[tab.getPosition()]);

            //设置未选中字体颜色
            TextView textView = tabView.findViewById(R.id.tabtext);
            textView.setTextColor(ContextCompat.getColor(getContext(), R.color.cl_666));
            setTabBackground(tab, false);
        }

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

    nViewDataBinding.tablayout.addOnTabSelectedListener(onTabSelectedListener);
    setTabBackground(nViewDataBinding.tablayout.getTabAt(DEFAULT_POSITION), true);
}
    
/**
 * 使用自定义的View布局
 *
 * @param position
 * @return
 */
private View getTabView(int position) {
    View v = LayoutInflater.from(getContext()).inflate(R.layout.icon_view, null);
    ImageView iv = v.findViewById(R.id.tabicon);
    TextView tv = v.findViewById(R.id.tabtext);

    tv.setText(titleArr[position]);
    //设置默认页面
    if (position == DEFAULT_POSITION) {
        iv.setBackgroundResource(selectedArr[position]);
        tv.setTextColor(ContextCompat.getColor(getContext(), R.color.theme_color));
    } else {
        iv.setBackgroundResource(unSelectedArr[position]);
        tv.setTextColor(ContextCompat.getColor(getContext(), R.color.cl_666));
    }
    return v;
}

/**
 * TabLayout每个Tab选中背景不一样。
 * https://blog.csdn.net/qq_32606467/article/details/103068611
 *
 * @param tab
 * @param selected
 */
private void setTabBackground(TabLayout.Tab tab, boolean selected) {
    Drawable drawable = null;
    switch (tab.getPosition()) {
        case 0:
            if (selected) {
                drawable = ContextCompat.getDrawable(getContext(), R.drawable.tab_background_selected_0);
            } else {
                drawable = ContextCompat.getDrawable(getContext(), R.drawable.tab_background_unselected_0);
            }
            break;
        case 1:
            if (selected) {
                drawable = ContextCompat.getDrawable(getContext(), R.drawable.tab_background_selected_1);
            } else {
                drawable = ContextCompat.getDrawable(getContext(), R.drawable.tab_background_unselected_1);
            }
            break;
        case 2:
            if (selected) {
                drawable = ContextCompat.getDrawable(getContext(), R.drawable.tab_background_selected_2);
            } else {
                drawable = ContextCompat.getDrawable(getContext(), R.drawable.tab_background_unselected_2);
            }
            break;
    }

    ViewCompat.setBackground(tab.view, drawable);
}

5、动态修改Tab的标题

如果TabLayout 已经加载完成，这时候想修改某个Tab的标题；

5.1、使用的是原生的Tab：

nViewDataBinding.tabTodo.getTab(0).setText("");

5.2、修改自定义Tab的标题-1:

如果使用setCustomView()，设置了自定义的Tab；这个时候使用getTab(0).setText(“”);不会生效；

 List<String> titleList = new ArrayList<>();
 titleList.add("今日");
 titleList.add("本周");
 titleList.add("本月");
 titleList.add("本季");
 //TabLayout的基本使用
 for (int i = 0; i < titleList.size(); i++) {
     TabLayout.Tab tab = nViewDataBinding.tabTodo.newTab();
     tab.setText(titleList.get(i));
     tab.setCustomView(getTodoTabView(titleList.get(i), 14));
     nViewDataBinding.tabTodo.addTab(tab);
 }

需要通过getCustomView()获取到自定义的View，再进行值的修改：

TextView textView= nViewDataBinding.tabTodo.getTabAt(index).getCustomView().findViewById(R.id.tab_item_textview);
textView.setText(title + numStr);

5.3、修改自定义Tab的标题-2：

• 先removeAllTabs();
• 再重新添加Tab();

// 初始化Layout
List<String> titleList = new ArrayList<>();
titleList.add("今日");
titleList.add("本周");
titleList.add("本月");
titleList.add("本季");
//TabLayout的基本使用
for (int i = 0; i < titleList.size(); i++) {
    TabLayout.Tab tab = nViewDataBinding.tabTodo.newTab();
    tab.setText(titleList.get(i));
    tab.setCustomView(getTodoTabView(titleList.get(i), 14));
    nViewDataBinding.tabTodo.addTab(tab);
}

int selPosition = nViewDataBinding.tabTodo.getSelectedTabPosition();
nViewDataBinding.tabTodo.removeAllTabs();//1、先移除所有Tab
for (TodoCountResult result : todoCountResults) {
        String type = result.getType();
        String title = "";
        if ("today".equalsIgnoreCase(type)) {
            title = "今日";
        } else if ("week".equalsIgnoreCase(type)) {
            title = "本周";
        } else if ("month".equalsIgnoreCase(type)) {
            title = "本月";
        } else if ("quarter".equalsIgnoreCase(type)) {
            title = "本季";
        } else {
            LegoLog.d("未知的类型：" + type);
        }

        TabLayout.Tab tab = nViewDataBinding.tabTodo.newTab();
        tab.setText(title + numStr);// 设置新的标题
        tab.setCustomView(getTodoTabView(title + numStr, 14));
        nViewDataBinding.tabTodo.addTab(tab);//2、再重新添加Tab
   }