android页指示动画,Dachshund-Tab-Layout

扩展 Android Tab Layout,实现动画指示器效果,很漂亮。

cc39fd8d29f2536776ccf30eb875e7c6.gif

所有样式:IndicatorExampleCustom behaviorDachshundIndicatorcd5abedc6d7ab6b937992623c2aee045.gif

PointMoveIndicatorc1e7c27107ae1c27efe60a880ab5f38e.gifsetInterpolator(TimeInterpolator interpolator)

LineMoveIndicator07ae3faca456561ad05b436ea30cae37.gifsetEdgeRadius(int edgeRadius)

PointFadeIndicator387a9bab50bddff827ee5dbc3378fcfd.gif

LineFadeIndicator9721771b0d3fc636bba2fcb1ffe35295.gifsetEdgeRadius(int edgeRadius)

依赖allprojects {

repositories {

...

maven { url 'https://jitpack.io' }

}

}dependencies {

compile 'com.github.Andy671:Dachshund-Tab-Layout:v0.2.0'

}

使用

xml:

...

.../>

android:id="@+id/tab_layout"

android:layout_width="match_parent"

android:layout_height="wrap_content"/>

java:DachshundTabLayout tabLayout = (DachshundTabLayout) findViewById(R.id.tab_layout);

tabLayout.setupWithViewPager(yourViewPager);

设置样式(动画):AvailableAnimatedIndicator indicator = new AvailableAnimatedIndicator(tabLayout);

tabLayout.setAnimatedIndicator(indicator);

自定义样式:public class CustomIndicator implements AnimatedIndicatorInterface, ValueAnimator.AnimatorUpdateListener {

private DachshundTabLayout dachshundTabLayout;

public CustomIndicator(DachshundTabLayout dachshundTabLayout){

this.dachshundTabLayout = dachshundTabLayout;

//here set-up your Animators, Paints etc.

}

@Override

public void onAnimationUpdate(ValueAnimator animator) {

// when animator updates - invalidate your canvas, and draw what you want.

}

@Override

public void setSelectedTabIndicatorColor(@ColorInt int color) {

// customization of color

}

@Override

public void setSelectedTabIndicatorHeight(int height) {

// customization of height

}

@Override

public void setIntValues(int startXLeft, int endXLeft,

int startXCenter, int endXCenter,

int startXRight, int endXRight){

// X-positions of the target and current tabs

}

@Override

public void setCurrentPlayTime(long currentPlayTime) {

// current play time of the animation

}

@Override

public void draw(Canvas canvas) {

//Make your draw calls here

}

@Override

public long getDuration() {

return DEFAULT_DURATION;

}

}

属性AttributeTypeDefaultddIndicatorHeightdimension6dp

ddIndicatorColorcolorColor.WHITE

ddAnimatedIndicatorenum [dachshund, pointMove, lineMove, pointFade, lineFade]dachshund

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
最近接到一个任务,就是要修改原来用的官方support包TabLayout中的指示器线宽,改成固定值,当然网上有什么反射加padding什么的,可是治标不治本,切Tab过渡动画也加不了,什么?你告诉我github又xxx类似控件,可是为什么我要放弃google大神的源码呢,改改就能增加新功能了呢,为了达到目的,我就开始了下面一系列骚操作。0. 老规矩,先放效果图1. 骚操作之一:copy support包TabLayout 一份当做自己的自定义view本次骚操作是基于support '27.1.0'版本,从support '27.1.0'拷出文件到我的项目目录如下图,蓝色部分,四个文件,当然不是一帆风顺的,需要改点包名,取消掉一下注解警告,总之后面会放出源码 不同的版本可能需要拷贝出来的文件不一样哟,于support '27.1.0'版本需要拷出上图蓝色的4个文件2. 骚操作之二: fuck源代码,读懂之后开始改造首先指示器的线是画出来的,关键代码如下 (以下改动代码均为tabLayout类)   canvas.drawRect(mIndicatorLeft, getHeight() - mSelectedIndicatorHeight,                             mIndicatorRight, getHeight(), mSelectedIndicatorPaint);OK, mIndicatorLeft是滚动或者点击切tab时候通过偏移量计算出来的,总之不重要,完成第一个目标。修改指示器线宽,思路呢,就是给mIndicatorLeft和mIndicatorRight做一个偏移量就行了, 看看我怎么改的吧其中2个成员变量是我在SlidingTabStrip类中新增的 private int mSelectedIndicatorWidth =  dpToPx(27);;         private int mMinTabWidth = Integer.MAX_VALUE;我这里偷懒一下就不做方法暴露了,直接写死了线宽为27dp了好了,已经完成修改线宽目标了。(扩展一下:这里你也可以修改draw方法,画个图,或者画个小圆圈什么的)接下来增加指示线滑动切tab的过渡动画很简单我就放代码吧,关键就是在onPageScrolled方法里面做点手脚总共改动就50来行吧,就达成效果了。是不是很简单。(简单才怪,总之做出来之后觉得确实蛮简单的) 这样改好处多多,为什么呢?xml基本不需要改变,tablayout名字改一下,代码也是导包改一下,替换官方tablayout的时候代码几乎不需要变化,是不是很爽?3. github下载,喜欢就给个star吧,如果对你有帮助的话https://github.com/zjw-swun/AppOrder4. 总结官方support包就是可以这么任性的拷贝出来,有时候一个拷出一个类根本没涉及到别的类,善假于物也。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值