一、简单介绍
开发当中使用TabLayout满足不了我们的需求，我们可以借助第三方的控件或者自己用自定义View去实现。下面介绍一下FlycoTabLayout
FlycoTabLayout是一个Android TabLayout库,目前有3个TabLayout
1、SlidingTabLayout：
- 新增部分属性
- 新增支持多种Indicator显示器
- 新增支持未读消息显示
- 新增方法setViewPager
/** 关联ViewPager,用于不想在ViewPager适配器中设置titles数据的情况 */
public void setViewPager(ViewPager vp, String[] titles)
/** 关联ViewPager,用于连适配器都不想自己实例化的情况 */
public void setViewPager(ViewPager vp, String[] titles, FragmentActivity fa, ArrayList<Fragment> fragments)
2、CommonTabLayout
- 支持多种Indicator显示器,以及Indicator动画
- 支持未读消息显示
- 支持Icon以及Icon位置
- 新增方法
/** 关联数据支持同时切换fragments */
public void setTabData(ArrayList<CustomTabEntity> tabEntitys, FragmentManager fm, int containerViewId,
ArrayList<Fragment> fragments)
3、SegmentTabLayout：仿照QQ消息列表头部tab切换的控件
二、效果图
image.png
三、简单使用
1.添加依赖
implementation 'com.flyco.tablayout:FlycoTabLayout_Lib:2.1.2@aar'
2.XML中使用
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="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"
tools:context=".MainActivity">
<com.flyco.tablayout.SlidingTabLayout
android:id="@+id/tab"
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="@color/colorAccent"
app:tl_indicator_height="2dp"
app:tl_indicator_width="10dp"
app:tl_tab_space_equal="true" />
<androidx.viewpager.widget.ViewPager
android:id="@+id/vp"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
3.MainActivity代码
package com.xxxx.demo;
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.viewpager.widget.ViewPager;
import com.flyco.tablayout.SlidingTabLayout;
import com.google.android.material.tabs.TabLayout;
import com.ninstarscf.demo.fragment.AFragment;
import com.ninstarscf.demo.fragment.BFragment;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
private SlidingTabLayout mTab;
private ViewPager mVp;
private ArrayList<Fragment> mFragments;
private String[] mTitlesArrays ={"新闻","娱乐","头条","八卦"};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
private void initView() {
mTab = (SlidingTabLayout) findViewById(R.id.tab);
mVp = (ViewPager) findViewById(R.id.vp);
mFragments = new ArrayList<>();
mFragments.add(new AFragment());
mFragments.add(new BFragment());
mFragments.add(new BFragment());
mFragments.add(new BFragment());
MyPagerAdapter pagerAdapter = new MyPagerAdapter(getSupportFragmentManager(), mFragments);
mVp.setAdapter(pagerAdapter);
mTab.setViewPager(mVp, mTitlesArrays);//tab和ViewPager进行关联
}
}
四、属性表
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)
