关于选项卡三方库FlycoTabLayout的使用及修改

语言: CN / TW / HK
时间 2021-10-27 11:15:51
主题:

theme: channing-cyan

小知识，大挑战！本文正在参与「程序员必备小知识」创作活动

本文已参与 「掘力星计划」 ，赢取创作大礼包，挑战创作激励金。

前言

上篇文章属实丢人,因为英文的不了解导致最后白白浪费一堆时间,不然我早就摸一天鱼了,经过几小时的深思熟虑我打算挽回我的颜面,来介绍我好久以前就在用的选项卡库-FlycoTabLayout

简单使用

Xml

```

<com.flyco.tablayout.SlidingTabLayout
    android:layout_width="match_parent"
    android:layout_height="50dp"
    app:tl_indicator_color="@color/teal_200"
    app:tl_indicator_height="10dp"
    app:tl_indicator_corner_radius="8dp"
    app:tl_tab_space_equal="true"
    android:id="@+id/flyco"
    app:tl_textSelectColor="#E91E63"
    app:layout_constraintTop_toTopOf="parent"
    app:tl_textUnselectColor="@color/black"/>

<androidx.viewpager.widget.ViewPager
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:id="@+id/vp"
    app:layout_constraintTop_toBottomOf="@id/flyco"
    app:layout_constraintBottom_toBottomOf="parent"/>

```

Activity

``` public class FlycoActivity extends AppCompatActivity {

private SlidingTabLayout mFlyco;
private ViewPager mVp;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_flyco);
    initView();
}

private void initView() {
    mFlyco = findViewById(R.id.flyco);
    mVp = findViewById(R.id.vp);

    String[] titles = new String[5];
    ArrayList<Fragment> fragments = new ArrayList<>();
    for (int i = 0; i < 5; i++) {
        titles[i] = ("标题" + i);
        fragments.add(new FlycoFragment());
    }

    mFlyco.setViewPager(mVp, titles, this, fragments);
}

} ```

完事,看效果

flyco1.gif

哇,哇哇,哇哇哇!!! 太特么丑了!这是我xml中属性设置问题,不在意细节的话Activity代码非常少,简直是懒人必备,外包必备啊.仅需要一个viewpager,标题,上下文,fragment,直接满足项目中常见的页面,心动不如行动快来使用吧!

咳咳,扯远了,一般来说项目中都有这种页面,而且要求滑到相应选项卡,就要给设置加粗,虽然库的作者开放了这个设置的api,但是设置了只有滑动一下才会开始加粗,而且最后一次更新是2016年,属实拉胯嗷,我们要么在监听里面操作,要么深入源码来操作了,今天咱们接着深入源码,gogogo!

操作

首先啊我们分析一下这个玩意,我估计封装的LinearLayout,然后噼里啪啦给我们封装了设置Viewpager的一系列操作.首先就是要看SetAdapter这个方法,我们先进去找找吧.

image.png

好家伙,一上来就找到了关键的地方,这个库开放了设置选中字体颜色和非选中字体颜色,咱们瞅瞅在哪弄得,然后加粗也跟人家在相同的地方操作.

我来跟大家讲讲我是怎么快速找到相应属性的

image.png

首先进入xml,然后按住你的ctrl单击鼠标左键,就会进入value.xml,里面都是这个库的一些属性,然后复制我们单击的属性 tl_textSelectColor 进入 SlidingTabLayout 搜索一下

image.png

看这命名,多么的令人愉快,如果于勒叔叔...

好了找到目的代码直接搬过来开始改造吧

库的作者自己定义了一个方法 notifyDataSetChanged 里面主要是更新数据,更新文本状态,将Tab添加到LinearLayout中,为啥是Linearlyaout因为他上面的Tab就是封装的LienarLayout

``` private void updateTabStyles() { for (int i = 0; i < mTabCount; i++) { View v = mTabsContainer.getChildAt(i); // v.setPadding((int) mTabPadding, v.getPaddingTop(), (int) mTabPadding, v.getPaddingBottom()); TextView tv_tab_title = (TextView) v.findViewById(com.flyco.tablayout.R.id.tv_tab_title); if (tv_tab_title != null) { tv_tab_title.setTextColor(i == mCurrentTab ? mTextSelectColor : mTextUnselectColor); tv_tab_title.setTextSize(TypedValue.COMPLEX_UNIT_PX, mTextsize); tv_tab_title.setPadding((int) mTabPadding, 0, (int) mTabPadding, 0); if (mTextAllCaps) { tv_tab_title.setText(tv_tab_title.getText().toString().toUpperCase()); }

            if (mTextBold == TEXT_BOLD_BOTH) {
                tv_tab_title.getPaint().setFakeBoldText(true);
            } else if (mTextBold == TEXT_BOLD_NONE) {
                tv_tab_title.getPaint().setFakeBoldText(false);
            }else{
                tv_tab_title.getPaint().setFakeBoldText(mCurrentTab==i);
            }

        }
    }
}

```

然后还有第二种方法,一上来第一个不加粗是因为ViewPager监听没有走Select这个回调,我们手动调用下就好了

mFlyco.onPageSelected(0);

在Activity添加这一行,手动给OnPageSelected设置一个回调都可以实现上面所说的第一个不加粗问题.

哈哈哈哈哈.我不愧是个大水b.虽然我们浪费一堆精力来修改源码但是我们收获了很多啊,以前我看源码的时候才知道原来setFakeBoldText也能给字体加粗啊,而且没那么突兀,显得很自然.我们也不是毫无收获,不是嘛.

好了,今天就到这了,拜拜┏(＾0＾)┛

差点忘了效果图

flyco2.gif

「」