Home

Awesome

ChangeTabLayout

Stars LICENSE 作者

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

Preview

原效果图

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

实现效果图

preview

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默认为#161616Tab背景颜色
app:ctl_indicatorColor默认为#70000000指示器背景色
app:ctl_leftBorderColor默认为#cf212b指示器左侧竖条颜色
app:ctl_tabViewHeight默认为50dpTab高度
app:ctl_tabImageHeight默认为18dpTab中图片高度（宽度）
app:ctl_tabViewShadowColor默认为#161616Tab收起时阴影颜色
app:ctl_indicatorPadding默认为4dp指示器与Tab的上下边距之和
app:ctl_defaultTabTextSize默认为14spTab中文字默认大小
app:ctl_leftBorderThickness默认为3dp指示器左侧竖条宽度
app:ctl_defaultTabTextColor默认为#494949Tab中文字默认颜色
app:ctl_selectedTabTextColor默认为#ffffffTab中文字选中颜色
app:ctl_defaultTabImageColor默认为#494949Tab中图片默认颜色
app:ctl_selectedTabImageColor默认为#cf212bTab中图片选中颜色

实现过程

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

TODO

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

Thanks For

License

Copyright 2017 simplezhli

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.