FlycoTabLayout : Android TabLayout 库

FlycoTabLayout 是一个一个安卓的Tablayout库，其中主要包含了CommonTabLayout，SegmenTabLayout，SlidingTabLayout。

依赖：

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

CommonTabLayout的用法：

1.布局：

2.业务：

public class CommonTabActivity extends AppCompatActivity {
    private Context mContext = this;
    private ArrayList mFragments = new ArrayList<>();
    private ArrayList mFragments2 = new ArrayList<>();
    /*文本信息*/
    private String[] mTitles = {"首页", "消息", "联系人", "更多"};
    /*未选择时的icon*/
    private int[] mIconUnselectIds = {
            R.mipmap.tab_home_unselect, R.mipmap.tab_speech_unselect,
            R.mipmap.tab_contact_unselect, R.mipmap.tab_more_unselect};
    /*选择时的icon*/
    private int[] mIconSelectIds = {
            R.mipmap.tab_home_select, R.mipmap.tab_speech_select,
            R.mipmap.tab_contact_select, R.mipmap.tab_more_select};
    private ArrayList mTabEntities = new ArrayList<>();
    private View mDecorView;
    private ViewPager mViewPager;
    private CommonTabLayout mTabLayout_1;
    private CommonTabLayout mTabLayout_2;
    private CommonTabLayout mTabLayout_3;
    private CommonTabLayout mTabLayout_4;
    private CommonTabLayout mTabLayout_5;
    private CommonTabLayout mTabLayout_6;
    private CommonTabLayout mTabLayout_7;
    private CommonTabLayout mTabLayout_8;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_common_tab);
 
        for (String title : mTitles) {
            mFragments.add(SimpleCardFragment.getInstance("Switch ViewPager " + title));
            mFragments2.add(SimpleCardFragment.getInstance("Switch Fragment " + title));
        }
 
        /*添加数据集*/
        for (int i = 0; i < mTitles.length; i++) {
            mTabEntities.add(new TabEntity(mTitles[i], mIconSelectIds[i], mIconUnselectIds[i]));
        }
 
        mDecorView = getWindow().getDecorView();
        mViewPager = ViewFindUtils.find(mDecorView, R.id.vp_2);
        mViewPager.setAdapter(new MyPagerAdapter(getSupportFragmentManager()));
        /** with nothing */
        mTabLayout_1 = ViewFindUtils.find(mDecorView, R.id.tl_1);
        /** with ViewPager */
        mTabLayout_2 = ViewFindUtils.find(mDecorView, R.id.tl_2);
        /** with Fragments */
        mTabLayout_3 = ViewFindUtils.find(mDecorView, R.id.tl_3);
        /** indicator固定宽度 */
        mTabLayout_4 = ViewFindUtils.find(mDecorView, R.id.tl_4);
        /** indicator固定宽度 */
        mTabLayout_5 = ViewFindUtils.find(mDecorView, R.id.tl_5);
        /** indicator矩形圆角 */
        mTabLayout_6 = ViewFindUtils.find(mDecorView, R.id.tl_6);
        /** indicator三角形 */
        mTabLayout_7 = ViewFindUtils.find(mDecorView, R.id.tl_7);
        /** indicator圆角色块 */
        mTabLayout_8 = ViewFindUtils.find(mDecorView, R.id.tl_8);
 
        mTabLayout_1.setTabData(mTabEntities);
        tl_2();
        mTabLayout_3.setTabData(mTabEntities, this, R.id.fl_change, mFragments2);
        mTabLayout_4.setTabData(mTabEntities);
        mTabLayout_5.setTabData(mTabEntities);
        mTabLayout_6.setTabData(mTabEntities);
        mTabLayout_7.setTabData(mTabEntities);
        mTabLayout_8.setTabData(mTabEntities);
 
        mTabLayout_3.setOnTabSelectListener(new OnTabSelectListener() {
            @Override
            public void onTabSelect(int position) {
                mTabLayout_1.setCurrentTab(position);
                mTabLayout_2.setCurrentTab(position);
                mTabLayout_4.setCurrentTab(position);
                mTabLayout_5.setCurrentTab(position);
                mTabLayout_6.setCurrentTab(position);
                mTabLayout_7.setCurrentTab(position);
                mTabLayout_8.setCurrentTab(position);
            }
 
            @Override
            public void onTabReselect(int position) {
 
            }
        });
        mTabLayout_8.setCurrentTab(2);
        mTabLayout_3.setCurrentTab(1);
 
        //显示未读红点
        mTabLayout_1.showDot(2);
        mTabLayout_3.showDot(1);
        mTabLayout_4.showDot(1);
 
        //两位数
        mTabLayout_2.showMsg(0, 55);
        mTabLayout_2.setMsgMargin(0, -5, 5);
 
        //三位数
        mTabLayout_2.showMsg(1, 100);
        mTabLayout_2.setMsgMargin(1, -5, 5);
 
        //设置未读消息红点
        mTabLayout_2.showDot(2);
        MsgView rtv_2_2 = mTabLayout_2.getMsgView(2);
        if (rtv_2_2 != null) {
            UnreadMsgUtils.setSize(rtv_2_2, dp2px(7.5f));
        }
 
        //设置未读消息背景
        mTabLayout_2.showMsg(3, 5);
        mTabLayout_2.setMsgMargin(3, 0, 5);
        MsgView rtv_2_3 = mTabLayout_2.getMsgView(3);
        if (rtv_2_3 != null) {
            rtv_2_3.setBackgroundColor(Color.parseColor("#6D8FB0"));
        }
    }
 
    Random mRandom = new Random();
 
    private void tl_2() {
        mTabLayout_2.setTabData(mTabEntities);
        /*选择事件*/
        mTabLayout_2.setOnTabSelectListener(new OnTabSelectListener() {
            @Override
            public void onTabSelect(int position) {
                mViewPager.setCurrentItem(position);
            }
 
            @Override
            public void onTabReselect(int position) {
                if (position == 0) {
                    mTabLayout_2.showMsg(0, mRandom.nextInt(100) + 1);
//                    UnreadMsgUtils.show(mTabLayout_2.getMsgView(0), mRandom.nextInt(100) + 1);
                }
            }
        });
 
        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
 
            }
 
            @Override
            public void onPageSelected(int position) {
                mTabLayout_2.setCurrentTab(position);
            }
 
            @Override
            public void onPageScrollStateChanged(int state) {
 
            }
        });
 
        mViewPager.setCurrentItem(1);
    }
 
    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);
        }
    }
 
    protected int dp2px(float dp) {
        final float scale = mContext.getResources().getDisplayMetrics().density;
        return (int) (dp * scale + 0.5f);
    }
}

