页面滑动指示器

最新推荐文章于 2024-08-27 07:41:42 发布
最新推荐文章于 2024-08-27 07:41:42 发布
阅读量398 收藏 1
点赞数

FlycoTabLayout 是一个一个安卓的Tablayout库，其中主要包含了CommonTabLayout，SegmenTabLayout，SlidingTabLayout。相信到这里就会有很多人问这是一个什么鬼，不说那么多直接上图，简单粗暴。




CommonTabLayout的用法：

1.布局

<ScrollView
    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="wrap_content"
    android:background="#eeeeee"
    android:scrollbars="none">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <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"/>
    </LinearLayout>
</ScrollView>
2.业务： 
public class CommonTabActivity extends AppCompatActivity {
    private Context mContext = this;
    private ArrayList<Fragment> mFragments = new ArrayList<>();
    private ArrayList<Fragment> 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<CustomTabEntity> 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,减少代码量 用法:
    * 
    * <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);
   }
}
@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的使用方法

布局：

<ScrollView
    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="#eeeeee"
    android:scrollbars="none">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <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"/>
    </LinearLayout>
</ScrollView>
逻辑： 

public class SegmentTabActivity extends AppCompatActivity {
    private ArrayList<Fragment> mFragments = new ArrayList<>();
    private ArrayList<Fragment> 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的使用

布局：

<ScrollView
    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="wrap_content"
    android:background="#eeeeee"
    android:scrollbars="none">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <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"/>

        </LinearLayout>

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

    </LinearLayout>
</ScrollView>
逻辑： 

public class SlidingTabActivity extends AppCompatActivity implements OnTabSelectListener {
    private Context mContext = this;
    private ArrayList<Fragment> 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);
        }
    }
}

属性详解：

nameformatdescription
tl_indicator_colorcolor设置显示器颜色
tl_indicator_heightdimension设置显示器高度
tl_indicator_widthdimension设置显示器固定宽度
tl_indicator_margin_leftdimension设置显示器margin,当indicator_width大于0,无效
tl_indicator_margin_topdimension设置显示器margin,当indicator_width大于0,无效
tl_indicator_margin_rightdimension设置显示器margin,当indicator_width大于0,无效
tl_indicator_margin_bottomdimension设置显示器margin,当indicator_width大于0,无效
tl_indicator_corner_radiusdimension设置显示器圆角弧度
tl_indicator_gravityenum设置显示器上方(TOP)还是下方(BOTTOM),只对常规显示器有用
tl_indicator_styleenum设置显示器为常规(NORMAL)或三角形(TRIANGLE)或背景色块(BLOCK)
tl_underline_colorcolor设置下划线颜色
tl_underline_heightdimension设置下划线高度
tl_underline_gravityenum设置下划线上方(TOP)还是下方(BOTTOM)
tl_divider_colorcolor设置分割线颜色
tl_divider_widthdimension设置分割线宽度
tl_divider_paddingdimension设置分割线的paddingTop和paddingBottom
tl_tab_paddingdimension设置tab的paddingLeft和paddingRight
tl_tab_space_equalboolean设置tab大小等分
tl_tab_widthdimension设置tab固定大小
tl_textsizedimension设置字体大小
tl_textSelectColorcolor设置字体选中颜色
tl_textUnselectColorcolor设置字体未选中颜色
tl_textBoldboolean设置字体加粗
tl_iconWidthdimension设置icon宽度(仅支持CommonTabLayout)
tl_iconHeightdimension设置icon高度(仅支持CommonTabLayout)
tl_iconVisibleboolean设置icon是否可见(仅支持CommonTabLayout)
tl_iconGravityenum设置icon显示位置,对应Gravity中常量值,左上右下(仅支持CommonTabLayout)
tl_iconMargindimension设置icon与文字间距(仅支持CommonTabLayout)
tl_indicator_anim_enableboolean设置显示器支持动画(only for CommonTabLayout)
tl_indicator_anim_durationinteger设置显示器动画时间(only for CommonTabLayout)
tl_indicator_bounce_enableboolean设置显示器支持动画回弹效果(only for CommonTabLayout)
tl_indicator_width_equal_titleboolean设置显示器与标题一样长(only for SlidingTabLayout)

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

