简单学习FlycoTabLayout框架

1、添加依赖

implementation 'com.flyco.tablayout:FlycoTabLayout_Lib:2.1.2@aar'

2、SlidingTabLayout

• 布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tl="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/bg"
    android:orientation="vertical">

    <com.flyco.tablayout.SlidingTabLayout
        android:id="@+id/tl"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:background="@color/colorWhite"
        tl:tl_indicator_color="@color/colorRed"
        tl:tl_indicator_corner_radius="1.5dp"
        tl:tl_indicator_height="3dp"
        tl:tl_indicator_width="30dp"
        tl:tl_textSelectColor="@color/colorRed"
        tl:tl_textUnselectColor="@color/fontColorLight" />

    <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

• 声明

private ArrayList<Fragment> mFragments = new ArrayList<>();
private String[] mTitles = {"程序人生", "移动开发", "前端", "数据库"};

• fragment中使用

        for (String mTitles){
            mFragments.add(new xxxFragment);
        }

        ViewPager vp = view.findViewById(R.id.vp);
        vp.setAdapter(new ViewPagerAdapter(getChildFragmentManager(),mFragments,mTitles));

        SlidingTabLayout tabLayout = view.findViewById(R.id.tl);
        tabLayout.setViewPager(vp, mTitles, Objects.requireNonNull(getActivity()), mFragments);
        vp.setCurrentItem(0);

• activity中使用

        for (String mTitles){
            mFragments.add(new xxxFragment);
        }

        ViewPager vp = findViewById(R.id.vp);
        vp.setAdapter(new ViewPagerAdapter(getSupportFragmentManager(),mFragments,mTitles));

        SlidingTabLayout tabLayout = findViewById(R.id.tl);
        tabLayout.setViewPager(vp, mTitles, this, mFragments);
        vp.setCurrentItem(0);

• ViewPagerAdapter(新建一个类把下面的粘进去)

public class ViewPagerAdapter extends FragmentPagerAdapter {

    private ArrayList<Fragment> mFragments;
    private String[] mTitles;

    public ViewPagerAdapter(FragmentManager fm,ArrayList<Fragment> mFragments,String[] mTitles) {
        super(fm);
        this.mFragments=mFragments;
        this.mTitles=mTitles;
    }

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

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

    @Override
    public Fragment getItem(int position) {
        return mFragments.get(position);
    }

}

• 效果图
  

• 其他样式(分别对应第一张样图的样式)

            <com.flyco.tablayout.SlidingTabLayout
                android:id="@+id/tl_1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#666666"
                android:paddingBottom="15dp"
                android:paddingTop="15dp"
                tl:tl_indicator_gravity="TOP"
                tl:tl_textBold="SELECT"
                tl:tl_underline_color="#1A000000"
                tl:tl_underline_gravity="TOP"
                tl:tl_underline_height="1dp"/>

            <com.flyco.tablayout.SlidingTabLayout
                android:id="@+id/tl_2"
                android:layout_width="match_parent"
                android:layout_height="48dp"
                android:background="#EEEEEE"
                tl:tl_divider_color="#1A000000"
                tl:tl_divider_padding="13dp"
                tl:tl_divider_width="1dp"
                tl:tl_indicator_color="#000000"
                tl:tl_indicator_height="1.5dp"
                tl:tl_indicator_width_equal_title="true"
                tl:tl_tab_padding="22dp"
                tl:tl_tab_space_equal="true"
                tl:tl_textSelectColor="#000000"
                tl:tl_textUnselectColor="#66000000"
                tl:tl_underline_color="#1A000000"
                tl:tl_underline_height="1dp"/>

            <com.flyco.tablayout.SlidingTabLayout
                android:id="@+id/tl_3"
                android:layout_width="match_parent"
                android:layout_height="48dp"
                android:background="#3F9FE0"
                tl:tl_textAllCaps="true"
                tl:tl_textBold="BOTH"
                tl:tl_textsize="14sp"/>

            <com.flyco.tablayout.SlidingTabLayout
                android:id="@+id/tl_4"
                android:layout_width="match_parent"
                android:layout_height="48dp"
                android:background="#009688"
                tl:tl_tab_padding="0dp"
                tl:tl_tab_width="95dp"
                tl:tl_textsize="15sp"/>

            <com.flyco.tablayout.SlidingTabLayout
                android:id="@+id/tl_5"
                android:layout_width="match_parent"
                android:layout_height="48dp"
                android:background="#F6CE59"
                tl:tl_indicator_width="10dp"/>

            <com.flyco.tablayout.SlidingTabLayout
                android:id="@+id/tl_6"
                android:layout_width="match_parent"
                android:layout_height="48dp"
                android:background="#EC7263"
                tl:tl_indicator_corner_radius="2dp"
                tl:tl_indicator_height="4dp"
                tl:tl_indicator_width="4dp"/>

            <com.flyco.tablayout.SlidingTabLayout
                android:id="@+id/tl_7"
                android:layout_width="match_parent"
                android:layout_height="48dp"
                android:background="#57385C"
                tl:tl_indicator_corner_radius="1.5dp"
                tl:tl_indicator_height="3dp"
                tl:tl_indicator_width="10dp"/>

            <com.flyco.tablayout.SlidingTabLayout
                android:id="@+id/tl_8"
                android:layout_width="match_parent"
                android:layout_height="48dp"
                android:background="#E45171"
                tl:tl_indicator_color="#eeeeee"
                tl:tl_indicator_style="TRIANGLE"/>

            <com.flyco.tablayout.SlidingTabLayout
                android:id="@+id/tl_9"
                android:layout_width="match_parent"
                android:layout_height="48dp"
                android:background="#6D8FB0"
                android:paddingLeft="5dp"
                android:paddingRight="5dp"
                tl:tl_indicator_margin_left="2dp"
                tl:tl_indicator_margin_right="2dp"
                tl:tl_indicator_style="BLOCK"/>

            <com.flyco.tablayout.SlidingTabLayout
                android:id="@+id/tl_10"
                android:layout_width="match_parent"
                android:layout_height="48dp"
                android:background="#222831"
                android:paddingLeft="5dp"
                android:paddingRight="5dp"
                tl:tl_indicator_color="#393E46"
                tl:tl_indicator_corner_radius="5dp"
                tl:tl_indicator_margin_left="2dp"
                tl:tl_indicator_margin_right="2dp"
                tl:tl_indicator_style="BLOCK"/>

