【Android】 Tablayout、XTablayout、FlycoTablayout的比较

心已赠人 2021-09-27 17:28 806阅读 0赞

现在很多app都有顶部可左右切换的导航栏，并且还带动画效果，随便看一个APP，比如CSDN手机app导航栏：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rldm5u_size_16_color_FFFFFF_t_70_pic_center]

要实现这种导航栏，可以使用Android原生的Tablayout也可以借助第三方框架实现。做过这个功能的同学一定知道，原生的tablayou局限很多，比如不能设置指示条宽度、不能定义tab的字体大小、不能设置选中tab字体加粗。不过也有一些通过反射来修改属性的解决方案，都不能完全解决问题。

原生Tablayout的支持的所有属性：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rldm5u_size_16_color_FFFFFF_t_70]  
可以看到它并不支持以上所说的样式修改，于是就有了第三方框架。最受欢迎的莫过于以下两个：

**[XTablayout框架github地址][XTablayout_github]**

**[FlycoTablayout框架github地址][FlycoTablayout_github]**

这两种框架都是对原生Tablayout进行了高度定制，可以灵活配置各项属性。但是对比以上两个框架，都有各自的一些问题，其中FlycoTablayout是问题最小的。XTablayout有个最大的问题就是滑动会卡顿，还有它的tab宽度是等分的，即每个tab的宽度是屏幕的宽度除以tab个数算出来的，因此如果tab数目比较少只有三四个的话，想让tab居左，就办不到了。要解决掉这两个问题就需要对源码大刀阔釜进行修改。

FlycoTablayout也有它的问题，不过问题就比较小了。FlycoTablayout是一个框架集合，它里面包含了三种tablayout，我们一般使用其中的SlidingTablayout就可以了。它的使用也很简单，在viewPager绑定adapter之后，只需要通过一行代码就可以与ViewPager进行绑定：  
`slidingTablayout.setViewPager(viewpager);`  
不需要再给slidingTablayout设置单独adapter。

下面来分析一下SlidingTablayout的问题。  
SlidingTablayout有两个小问题，比如不能设置选中字体颜色，这个问题比较好解决，加一个属性即可。使用的时候，推荐下载源码进行依赖，不要通过远程依赖的方式，方便对源码进行修改。还有一个小问题，想让默认选中的tab字体加粗，是无效的。这个问题在github中的issues已经有解决方法，但是仅仅是从外部来解决问题，并没有从源码角度来解决。

**下面来分析如何从源码彻底解决默认选中的tab字体未加粗的问题**

先看看它的setCurrentTab函数的源码：

//setter and getter
        public void setCurrentTab(int currentTab) { 
            this.mCurrentTab = currentTab;
            mViewPager.setCurrentItem(currentTab);
    }

里面仅仅是调用了 ViewPager的setCurrentItem函数，但是ViewPager.setCurrentItem(int position)并不会回调onPageSelected(int position)函数。  
所以源码中下面这个函数是不会走的，除非用户通过手势来切换。

@Override
        public void onPageSelected(int position) { 
            updateTabSelection(position);
        }

看看updateTabSelection函数的源码：

private void updateTabSelection(int position) { 
            for (int i = 0; i < mTabCount; ++i) { 
                View tabView = mTabsContainer.getChildAt(i);
                final boolean isSelect = i == position;
                TextView tab_title = (TextView) tabView.findViewById(R.id.tv_tab_title);
    
                if (tab_title != null) { 
                    tab_title.setTextColor(isSelect ? mTextSelectColor : mTextUnselectColor);
                    if (mTextBold == TEXT_BOLD_WHEN_SELECT) { 
                        tab_title.getPaint().setFakeBoldText(isSelect);
                    }
                }
            }
    }

这个函数里面设置了选中和未选中的样式。

我们只要在setCurrentTab函数中调用上面这个函数即可：

public void setCurrentTab(int currentTab) { 
            this.mCurrentTab = currentTab;
            mViewPager.setCurrentItem(currentTab);
            //加上下面这行代码
            updateTabSelection(currentTab);
        }

所以，SlidingTablayout是目前为止相对最好的解决方案，推荐使用SlidingTablayout来替代原生Tablayout。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rldm5u_size_16_color_FFFFFF_t_70_pic_center]: /images/20210923/6374312bd4be416986b78df3474d795c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rldm5u_size_16_color_FFFFFF_t_70]: /images/20210923/d9fa3c2ad6dc41ddb9242628b67cbff0.png
[XTablayout_github]: https://github.com/AndroidKun/XTabLayout
[FlycoTablayout_github]: https://github.com/H07000223/FlycoTabLayout