android指示器动画大全,Dachshund Tab Layout 扩展的Android标签布局拥有动画指示器

Dachshund Tab Layout

625332134c6f4d4600884b99daebf603.png625332134c6f4d4600884b99daebf603.png625332134c6f4d4600884b99daebf603.png

625332134c6f4d4600884b99daebf603.png

Introduction

Boosted Android Tab Layout with custom animated indicators including "Dachshund" animation inspired by this.

Sample

625332134c6f4d4600884b99daebf603.png

Available Animated Indicators

Indicator

Example

Custom behavior

DachshundIndicator

625332134c6f4d4600884b99daebf603.png

PointMoveIndicator

625332134c6f4d4600884b99daebf603.png

setInterpolator(TimeInterpolator interpolator)

LineMoveIndicator

625332134c6f4d4600884b99daebf603.png

setEdgeRadius(int edgeRadius)

PointFadeIndicator

625332134c6f4d4600884b99daebf603.png

LineFadeIndicator

625332134c6f4d4600884b99daebf603.png

setEdgeRadius(int edgeRadius)

Installation

Step 1

Add the JitPack repository to your build file

allprojects {

repositories {

...

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

}

}

Step 2

Add the dependency

dependencies {

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

}

Usage

DachshundTabLayout is a subclass of TabLayout, so usage is pretty similar. The most of the original methods should work without any problems. See sample and source code for more info.

Add DachshundTabLayout to xml (after the Toolbar in the AppBarLayout), if you have TabLayout simply replace it:

...

.../>

android:id="@+id/tab_layout"

android:layout_width="match_parent"

android:layout_height="wrap_content"/>

Setup it with a ViewPager:

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

tabLayout.setupWithViewPager(yourViewPager);

If you want to change animated indicator (see Available Animated Indicators):

//AvailableAnimatedIndicator - change it with available animated indicator

AvailableAnimatedIndicator indicator = new AvailableAnimatedIndicator(tabLayout);

tabLayout.setAnimatedIndicator(indicator);

Center align

In v0.3.2 I've added ddCenterAlign parameter. You can use it when you want to center the tabs in scrollable tabMode. Working behavior from Stackoverflow question.

...

custom:tabMode="scrollable"

custom:ddCenterAlign="true"/>

Creating custom AnimatedIndicator

If you want to create your own custom AnimatedIndicator - you can implement AnimatedIndicatorInterface and if you want to use animators - AnimatorUpdateListener (See JavaDoc of AnimatedIndicatorInterface for more info):

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;

}

}

XML Attributes

Attribute

Type

Default

ddIndicatorHeight

dimension

6dp

ddIndicatorColor

color

Color.WHITE

ddAnimatedIndicator

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

dachshund

Contribution

Feel free to fork the repo, make pull requests or fix existing bug

Feel free to open issues if you find some bug or unexpected behaviour

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值