3、CommonTabLayout

• 布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tl="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.flyco.tablayout.CommonTabLayout
        android:id="@+id/tl_commen"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:background="@color/colorWhite"
        tl:tl_iconVisible="false"
        tl:tl_indicator_color="@color/colorRed"
        tl:tl_textSelectColor="@color/colorRed"
        tl:tl_textUnselectColor="@color/fontColorLight"
        tl:tl_underline_color="@color/dividerLine"
        tl:tl_underline_height="1px" />

    <android.support.v4.view.ViewPager
        android:id="@+id/vp_commen"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

• 声明

    private ArrayList<Fragment> mFragments = new ArrayList<>();
    private ArrayList<CustomTabEntity> mTabEntities = new ArrayList<>();
    private String[] mTitles = {"xxxx", "xxxx", "xxxx"};

• 搭配ViewPager使用

        for (String mTitle : mTitles) {
            mTabEntities.add(new TabEntity(mTitle, 0, 0));//后面两个值是选中图标和未选中(R.drawable.xxx)不要图标就填0
            mFragments.add(new xxxFragment());
        }
        tlCommen.setTabData(mTabEntities);
        tlCommen.setOnTabSelectListener(new OnTabSelectListener() {
            @Override
            public void onTabSelect(int position) {
                vpCommen.setCurrentItem(position);
            }

            @Override
            public void onTabReselect(int position) {
            }
        });
        vpCommen.setAdapter(new ViewPagerAdapter(getSupportFragmentManager(), mFragments, mTitles));
        vpCommen.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            }

            @Override
            public void onPageSelected(int position) {
                tlCommen.setCurrentTab(position);
            }

            @Override
            public void onPageScrollStateChanged(int state) {
            }
        });
        vpCommen.setCurrentItem(0);

• 搭配FrameLayout使用
• 布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tl="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.flyco.tablayout.CommonTabLayout
        android:id="@+id/tl_commen"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:background="@color/colorWhite"
        tl:tl_iconVisible="false"
        tl:tl_indicator_color="@color/colorRed"
        tl:tl_textSelectColor="@color/colorRed"
        tl:tl_textUnselectColor="@color/fontColorLight"
        tl:tl_underline_color="@color/dividerLine"
        tl:tl_underline_height="1px" />

    <FrameLayout
        android:id="@+id/fl_change"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

• 使用

        for (String mTitle : mTitles) {
            mTabEntities.add(new TabEntity(mTitle, 0, 0));//后面两个值是选中图标和未选中(R.drawable.xxx)不要图标就填0
            mFragments.add(new xxxFragment());
        }
        tlCommen.setTabData(mTitles, this, R.id.fl_change, mFragments);//如果要图标就把mTitles换成mTabEntities

• TabEntity(新建一个类把下面的代码粘进去)

public class TabEntity implements CustomTabEntity {
    public String title;
    private int selectedIcon;
    private int unSelectedIcon;