public class TabEntity implements CustomTabEntity {
    public String title;
    public int selectedIcon;
    public 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;
    }
}

public class ViewFindUtils
{
   /**
    * ViewHolder简洁写法,避免适配器中重复定义ViewHolder,减少代码量 用法:
    * 
    * 
    * if (convertView == null)
    * {
    *     convertView = View.inflate(context, R.layout.ad_demo, null);
    * }
    * TextView tv_demo = ViewHolderUtils.get(convertView, R.id.tv_demo);
    * ImageView iv_demo = ViewHolderUtils.get(convertView, R.id.iv_demo);
    * 
    */
   public static  T hold(View view, int id)
   {
      SparseArray viewHolder = (SparseArray) view.getTag();
 
      if (viewHolder == null)
      {
         viewHolder = new SparseArray();
         view.setTag(viewHolder);
      }
 
      View childView = viewHolder.get(id);
 
      if (childView == null)
      {
         childView = view.findViewById(id);
         viewHolder.put(id, childView);
      }
 
      return (T) childView;
   }
 
   /**
    * 替代findviewById方法
    */
   public static  T find(View view, int id)
   {
      return (T) view.findViewById(id);
   }
}

@SuppressLint("ValidFragment")
public class SimpleCardFragment extends Fragment {
    private String mTitle;
 
