tdesign Tabs 自定义样式

转载

我是数据分析师 2024-11-25 10:32:51

文章标签 tdesign Tabs 自定义样式 lua 子视图 ide 文章分类 架构后端开发

本篇文章介绍使用CoordinatorLayout的自定义Behavior来实现如下的效果

tdesign Tabs 自定义样式_ide

分析本例效果

首先我们来分析下整个例子需要实现哪些效果:

ToolBar的上滑和下滑

TabLayout跟随ToolBar上移和下移

TabLayout颜色会跟随距离的变化发生渐变

滑动时会有黏性效果

滑动距离超过中间值后放开会自动滑向想要的方向
滑动距离未超过中间值放开则会自动回弹

本例需要的几个重要方法介绍

我们的例子中重写了Behavior的几个重要方法:

layoutDependsOn
onDependentViewChanged
onLayoutChild
onStartNestedScroll
onNestedPreScroll
onNestedScroll
onStopNestedScroll
onNestedScrollAccepted
onNestedPreFling
onStartNestedScroll 这些方法具体的说明可以参考:CoordinatorLayout自定义Behavior的简单总结

自定义 Behavior 实现思路

将ToolBar来作为依赖视图,TabLayout所在的父布局作为子视图,TabLayout通过 Nested Scrolling 机制调整ToolBar的位置，进而因ToolBar位置的改变,从而计算出一个百分比值,利用这个百分比值来影响自身的位置以及颜色

实现过程具体分析

有了思路我们就能一步步来实现效果了

首先继承自 Behavior,这是一个范型类,范型类型为被 Behavior 控制的视图类型：

public class ToolBarScrollBehavior extends CoordinatorLayout.Behavior<View> {

    private static final String TAG = ToolBarScrollBehavior.class.getSimpleName();
    private WeakReference<View> mDependencyView;
    private WeakReference<TabLayout> mTabLayout;
    private OverScroller mOverScroller;
    private Handler mHandler;
    private boolean isScrolling = false;
    private Context mContext;
    private ArgbEvaluator evaluator;

    public ToolBarScrollBehavior(Context context, AttributeSet attrs) {
        super(context, attrs);
        mContext = context;
        mOverScroller = new OverScroller(context);
        mHandler = new Handler();
        evaluator = new ArgbEvaluator();
    }

   ......
}

解释一下几个重要变量的作用:

Scroller 用来实现用户释放手指后的滑动动画
Handler 用来驱动 Scroller 的运行
dependentView 是依赖视图的一个弱引用,方便我们后面的操作
mTabLayout 是子视图里TabLayout的一个弱引用
ArgbEvaluator 是一个可以通过[0,1]的偏移量来计算两种色彩渐变色的类

@Override
    public boolean onLayoutChild(CoordinatorLayout parent, View child, int layoutDirection) {
        CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) child.getLayoutParams();
        if (params != null && params.height == CoordinatorLayout.LayoutParams.MATCH_PARENT) {
            child.layout(0, 0, parent.getWidth(), parent.getHeight());
            return true;
        }
        return super.onLayoutChild(parent, child, layoutDirection);
    }

由于CoodinatorLayout本质上是一个FrameLayout,不会像 LinearLayout 一样能自动分配各个 View 的高度,本例由于ToolBar上滑后会隐藏,子视图就会填满整个屏幕,因此我们将CoodinatorLayout的宽和高填充子视图

@Override
    public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {
        if (dependency != null && dependency.getId() == R.id.toolbar) {
            mDependencyView = new WeakReference<>(dependency);
            mTabLayout = new WeakReference<>((TabLayout) ((LinearLayout) child).getChildAt(0));
            return true;
        }
        return false;
    }

负责查询该 Behavior 是否依赖于某个视图,这里我们判断依赖视图是否为ToolBar,是的话返回true,之后的其他操作都会围绕ToolBar来执行了,我们可以在这里拿到子视图内的TabLayout,由于CoordinatorLayout 子视图的层级关系,如果想在子视图中使用 Behavior 进行控制,那么这个子视图一定是 CoordinatorLayout 的直接孩子,间接子视图是不具有 behavior 属性的,因此我们要在这里拿到子视图内的TabLayout引用,方便之后的颜色渐变操作

@Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {
        final float progress = Math.abs(dependency.getTranslationY() / (dependency.getHeight()));

        child.setTranslationY(dependency.getHeight() + dependency.getTranslationY());

        final int colorPrimary = getColor(R.color.colorPrimary);
        final int evaluate1 = (Integer) evaluator.evaluate(progress, Color.WHITE, colorPrimary);
        final int evaluate2 = (Integer) evaluator.evaluate(progress, colorPrimary, Color.WHITE);

        getTabLayoutView().setBackgroundColor(evaluate1);
        getTabLayoutView().setTabTextColors(evaluate2, evaluate2);
        getTabLayoutView().setSelectedTabIndicatorColor(evaluate2);

        return true;
    }

我们可以在这个方法里做调整子视图的操作,因为当依赖视图发生变化的时候就会回调这个方法依赖视图发生位移会影响translateY的值,我们主要用到的就是这个translateY 我们可以根据依赖视图的translateY除以依赖视图的高度来计算出一个百分比因数(0-1),通过这个因数配合ArgbEvaluator我们可以用来计算TabLayout颜色渐变的颜色值最后同样也要通过依赖视图的translateY来让子视图始终紧跟依赖视图下面

@Override
    public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, View child, View directTargetChild, View target, int nestedScrollAxes) {
        return (nestedScrollAxes & ViewCompat.SCROLL_AXIS_VERTICAL) != 0;
    }

