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
TabView
中兼容多行文字。- 竖屏状态下
ViewPage
的onPageScrolled
监听不正常。