    public static SimpleCardFragment getInstance(String title) {
        SimpleCardFragment sf = new SimpleCardFragment();
        sf.mTitle = title;
        return sf;
    }
 
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }
 
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View v = inflater.inflate(R.layout.fr_simple_card, null);
        TextView card_title_tv = (TextView) v.findViewById(R.id.card_title_tv);
        card_title_tv.setText(mTitle);
 
        return v;
    }
}

SegmentTabLayout的使用方法

 1、布局：

2、逻辑：

public class SegmentTabActivity extends AppCompatActivity {
    private ArrayList mFragments = new ArrayList<>();
    private ArrayList mFragments2 = new ArrayList<>();
 
    private String[] mTitles = {"首页", "消息"};
    private String[] mTitles_2 = {"首页", "消息", "联系人"};
    private String[] mTitles_3 = {"首页", "消息", "联系人", "更多"};
    private View mDecorView;
    private SegmentTabLayout mTabLayout_3;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_segment_tab);
 
        for (String title : mTitles_3) {
            mFragments.add(SimpleCardFragment.getInstance("Switch ViewPager " + title));
        }
 
        for (String title : mTitles_2) {
            mFragments2.add(SimpleCardFragment.getInstance("Switch Fragment " + title));
        }
 
        mDecorView = getWindow().getDecorView();
 
        SegmentTabLayout tabLayout_1 = ViewFindUtils.find(mDecorView, R.id.tl_1);
        SegmentTabLayout tabLayout_2 = ViewFindUtils.find(mDecorView, R.id.tl_2);
        mTabLayout_3 = ViewFindUtils.find(mDecorView, R.id.tl_3);
        SegmentTabLayout tabLayout_4 = ViewFindUtils.find(mDecorView, R.id.tl_4);
        SegmentTabLayout tabLayout_5 = ViewFindUtils.find(mDecorView, R.id.tl_5);
 
        tabLayout_1.setTabData(mTitles);
        tabLayout_2.setTabData(mTitles_2);
        tl_3();
        tabLayout_4.setTabData(mTitles_2, this, R.id.fl_change, mFragments2);
        tabLayout_5.setTabData(mTitles_3);
 
        //显示未读红点
        tabLayout_1.showDot(2);
        tabLayout_2.showDot(2);
        mTabLayout_3.showDot(1);
        tabLayout_4.showDot(1);
 
        //设置未读消息红点
        mTabLayout_3.showDot(2);
        MsgView rtv_3_2 = mTabLayout_3.getMsgView(2);
        if (rtv_3_2 != null) {
            rtv_3_2.setBackgroundColor(Color.parseColor("#6D8FB0"));
        }
    }
 
    private void tl_3() {
        final ViewPager vp_3 = ViewFindUtils.find(mDecorView, R.id.vp_2);
        vp_3.setAdapter(new MyPagerAdapter(getSupportFragmentManager()));
 
        mTabLayout_3.setTabData(mTitles_3);
        mTabLayout_3.setOnTabSelectListener(new OnTabSelectListener() {
            @Override
            public void onTabSelect(int position) {
                vp_3.setCurrentItem(position);
            }
 
            @Override
            public void onTabReselect(int position) {
            }
        });
 
        vp_3.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
 
            }
 
            @Override
            public void onPageSelected(int position) {
                mTabLayout_3.setCurrentTab(position);
            }
 
            @Override
            public void onPageScrollStateChanged(int state) {
 
            }
        });
        vp_3.setCurrentItem(1);
    }
 
    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_3[position];
        }
 
        @Override
        public Fragment getItem(int position) {
            return mFragments.get(position);
        }
    }
}

SlidingTabLayout的使用

 1、布局

2、逻辑：

