一款炫酷的TabLayout

ChangeTabLayout

项目地址：simplezhli/ChangeTabLayout 

简介：一款炫酷的 TabLayout

标签：TabLayout-ViewPager-

  

ChangeTabLayout 是模仿乐视 LIVE App 主界面 TabLayout 效果。

Preview

原效果图

原效果图转为 Gif 过大，所以将录制的 MP4 效果视频已经放入了根目录的preview文件夹内，有兴趣可去查看。

实现效果图

ChangeTabLayout在打开状态时

• 垂直方向切换时，文字的颜色大小变化。
• 水平方向切换时，文字的渐变与图片的变化。

ChangeTabLayout在收起状态时

• 垂直方向切换时，图片的变化。
• 点击ChangeTabLayout，切换为打开状态。

使用说明

因为使用场景的局限性等原因，暂时不上传至 Maven 中心仓库中，仅提供参考学习用途。

xml 使用部分

    <FrameLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v4.view.VerticalViewPager
            android:id="@+id/viewpager"
            android:background="@color/bg"
            android:layout_width="match_parent"
            android:fadingEdge="none"
            android:overScrollMode="never"
            android:layout_height="match_parent"/>

        <com.github.zl.changetablayout.ChangeTabLayout
            android:id="@+id/tabLayout"
            android:layout_width="110dp"
            android:layout_height="match_parent"/>

    </FrameLayout>

代码使用部分

   VerticalViewPager mViewPager = (VerticalViewPager) this.findViewById(R.id.viewpager);
   //只传入自己想要变化的图片,颜色属性生效
   mTabLayout.setViewPager(mViewPager, icon, null);
   //传入默认图片与选中图片,颜色属性不生效
   mTabLayout.setViewPager(mViewPager, iconDefault, iconSelected);

   //监听 TabLayout 点击事件
   mTabLayout.setOnTabClickListener(new ChangeTabLayout.OnTabClickListener() {
       @Override
       public void onTabClicked(int position) {

       }
   });

   //出入水平方向 Page 滚动参数，实现 TabLayout 的收缩效果（可选）
   mTabLayout.setPageScrolled(page, position, positionOffset);

属性说明

xml	默认值	说明
app:ctl_tabViewColor	默认为#161616	Tab 背景颜色
app:ctl_indicatorColor	默认为#70000000	指示器背景色
app:ctl_leftBorderColor	默认为#cf212b	指示器左侧竖条颜色
app:ctl_tabViewHeight	默认为 50dp	Tab 高度
app:ctl_tabImageHeight	默认为 18dp	Tab 中图片高度（宽度）
app:ctl_tabViewShadowColor	默认为#161616	Tab 收起时阴影颜色
app:ctl_indicatorPadding	默认为 4dp	指示器与 Tab 的上下边距之和
app:ctl_defaultTabTextSize	默认为 14sp	Tab 中文字默认大小
app:ctl_leftBorderThickness	默认为 3dp	指示器左侧竖条宽度
app:ctl_defaultTabTextColor	默认为#494949	Tab 中文字默认颜色
app:ctl_selectedTabTextColor	默认为#ffffff	Tab 中文字选中颜色
app:ctl_defaultTabImageColor	默认为#494949	Tab 中图片默认颜色
app:ctl_selectedTabImageColor	默认为#cf212b	Tab 中图片选中颜色

实现过程

具体参考这篇博客：ChangeTabLayout 实现过程

TODO

1. TabView中兼容多行文字。
2. 竖屏状态下ViewPage的onPageScrolled监听不正常。