    public TabEntity(String title, int selectedIcon, int unSelectedIcon) {
        this.title = title;
        this.selectedIcon = selectedIcon;
        this.unSelectedIcon = unSelectedIcon;
    }

    @Override
    public String getTabTitle() {
        return title;
    }

    @Override
    public int getTabSelectedIcon() {
        return selectedIcon;
    }

    @Override
    public int getTabUnselectedIcon() {
        return unSelectedIcon;
    }
}

• 效果图
  

• 小气泡
  

        //两位数
        mTabLayout.showMsg(0, 55);
        mTabLayout.setMsgMargin(0, -5, 5);

        //三位数
        mTabLayout.showMsg(1, 100);
        mTabLayout.setMsgMargin(1, -5, 5);

        //设置未读消息红点
        mTabLayout.showDot(2);
        MsgView rtv_2 = mTabLayout.getMsgView(2);
        if (rtv_2 != null) {
            UnreadMsgUtils.setSize(rtv_2, dp2px(7.5f));
        }

        //设置未读消息背景
        mTabLayout.showMsg(3, 5);
        mTabLayout.setMsgMargin(3, 0, 5);
        MsgView rtv_3 = mTabLayout.getMsgView(3);
        if (rtv_3 != null) {
            rtv_3.setBackgroundColor(Color.parseColor("#6D8FB0"));
        }

• 其他样式(分别对应第一张样图)

        <com.flyco.tablayout.CommonTabLayout
            android:id="@+id/tl_1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#ffffff"
            android:paddingBottom="5dp"
            android:paddingTop="5dp"
            tl:tl_indicator_color="#2C97DE"
            tl:tl_textSelectColor="#2C97DE"
            tl:tl_textUnselectColor="#66000000"
            tl:tl_underline_color="#DDDDDD"
            tl:tl_underline_height="1dp"/>

        <android.support.v4.view.ViewPager
            android:id="@+id/vp_2"
            android:layout_width="match_parent"
            android:layout_height="84dp"/>

        <com.flyco.tablayout.CommonTabLayout
            android:id="@+id/tl_2"
            android:layout_width="match_parent"
            android:layout_height="54dp"
            android:background="#ffffff"
            tl:tl_iconHeight="23dp"
            tl:tl_iconWidth="23dp"
            tl:tl_indicator_color="#2C97DE"
            tl:tl_indicator_height="0dp"
            tl:tl_textSelectColor="#2C97DE"
            tl:tl_textUnselectColor="#66000000"
            tl:tl_textsize="12sp"
            tl:tl_underline_color="#DDDDDD"
            tl:tl_underline_height="1dp"/>

        <FrameLayout
            android:id="@+id/fl_change"
            android:layout_width="match_parent"
            android:layout_height="84dp">
        </FrameLayout>

        <com.flyco.tablayout.CommonTabLayout
            android:id="@+id/tl_3"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:background="#ffffff"
            tl:tl_iconGravity="LEFT"
            tl:tl_iconHeight="18dp"
            tl:tl_iconMargin="5dp"
            tl:tl_iconWidth="18dp"
            tl:tl_indicator_bounce_enable="false"
            tl:tl_indicator_color="#2C97DE"
            tl:tl_indicator_gravity="TOP"
            tl:tl_textSelectColor="#2C97DE"
            tl:tl_textUnselectColor="#66000000"
            tl:tl_textsize="15sp"
            tl:tl_underline_color="#DDDDDD"
            tl:tl_underline_gravity="TOP"
            tl:tl_underline_height="1dp"/>

        <com.flyco.tablayout.CommonTabLayout
            android:id="@+id/tl_4"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:background="#F6CE59"
            tl:tl_iconVisible="false"
            tl:tl_textBold="SELECT"
            tl:tl_indicator_width="10dp"
            tl:tl_textsize="14sp"/>

        <com.flyco.tablayout.CommonTabLayout
            tl:tl_textBold="BOTH"
            android:id="@+id/tl_5"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:background="#EC7263"
            tl:tl_iconVisible="false"
            tl:tl_indicator_corner_radius="2dp"
            tl:tl_indicator_height="4dp"
            tl:tl_indicator_width="4dp"
            tl:tl_textsize="14sp"/>

        <com.flyco.tablayout.CommonTabLayout
            android:id="@+id/tl_6"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:background="#57385C"
            tl:tl_iconVisible="false"
            tl:tl_indicator_corner_radius="1.5dp"
            tl:tl_indicator_height="3dp"
            tl:tl_indicator_width="10dp"
            tl:tl_textsize="14sp"/>

        <com.flyco.tablayout.CommonTabLayout
            android:id="@+id/tl_7"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:background="#E45171"
            tl:tl_iconVisible="false"
            tl:tl_indicator_color="#eeeeee"
            tl:tl_indicator_corner_radius="1.5dp"
            tl:tl_indicator_height="3dp"
            tl:tl_indicator_style="TRIANGLE"
            tl:tl_indicator_width="10dp"
            tl:tl_textsize="14sp"/>

        <com.flyco.tablayout.CommonTabLayout
            android:id="@+id/tl_8"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:background="#6D8FB0"
            android:paddingLeft="5dp"
            android:paddingRight="5dp"
            tl:tl_iconVisible="false"
            tl:tl_indicator_margin_left="5dp"
            tl:tl_indicator_margin_right="5dp"
            tl:tl_indicator_style="BLOCK"
            tl:tl_textsize="14sp"/>

