//FlycoTabLayout (轻松切换的Tab)

申屠洛华

2023-12-01

1 依赖 8.9k

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

很详细，很好的解读

tl_indicator_color          color       设置显示器颜色
tl_indicator_height         dimension   设置显示器高度
tl_indicator_width          dimension   设置显示器固定宽度
tl_indicator_margin_left    dimension   设置显示器margin,当indicator_width大于0,无效
tl_indicator_margin_top     dimension   设置显示器margin,当indicator_width大于0,无效
tl_indicator_margin_right   dimension   设置显示器margin,当indicator_width大于0,无效
tl_indicator_margin_bottom  dimension   设置显示器margin,当indicator_width大于0,无效
tl_indicator_corner_radius  dimension   设置显示器圆角弧度
tl_indicator_gravity        enum        设置显示器上方(TOP)还是下方(BOTTOM),只对常规显示器有用
tl_indicator_style          enum        设置显示器为常规(NORMAL)或三角形(TRIANGLE)或背景色块(BLOCK)
tl_underline_color          color       设置下划线颜色
tl_underline_height         dimension   设置下划线高度
tl_underline_gravity        enum        设置下划线上方(TOP)还是下方(BOTTOM)
tl_divider_color            color       设置分割线颜色
tl_divider_width            dimension   设置分割线宽度
tl_divider_padding          dimension   设置分割线的paddingTop和paddingBottom
tl_tab_padding              dimension   设置tab的paddingLeft和paddingRight
tl_tab_space_equal          boolean     设置tab大小等分
tl_tab_width                dimension   设置tab固定大小
tl_textsize                 dimension   设置字体大小
tl_textSelectColor          color       设置字体选中颜色
tl_textUnselectColor        color       设置字体未选中颜色
tl_textBold                 boolean     设置字体加粗
tl_iconWidth                dimension   设置icon宽度(仅支持CommonTabLayout)
tl_iconHeight               dimension   设置icon高度(仅支持CommonTabLayout)
tl_iconVisible              boolean     设置icon是否可见(仅支持CommonTabLayout)
tl_iconGravity              enum        设置icon显示位置,对应Gravity中常量值,左上右下(仅支持CommonTabLayout)
tl_iconMargin               dimension   设置icon与文字间距(仅支持CommonTabLayout)
tl_indicator_anim_enable    boolean     设置显示器支持动画(only for CommonTabLayout)
tl_indicator_anim_duration  integer     设置显示器动画时间(only for CommonTabLayout)
tl_indicator_bounce_enable  boolean     设置显示器支持动画回弹效果(only for CommonTabLayout)
tl_indicator_width_equal_title  boolean 设置显示器与标题一样长(only for SlidingTabLayout)

2 xml布局设置

设置底部横线指示   带滑动效果
<com.flyco.tablayout.CommonTabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/white"
            tl:tl_indicator_color="#ff45b548"
            tl:tl_indicator_corner_radius="40dp"
            tl:tl_indicator_margin_left="@dimen/qb_px_70"
            tl:tl_indicator_margin_right="@dimen/qb_px_70"
            tl:tl_indicator_style="NORMAL"
            tl:tl_textSelectColor = "#ff45b548"
            tl:tl_underline_color = "#ff45b548"
            tl:tl_tab_space_equal="true"
            tl:tl_textUnselectColor="#ff2c2c2c"
            tl:tl_textsize="15sp"/>


设置圆角背景图指示  带滑动效果

<com.flyco.tablayout.CommonTabLayout
                android:id="@+id/tab_layout"
                android:layout_width="match_parent"
                android:layout_height="@dimen/qb_px_95"
                android:background="@color/white"
                tl:tl_indicator_color="#fff59438"
                tl:tl_indicator_corner_radius="40dp"
                tl:tl_indicator_margin_left="@dimen/qb_px_70"
                tl:tl_indicator_margin_right="@dimen/qb_px_70"
                tl:tl_indicator_style="BLOCK"
                tl:tl_tab_space_equal="true"
                tl:tl_textUnselectColor="#333"
                tl:tl_textsize="15sp"/>

