【Android】 Tablayout、XTablayout、SlidingTablayout的比较

现在很多app都有顶部可左右切换的导航栏,并且还带动画效果,随便看一个APP,比如腾讯新闻首页顶部的导航栏:
在这里插入图片描述
要实现这种导航栏,可以使用Android原生的Tablayout也可以借助第三方框架实现。做过这个功能的同学一定知道,原生的tablayou局限很多,比如不能设置指示条宽度、不能定义tab的字体大小、不能设置选中tab字体加粗。不过也有一些通过反射来修改属性的解决方案,都不能完全解决问题。

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

XTablayout框架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。

原创文章 56 获赞 44 访问量 9万+

猜你喜欢

转载自blog.csdn.net/devnn/article/details/83828905