4、SegmentTabLayout

• 布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tl="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/bg"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorWhite"
        android:gravity="center"
        android:paddingTop="5dp"
        android:paddingBottom="5dp">

        <com.flyco.tablayout.SegmentTabLayout
            android:id="@+id/tl_se"
            android:layout_width="wrap_content"
            android:layout_height="30dp"
            android:layout_gravity="center_horizontal"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            tl:tl_bar_color="@color/colorWhite"
            tl:tl_indicator_color="@color/colorRed"
            tl:tl_tab_width="70dp" />
    </LinearLayout>

    <FrameLayout
        android:id="@+id/fl_change"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

• 声明

    private String[] mTitles = {"消息", "联系"};
    private ArrayList<Fragment> mFragments = new ArrayList<>();

• 在fragment中使用

        mFragments.add(new MessageCategoryFragment());
        mFragments.add(new StudentListFragment());
        tlSe.setTabData(mTitles, Objects.requireNonNull(getActivity()), R.id.fl_change, mFragments);

• 其他样式（对应本例第一张样图）

        <com.flyco.tablayout.SegmentTabLayout
            android:id="@+id/tl_1"
            android:layout_width="wrap_content"
            android:layout_height="32dp"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="10dp"
            tl:tl_bar_color="#ffffff"
            tl:tl_indicator_color="#2C97DE"
            tl:tl_indicator_corner_radius="8dp"
            tl:tl_tab_padding="20dp"/>

        <com.flyco.tablayout.SegmentTabLayout
            android:id="@+id/tl_2"
            android:layout_width="wrap_content"
            android:layout_height="36dp"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="10dp"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            tl:tl_indicator_anim_enable="true"
            tl:tl_indicator_bounce_enable="false"
            tl:tl_indicator_color="#009688"
            tl:tl_tab_padding="20dp"/>

        <com.flyco.tablayout.SegmentTabLayout
            android:id="@+id/tl_3"
            android:layout_width="match_parent"
            android:layout_height="36dp"
            android:layout_marginTop="10dp"
            android:paddingLeft="25dp"
            android:paddingRight="25dp"
            tl:tl_bar_color="#ffffff"
            tl:tl_indicator_anim_enable="true"
            tl:tl_indicator_color="#F6CE59"
            tl:tl_indicator_margin_bottom="2dp"
            tl:tl_indicator_margin_left="2dp"
            tl:tl_indicator_margin_right="2dp"
            tl:tl_indicator_margin_top="2dp"
            tl:tl_textBold="SELECT"/>

        <android.support.v4.view.ViewPager
            android:id="@+id/vp_2"
            android:layout_width="match_parent"
            android:layout_height="84dp"/>

        <com.flyco.tablayout.SegmentTabLayout
            android:id="@+id/tl_4"
            android:layout_width="wrap_content"
            android:layout_height="36dp"
            android:layout_gravity="center_horizontal"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            tl:tl_bar_color="#ffffff"
            tl:tl_indicator_color="#EC7263"
            tl:tl_indicator_margin_bottom="2dp"
            tl:tl_indicator_margin_left="2dp"
            tl:tl_indicator_margin_right="2dp"
            tl:tl_indicator_margin_top="2dp"
            tl:tl_tab_width="80dp"
            tl:tl_textBold="BOTH"/>

        <FrameLayout
            android:id="@+id/fl_change"
            android:layout_width="match_parent"
            android:layout_height="84dp"/>

        <com.flyco.tablayout.SegmentTabLayout
            android:id="@+id/tl_5"
            android:layout_width="match_parent"
            android:layout_height="36dp"
            android:layout_gravity="center_horizontal"
            android:paddingLeft="30dp"
            android:paddingRight="30dp"
            tl:tl_indicator_anim_enable="true"
            tl:tl_indicator_bounce_enable="false"
            tl:tl_indicator_margin_bottom="2dp"
            tl:tl_indicator_margin_left="2dp"
            tl:tl_indicator_margin_right="2dp"
            tl:tl_indicator_margin_top="2dp"
            tl:tl_tab_space_equal="true"/>

• 效果图