3 代码可关联其他控件（如：fragment）也可不关联

private void initFragment() {
         String[] mTitles = {"零活信息", "散工信息"};
        mTabEntities.add(new TabEntity(mTitles[0]));
        mTabEntities.add(new TabEntity(mTitles[1]));
        tabLayout.setTabData(mTabEntities);
        tabLayout.setOnTabSelectListener(new OnTabSelectListener() {
            @Override
            public void onTabSelect(int position) {
                Log.i("*****","select:"+position);
            }

            @Override
            public void onTabReselect(int position) {
                Log.i("*****","unselect:"+position);
            }
        });
//        mFragments.add(JobHotFragment.getInstance("招聘"));//招聘
//        mFragments.add(JobHotFragment.getInstance("求职"));//求职
//        tabLayout.setTabData(mTabEntities, this, R.id.tab_layout_fl, mFragments);
    }

4 关联ViewPager+Fragment (tl:tl_tab_space_equal="true" 等分宽度)

设置关联Viewpager
<com.flyco.tablayout.SlidingTabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white"
        android:paddingBottom="@dimen/qb_px_20"
        android:paddingTop="@dimen/qb_px_20"
        tl:tl_indicator_color="@color/main"
        tl:tl_indicator_width_equal_title="true"
        tl:tl_tab_padding="@dimen/qb_px_25"
        tl:tl_tab_space_equal="false"
        tl:tl_textSelectColor="@color/main"
        tl:tl_textUnselectColor="#2c2c2c"
        tl:tl_textsize="16sp"
        />

    <View
        android:layout_width="match_parent"
        android:layout_height="@dimen/qb_px_1"
        android:background="#f2f2f2"/>

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

//BaseActivity extends AppCompatActivity

public class PersonalHomeActivity extends BaseActivity {

    private String[] mTitles = {"文章", "问答", "求职招聘", "村务动态", "二手市场", "我的商铺"};
    private ArrayList<Fragment> mFragments = new ArrayList<>();
    private MyPagerAdapter mAdapter;
   
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_personal_home);
        ButterKnife.bind(this);
      
    }
   

    private void InitTabLayout() {
        mAdapter = new MyPagerAdapter(getSupportFragmentManager());
        mVp.setAdapter(mAdapter);
        mFragments.add(PersonalHomeArticleFragment.getInstance(userId));
        mFragments.add(PersonalHomeQuestionFragment.getInstance(userId));
        mFragments.add(PersonalHomeJobFragment.getInstance(userId));
        mFragments.add(PersonalHomeCountrySideFragment.getInstance(userId));
        mFragments.add(PersonalHomeSecondFragment.getInstance(userId));
        mFragments.add(MyGoodsFragment.getInstance(userId));
        mTabLayout.setViewPager(mVp, mTitles, this, mFragments);
    }

    private class MyPagerAdapter extends FragmentPagerAdapter {
        public MyPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @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);
        }
    }

  
}

FlycoTabLayout_Lib包含三种常用的效果：

1.CommonTabLayout（文字，下划线点击切换效果）

2.SegmentTabLayout（文字，按钮点击切换效果）

3.SlidingTabLayout（可水平滑动切换效果）

来一张官方示例的动图，感受一下

本章只介绍CommonTabLayout的简单使用，另外两种实现方式请参阅Github源码介绍及demo

Step1：在app的build.gradle文件中添加第三方项目依赖

Step2：在需要的界面.xml中添加需要使用的控件

关于属性的含义，三种效果的共有属性如下：