qq_31581443
关注
FlycoTabLayout使用
X小飞侠的博客
03-02 6533
step1：在module.gradle中添加dependencies{ compile 'com.android.support:support-v4:23.1.1' compile 'com.nineoldandroids:library:2.4.0' compile 'com.flyco.roundview:FlycoRoundView_Lib:1.1.2@aar'
Android页面滑动切换指示器
04-04
源码SpringIndicator，SpringIndicator是一个Android页面滑动切换指示器，类似于早晨例行指南应用(Morning Routine guide)。它最初是基于BezierDemo。左右滑动切换页面，使用bezier实现粘连效果的页面指示，基于BezierDemo。
Android TabLayout 库：FlycoTabLayout
LUFANZHENG的专栏
03-08 1万+
FlycoTabLayout 是一个一个安卓的Tablayout库，其中主要包含了CommonTabLayout，SegmenTabLayout，SlidingTabLayout。相信到这里就会有很多人问这是一个什么鬼，不说那么多直接上图，简单粗暴。 CommonTabLayout的用法： 1.布局 <ScrollView xmlns:android="h
Flutter 页面指示器教程
最新发布
gitblog_00961的博客
08-27 625
Flutter 页面指示器教程 flutter_page_indicatorPage indicator for flutter, with multiple build-in layouts.项目地址:https://gitcode.com/gh_mirrors/fl/flutter_page_indicator 1. 项目介绍 Flutter Page Indicator 是一个用于 Fl...
《Android 开源库》 FlycoTabLayout 从头到脚
AndroidKt
04-19 1万+
简介 FlycoTabLayout，是一个比Google原生TabLayout 功能更强大的TabLayout库。目前有3种TabLayout： SlidingTabLayout CommonTabLayout SegmentTabLayout 具体介绍和使用方法参考开源库的Wiki 官方示例： 源码分析 共有属性名称 格式 描述 tl_i...
开源项目： FlycoTabLayout
热门推荐
AnalyzeSystem的博客
05-24 8万+
开源项目效果调用实例必练基本功Android studio 项目导入依赖compile路径dependencies{ compile 'com.android.support:support-v4:23.1.1' compile 'com.flyco.tablayout:FlycoTabLayout_Lib:2.0.2@aar' }FlycoTabLayout是一个Android T
安卓项目实战之：FlycoTabLayout的介绍及使用
智玲君
09-19 5829
FlycoTabLayout简介 FlycoTabLayout是一个Android TabLayout库,目前包含了3个TabLayout，分别是： 1、SlidingTabLayout（依赖于ViewPager一起使用） 主要用于页面顶部导航Tab的实现，参照PagerSlidingTabStrip进行大量修改，新增了部分属性，支持多种风格的指示器显示，支持未读消息数和小红点显示，可以实现的效果...
android 自定义酷炫ViewPager切换效果带页面弹性指示器动画
09-02
在本教程中，我们将深入探讨如何创建一个自定义的ViewPager，使其具有酷炫的页面切换动画以及带有弹性效果的页面指示器。 首先，我们需要理解ViewPager的基本工作原理。ViewPager是Android Support Library的一部分...
viewpager特效滑动指示器
11-19
ViewPager很好用的滑动特效，实用方便
页面滑动器
08-22
页面滑动器页面切换
Android-一个基于SlidingTabLayout和ViewPager的能够自定义滑动指示器视图的页面管理控件
08-13
SlidingTabLayout是Google官方推荐的一个库，用于实现滑动指示器，它可以与ViewPager配合使用，显示当前所选页面的标题。当用户在ViewPager中滑动时，SlidingTabLayout会随之更新，显示当前页面的标签，从而帮助用户...
FlycoTabLayout : Android TabLayout 库
qq_19688207的博客
08-01 410
tl_indicator_margin_bottom dimension 设置显示器margin,当indicator_width大于0,无效。tl_indicator_margin_right dimension 设置显示器margin,当indicator_width大于0,无效。tl_indicator_margin_top dimension 设置显示器margin,当indicator_width大于0,无效。
Flycotablayout使用
weixin_47139560的博客
03-12 736
教你快速搭建viewpager+CommonTabLayout上图下文导航栏 第一步 引入我们的CommonTabLayout依赖 implementation ‘com.flyco.tablayout:FlycoTabLayout_Lib:2.0.2@aar’ 第二步 创建我们的布局 第三步 创建一个封装类 封装类必须实现CustomTabEntity接口 第四步 在我们的activity里面写我们的导航栏代码 ...
推荐开源项目：FlycoTabLayout —— 创新的Android标签页布局库
gitblog_00045的博客
03-19 800
推荐开源项目：FlycoTabLayout —— 创新的Android标签页布局库 FlycoTabLayoutAn Android TabLayout Lib项目地址:https://gitcode.com/gh_mirrors/fl/FlycoTabLayout 项目简介 是一个由H07000223开发的高性能、高度自定义的Android标签页布局库。它为开发者提供了丰富的定制选项和优雅的动...
FlycoTablayout：
风尘的博客
08-15 580
1.依赖： //flycoTabLayout依赖 implementation ‘com.flyco.tablayout:FlycoTabLayout_Lib:2.0.2@aar’ 2.介绍： 1.FlycoTabLayout 是一个一个安卓的Tablayout库，其中主要包含了CommonTabLayout，SegmenTabLayout，SlidingTabLayout 2.CommonTab...
FlycoTabLayout 使用教程
gitblog_00320的博客
08-08 357
FlycoTabLayout 使用教程 项目地址:https://gitcode.com/gh_mirrors/fl/FlycoTabLayout 项目介绍 FlycoTabLayout 是一个 Android TabLayout 库，提供了多种 TabLayout 实现，适用于不同的界面导航需求。该库目前包含了三个主要的 TabLayout 组件： SlidingTabLayout：依赖于 V...
页面滑动
觉罗晓的博客
09-11 215
window.onload = function() {  var tp = $(".div_title_css").offset().top; $("html, body", parent.document).animate({scrollTop:tp}, 'slow'); };
HorizontalGridPage:横向滑动网格页面（内置分页指示器）
05-17
自带翻页指示器。重要的是数据横向排列。 二、数据排列方式 三、文件说明 HorizontalGridPage---横向网格页面 PageGridView---------网格视图 PageIndicatorView----翻页指示器 PageGridAdapter------页面适配器 ...
FlycoTabLayout
snpmyn
01-17 514
库 依赖 implementation 'com.flyco.tablayout:FlycoTabLayout_Lib:2.1.2@aar' 使用 布局 &amp;amp;amp;amp;amp;amp;amp;amp;lt;com.flyco.tablayout.CommonTabLayout android:id=&amp;amp;amp;amp;amp;amp;amp;quot;@+id/mainActivity2Ctb&amp;amp;amp;amp;
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值