public class SlidingTabActivity extends AppCompatActivity implements OnTabSelectListener {
    private Context mContext = this;
    private ArrayList mFragments = new ArrayList<>();
    private final String[] mTitles = {
            "热门", "iOS", "Android"
            , "前端", "后端", "设计", "工具资源"
    };
    private MyPagerAdapter mAdapter;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_sliding_tab);
 
        for (String title : mTitles) {
            mFragments.add(SimpleCardFragment.getInstance(title));
        }
 
 
        View decorView = getWindow().getDecorView();
        ViewPager vp = ViewFindUtils.find(decorView, R.id.vp);
        mAdapter = new MyPagerAdapter(getSupportFragmentManager());
        vp.setAdapter(mAdapter);
 
        /** 默认 */
        SlidingTabLayout tabLayout_1 = ViewFindUtils.find(decorView, R.id.tl_1);
        /**自定义部分属性*/
        SlidingTabLayout tabLayout_2 = ViewFindUtils.find(decorView, R.id.tl_2);
        /** 字体加粗,大写 */
        SlidingTabLayout tabLayout_3 = ViewFindUtils.find(decorView, R.id.tl_3);
        /** tab固定宽度 */
        SlidingTabLayout tabLayout_4 = ViewFindUtils.find(decorView, R.id.tl_4);
        /** indicator固定宽度 */
        SlidingTabLayout tabLayout_5 = ViewFindUtils.find(decorView, R.id.tl_5);
        /** indicator圆 */
        SlidingTabLayout tabLayout_6 = ViewFindUtils.find(decorView, R.id.tl_6);
        /** indicator矩形圆角 */
        final SlidingTabLayout tabLayout_7 = ViewFindUtils.find(decorView, R.id.tl_7);
        /** indicator三角形 */
        SlidingTabLayout tabLayout_8 = ViewFindUtils.find(decorView, R.id.tl_8);
        /** indicator圆角色块 */
        SlidingTabLayout tabLayout_9 = ViewFindUtils.find(decorView, R.id.tl_9);
        /** indicator圆角色块 */
        SlidingTabLayout tabLayout_10 = ViewFindUtils.find(decorView, R.id.tl_10);
 
        tabLayout_1.setViewPager(vp);
        tabLayout_2.setViewPager(vp);
        tabLayout_2.setOnTabSelectListener(this);
        tabLayout_3.setViewPager(vp);
        tabLayout_4.setViewPager(vp);
        tabLayout_5.setViewPager(vp);
        tabLayout_6.setViewPager(vp);
        tabLayout_7.setViewPager(vp, mTitles);
        tabLayout_8.setViewPager(vp, mTitles, this, mFragments);
        tabLayout_9.setViewPager(vp);
        tabLayout_10.setViewPager(vp);
 
        vp.setCurrentItem(4);
 
        tabLayout_1.showDot(4);
        tabLayout_3.showDot(4);
        tabLayout_2.showDot(4);
 
        tabLayout_2.showMsg(3, 5);
        tabLayout_2.setMsgMargin(3, 0, 10);
        MsgView rtv_2_3 = tabLayout_2.getMsgView(3);
        if (rtv_2_3 != null) {
            rtv_2_3.setBackgroundColor(Color.parseColor("#6D8FB0"));
        }
 
        tabLayout_2.showMsg(5, 5);
        tabLayout_2.setMsgMargin(5, 0, 10);
 
//        tabLayout_7.setOnTabSelectListener(new OnTabSelectListener() {
//            @Override
//            public void onTabSelect(int position) {
//                Toast.makeText(mContext, "onTabSelect&position--->" + position, Toast.LENGTH_SHORT).show();
//            }
//
//            @Override
//            public void onTabReselect(int position) {
//                mFragments.add(SimpleCardFragment.getInstance("后端"));
//                mAdapter.notifyDataSetChanged();
//                tabLayout_7.addNewTab("后端");
//            }
//        });
    }
 
    @Override
    public void onTabSelect(int position) {
        Toast.makeText(mContext, "onTabSelect&position--->" + position, Toast.LENGTH_SHORT).show();
    }
 
    @Override
    public void onTabReselect(int position) {
        Toast.makeText(mContext, "onTabReselect&position--->" + position, Toast.LENGTH_SHORT).show();
    }
 
    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);
        }
    }
}

属性详解：

name    format    description
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)

GitHub地址：https://github.com/H07000223/FlycoTabLayout