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 = {"程序人生", "移动开发", "前端", "数据库"};
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);
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"};
for (String mTitle : mTitles) {
mTabEntities.add(new TabEntity(mTitle, 0, 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);
<?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));
mFragments.add(new xxxFragment());
}
tlCommen.setTabData(mTitles, this, R.id.fl_change, mFragments);
- 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<>();
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"/>