• This repository has been archived on 22/Dec/2020
  • Stars
    star
    340
  • Rank 124,317 (Top 3 %)
  • Language
    Java
  • License
    Apache License 2.0
  • Created over 7 years ago
  • Updated about 7 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

[停止维护]一款炫酷的TabLayout

ChangeTabLayout

Stars LICENSE 作者

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

Preview

原效果图

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

实现效果图

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. 竖屏状态下ViewPageonPageScrolled监听不正常。

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.

More Repositories

1

flutter_deer

🦌 Flutter 练习项目(包括集成测试、可访问性测试)。内含完整UI设计图,更贴近真实项目的练习。Flutter practice project (including integration testing and accessibility testing). Contains complete UI design drawings for a more realistic practice project.
Dart
7,396
star
2

Tesseract-OCR-Scanner

[停止维护]基于Tesseract-OCR实现自动扫描识别手机号
Java
649
star
3

AndroidUT

Android开发中必要的一环---单元测试(Unit Test)
Java
496
star
4

RemoteControlView

【停止维护】一款万能遥控器的交互效果
Java
416
star
5

flutter_remote_control

flutter remote control
Dart
175
star
6

flutter_2d_amap

Flutter 高德2D地图插件(支持Android、iOS、Web)
Dart
167
star
7

Saber

🏄 帮助你快速使用Android的LiveData与ViewModel,已支持SavedState
Java
144
star
8

RxPay

【停止维护】支付宝、微信支付快速集成
Java
47
star
9

RecyclerViewExtensionsDemo

RecyclerView列表优化方案
Java
43
star
10

Dagger2Example

[停止维护]Dagger2简单使用,推荐使用Jetpack Hilt。
Java
39
star
11

RxBindingExample

[停止维护]RxBinding使用例子
Java
25
star
12

SAFExample

SAF(Storage Access Framework)使用例子
Java
21
star
13

flutter_riverpod_examples

Dart
20
star
14

AspectJDemo

AspectJ Demo
Java
13
star
15

RedEnvelopeService

[停止维护]抢红包助手
Java
11
star
16

ZCarouselView

[停止维护]一种轮播图效果
Java
7
star
17

flutter_video_player

利用官方video_player项目结构,使用外接纹理的方式接入阿里云点播SDK。个人练习,仅供参考。
Dart
3
star
18

flutter_ffi

C++
2
star
19

rn-learning

React Native练习Demo
JavaScript
1
star
20

simplezhli

1
star