Dachshund-Tab-Layout

  • 选项卡 (Tab Bar)
  • ★★★★★
  • 2017-11-07 00:26
  • 145 kb
  • Android Studio

介绍:

具有连续反馈动画的 Tab Layout 。

运行效果:

使用说明:

Available Animated Indicators

IndicatorExampleCustom behavior
DachshundIndicator687474703a2f2f692e67697068792e636f6d2f3131356e5a497a487173447063492e676966.gif
PointMoveIndicator687474703a2f2f692e67697068792e636f6d2f794b3979344e63504837774e612e676966.gifsetInterpolator(TimeInterpolator interpolator)
LineMoveIndicator687474703a2f2f692e67697068792e636f6d2f727a7673546d6c554f6f6430492e676966 (1).gifsetEdgeRadius(int edgeRadius)
PointFadeIndicator687474703a2f2f692e67697068792e636f6d2f6e515a594f7966594837674a792e676966.gif
LineFadeIndicator687474703a2f2f692e67697068792e636f6d2f5048556d576d724d304f3759492e676966.gifsetEdgeRadius(int edgeRadius)

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.1'
    }

使用

DachshundTabLayout是TabLayout的子类,因此它的用法与之非常相似。大多数原始的方法都应该能正常工作。

在xml中添加DachshundTabLayout,如果有TabLayout,直接替换成DachshundTabLayout就是了:

 <android.support.design.widget.AppBarLayout
 ...
    <android.support.v7.widget.Toolbar           
    .../>
    <com.kekstudio.dachshundtablayout.DachshundTabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

设置一个 ViewPager:

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

如果你想改变动画指示 (参见 Available Animated Indicators)

    //AvailableAnimatedIndicator - change it with available animated indicator

    AvailableAnimatedIndicator indicator = new AvailableAnimatedIndicator(tabLayout);
    tabLayout.setAnimatedIndicator(indicator);

创建自定义的AnimatedIndicator

如果你想创建自己的自定义AnimatedIndicator - 你可以实现AnimatedIndicator接口,如果你想使用animator - 实现AnimatorUpdateListener接口:

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

AttributeTypeDefault
ddIndicatorHeightdimension6dp
ddIndicatorColorcolorColor.WHITE
ddAnimatedIndicatorenum [dachshund, pointMove, lineMove, pointFade, lineFade]dachshund