共有属性名称	格式	描述
tl_indicator_color	color	设置显示器颜色
tl_indicator_height	dimension	设置显示器高度
tl_indicator_margin_left	dimension	设置显示器margin,当indicator_width大于0,无效
tl_indicator_margin_top	dimension	设置显示器margin,当indicator_width大于0,无效
tl_indicator_margin_right	dimension	设置显示器margin,当indicator_width大于0,无效
tl_indicator_margin_bottom	dimension	设置显示器margin,当indicator_width大于0,无效
tl_indicator_corner_radius	dimension	设置显示器圆角弧度
tl_divider_color	color	设置分割线颜色
tl_divider_width	dimension	设置分割线宽度
tl_divider_padding	dimension	设置分割线的paddingTop和paddingBottom
tl_tab_padding	dimension	设置tab的paddingLeft和paddingRight
tl_tab_space_equal	boolean	设置tab大小等分
tl_tab_width	dimension	设置tab固定大小
tl_textsize	dimension	设置字体大小
tl_textSelectColor	color	设置字体选中颜色
tl_textUnselectColor	color	设置字体未选中颜色
tl_textBold	boolean	设置字体加粗
tl_textAllCaps	boolean	设置字体全大写

CommonTabLayout的特有属性如下：

特有属性	格式	描述
tl_indicator_width	dimension	设置显示器固定宽度
tl_indicator_gravity	enum	设置显示器上方(TOP)还是下方(BOTTOM),只对常规显示器有用
tl_indicator_style	enum	设置显示器为常规(NORMAL)或三角形(TRIANGLE)或背景色块(BLOCK)
tl_indicator_anim_enable	boolean	设置显示器支持动画(only for CommonTabLayout)
tl_indicator_anim_duration	integer	设置显示器动画时间(only for CommonTabLayout)
tl_indicator_bounce_enable	boolean	设置显示器支持动画回弹效果(only for CommonTabLayout)
tl_underline_color	color	设置下划线颜色
tl_underline_height	dimension	设置下划线高度
tl_underline_gravity	enum	设置下划线上方(TOP)还是下方(BOTTOM)
tl_iconWidth	dimension	设置icon宽度(仅支持CommonTabLayout)
tl_iconHeight	dimension	设置icon高度(仅支持CommonTabLayout)
tl_iconVisible	boolean	设置icon是否可见(仅支持CommonTabLayout)
tl_iconGravity	enum	设置icon显示位置,对应Gravity中常量值,左上右下(仅支持CommonTabLayout)，LEFT，RIGHT，TOP，BOTTOM
tl_iconMargin	dimension	设置icon与文字间距(仅支持CommonTabLayout)

SegmentTabLayout的特有属性如下：

特有属性	格式	描述
tl_indicator_anim_enable	boolean	设置显示器支持动画
tl_indicator_anim_duration	integer	设置显示器动画时间
tl_indicator_bounce_enable	boolean	设置显示器支持动画回弹效果
tl_bar_color	color	设置整体颜色
tl_bar_stroke_color	color	设置边框颜色
tl_bar_stroke_width	dimension	设置边框粗细

SlidingTabLayout的特有属性如下：

特有属性	格式	描述
tl_indicator_width	dimension	设置显示器固定宽度
tl_indicator_gravity	enum	设置显示器上方(TOP)还是下方(BOTTOM),只对常规显示器有用
tl_indicator_style	enum	设置显示器为常规(NORMAL)或三角形(TRIANGLE)或背景色块(BLOCK)
tl_indicator_width_equal_title	boolean	设置显示器与标题一样长(only for SlidingTabLayout)
tl_underline_color	color	设置下划线颜色
tl_underline_height	dimension	设置下划线高度
tl_underline_gravity	enum	设置下划线上方(TOP)还是下方(BOTTOM)

Step3：使用

1.添加要显示的tab项文字;

2.设置tab点击监听。

onTabSelect 方法中的position就是点击的tab对应的下标，根据下标区分要进行的下一步操作。

好了，关于FlycoTabLayout_Lib库中的CommonTabLayout的使用就先介绍到这里，总体来说是很简单的（现在想想以前自己写的有多复杂，太不实用的，也没有这么灵活）。

//FlycoTabLayout (轻松切换的Tab)

SegmentTabLayout的特有属性如下：

SlidingTabLayout的特有属性如下：

相关阅读

相关文章

相关问答

相关文档