FlycoTabLayout

首先添加FlycoTabLayout依赖库

---

项目代码如下：

---

工具类ViewFindUtils，用于初始化控件

public class ViewFindUtils
{
    /**
     * ViewHolder简洁写法,避免适配器中重复定义ViewHolder,减少代码量 用法:
     * 
     * <pre>
     * 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);
     * </pre>
     */
    public static <T extends View> T hold(View view, int id)
    {
        SparseArray<View> viewHolder = (SparseArray<View>) view.getTag();

        if (viewHolder == null)
        {
            viewHolder = new SparseArray<View>();
            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 extends View> T find(View view, int id)
    {
        return (T) view.findViewById(id);
    }
}

主界面布局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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:tl="http://schemas.android.com/tools"
    android:orientation="vertical"
    >

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

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


</LinearLayout>

主界面代码

public class MainActivity extends AppCompatActivity implements OnTabSelectListener {

    //ViewPager 的界面集合
    private ArrayList<Fragment> mFragments = new ArrayList<>();
    //标题按钮集合
    private final String[] mTitles = {"相册", "其他"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }

    private void initView() {
        mFragments.add(FristFragment.getInstance(mTitles[0]));
        mFragments.add(SencondFragment.getInstance(mTitles[1]));

        View decorView = getWindow().getDecorView();
        ViewPager vp = ViewFindUtils.find(decorView, R.id.viewpager);
        vp.setAdapter(new MyPagerAdapter(getSupportFragmentManager()));
        SlidingTabLayout sliding = ViewFindUtils.find(decorView, R.id.sliding);
        sliding.setViewPager(vp);
        sliding.setOnTabSelectListener(this);

        //设置显示的界面和按钮
//        vp.setCurrentItem(1);
//        sliding.showDot(1);

        //设置消息气泡
//        sliding.showMsg(3, 5);
//        sliding.setMsgMargin(3, 0, 10);
//        MsgView rtv_2_3 = sliding.getMsgView(3);
//        if (rtv_2_3 != null) {
//            rtv_2_3.setBackgroundColor(Color.parseColor("#6D8FB0"));
//        }
//
//        sliding.showMsg(5, 5);
//        sliding.setMsgMargin(5, 0, 10);
    }

        //标题按钮点击
    @Override
    public void onTabSelect(int position) {

    }

//标题按钮以显示再次点击
    @Override
    public void onTabReselect(int position) {

    }

//ViewPager 适配器
    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);
        }
    }


}

FristFragment代码
SencondFragment代码一样

public class FristFragment extends Fragment {

    private String mTitle;

//获取参数显示于界面
    public static FristFragment getInstance(String title) {
        FristFragment sf = new FristFragment();
        sf.mTitle = title;
        return sf;
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View v = inflater.inflate(R.layout.activity_frist_fragment, null);
        TextView card_title_tv = (TextView) v.findViewById(R.id.text);
        card_title_tv.setText(mTitle);

        return v;
    }
}

布局文件xml

<?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:orientation="vertical"
    android:gravity="center"
    >

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />

</LinearLayout>

SlidingTabLayout属性列表

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)