關於選項卡三方庫FlycoTabLayout的使用及修改

語言: CN / TW / HK

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