该方法在用户按下手指的时候回调,该方法在返回true的时候才会引发其他一系列的回调,这里我们只需要考虑垂直滑动,因此在垂直滑动条件成立的时候返回true

@Override
    public void onNestedScrollAccepted(CoordinatorLayout coordinatorLayout, View child,
                                       View directTargetChild, View target, int nestedScrollAxes) {
        isScrolling = false;
        mOverScroller.abortAnimation();
        super.onNestedScrollAccepted(coordinatorLayout, child, directTargetChild, target, nestedScrollAxes);
    }

在这个方法里我们可以做一些准备工作,比如让之前的滑动动画结束

@Override
    public void onNestedPreScroll(CoordinatorLayout coordinatorLayout, View child, View target, int dx, int dy, int[] consumed) {
        super.onNestedPreScroll(coordinatorLayout, child, target, dx, dy, consumed);
        // 在这个方法里面只处理向上滑动
        if (dy < 0) {
            return;
        }
        View dependencyView = getDependencyView();
        float transY = dependencyView.getTranslationY() - dy;
        if (transY < 0 && -transY < getToolbarSpreadHeight()) {
            dependencyView.setTranslationY(transY);
            consumed[1] = dy;
        }
    }

    @Override
    public void onNestedScroll(CoordinatorLayout coordinatorLayout, View child, View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) {
        super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed);
        // 在这个方法里只处理向下滑动
        if (dyUnconsumed > 0) {
            return;
        }
        View dependencyView = getDependencyView();
        float transY = dependencyView.getTranslationY() - dyUnconsumed;
        if (transY < 0) {
            dependencyView.setTranslationY(transY);
        }
    }

这两个方法放在一起解释,由于onNestedPreScroll方法会优先于onNestedScroll之前调用,因此我们可以将上滑动作分配到onNestedPreScroll,下滑动作分配到onNestedScroll,我们来分析下这样实现的原理:

上滑当用户上滑时onNestedPreScroll优先调用,我们判断滑动方向,向上滑动才继续执行,通过调整依赖视图的translateY值来进行上移操作,并且消耗相应的consumed值,之后会回调onNestedScroll方法,如果dyUnconsumed还有值的话说明没有上滑操作没有完成,直接中断,然后继续回调onNestedPreScroll方法,重复一遍上面的操作,直到onNestedScroll方法里的dyUnconsumed消耗到0时就表示上滑到头了,整个上滑操作完成
下滑我们在onNestedPreScroll方法中只有上滑时dy>0的情况才继续执行,因此下滑时dy<0的值不会在onNestedPreScroll中消耗掉,会直接传递到onNestedScroll方法中的dyUnconsumed,然后我们可以通过调整依赖视图的translateY值来进行下移操作,并消耗相应的dyUnconsumed值,然后不断重复上面步骤直到依赖视图完全实现完毕,整个下滑操作完成

最后解释下为什么要分别分配到两个方法中,因为如果依赖视图完全折叠了，子视图又可以向下滚动，这时我们就不能决定是让依赖视图位移还是子视图滚动了，只有让子视图向下滚动到头才能保证唯一性

@Override
    public boolean onNestedPreFling(CoordinatorLayout coordinatorLayout, View child, View target,
                                    float velocityX, float velocityY) {
        return onUserStopDragging(velocityY);
    }

用户松开手指并且会发生惯性滚动之前调用,在这个方法内我们可以实现快速上滑或者快速下滑的操作

@Override
    public void onStopNestedScroll(CoordinatorLayout coordinatorLayout, View child, View target) {
        if (!isScrolling) {
            onUserStopDragging(800);
        }
    }

用户松开手指如果不发生惯性滚动,就会执行该方法,这里我们可以用来实现黏性滑动的效果

private boolean onUserStopDragging(float velocity) {
        View dependentView = getDependencyView();
        float translateY = dependentView.getTranslationY();
        float minHeaderTranslate = -(dependentView.getY() + getToolbarSpreadHeight());
        if (translateY == 0 || translateY == -getToolbarSpreadHeight()) {
            return false;
        }
        boolean targetState; // Flag indicates whether to expand the content.
        if (Math.abs(velocity) <= 800) {
            if (Math.abs(translateY) < Math.abs(translateY - minHeaderTranslate)) {
                targetState = false;
            } else {
                targetState = true;
            }
            velocity = 800; // Limit velocity's minimum value.
        } else {
            if (velocity > 0) {
                targetState = true;
            } else {
                targetState = false;
            }
        }

        float targetTranslateY = targetState ? minHeaderTranslate : -dependentView.getY();
        mOverScroller.startScroll(0, (int) translateY, 0, (int) (targetTranslateY), (int) (1000000 / Math.abs(velocity)));
        mHandler.post(flingRunnable);
        isScrolling = true;

        return true;
    }


    private Runnable flingRunnable = new Runnable() {
        @Override
        public void run() {
            if (mOverScroller.computeScrollOffset()) {
                getDependencyView().setTranslationY(mOverScroller.getCurrY());
                mHandler.post(this);
            } else {
                isScrolling = false;
            }
        }
    };

实现黏性滑动的代码,如果提供了速度的话使用速度来滑动,否则使用默认速度来滑动,在计算出需要滑动的剩余距离后,通过Scroller 配合 Handler 来实现该效果

代码示例: MaterialDesignFeatures

参考: http://www.jianshu.com/p/7f50faa65622

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。