CoordinatorLayout 折叠悬浮效果

作者: 静染星辰 | 来源:发表于2019-05-16 16:45 被阅读40次

先看项目中的效果:

简单demo地址

1,认识coordinatorlayout

CoordinatorLayout是android.support.design.widget包中的一个可以实现嵌套滑动的控件,使用时导入design包:compile'com.android.support:design:26.0.0-alpha1',简单布局如图:

app:layout_behavior属性值即为该view需执行的动作(该view的behavior动作类所在)

2,核心原理Behavior

Behavior意思就是执行你定制的动作,是CoordinatorLayout的一个抽象内部类,有一个泛型是指定的我们应用这个Behavior的View的类型,例如上面的header_scrolling_behavior对应的字符串其实是自定义的Behavior“HeaderScrollingBehavior”,这个HeaderScrollingBehavior内部类指定的泛型是RecyclerView,理论上这个Behavior我们任何的View都可以使用,我们在自定义的时候,如果不是特殊的行为,也可以直接指定泛型View。

recycleView的行为逻辑:

    extends CoordinatorLayout.Behavior 

    public HeaderScrollingBehavior(Context context, AttributeSet attrs) {//带有参数的这个构造必须要重载,因为在CoordinatorLayout里利用反射去获取这个Behavior的时候就是拿的这个构造。super(context, attrs); }

    @Override

    public boolean layoutDependsOn(CoordinatorLayout parent, RecyclerView child, View dependency) {

            if (dependency !=null && dependency.getId() == R.id.scrolling_header) {//recycleview(child)关联的view(dependency)

            dependentView =new WeakReference<>(dependency);

            return true;

        }

    return false;

    }

    @Override

    public boolean onDependentViewChanged(CoordinatorLayout parent, RecyclerView child, View dependency) {

Resources resources = getDependentView().getResources();

        //translationY是Y平移的距离

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

        //得到滑动时dependency的透明度,动态设置dependency透明度

        final float progress =1.f - Math.abs(dependency.getTranslationY() / (dependency.getHeight() - resources.getDimension(R.dimen.collapsed_header_height)));

        dependency.setAlpha(progress);

        //动态设置dependency放大缩小

        float scale =1 +0.4f * (1.f - progress);

        dependency.setScaleX(scale);

        dependency.setScaleY(scale);

        return true;

    }

滑动置顶悬浮的控件逻辑:

@Override

    public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency)     {

    if (dependency !=null && dependency.getId() == R.id.scrolling_header) {

            dependentView =new WeakReference<>(dependency);

            return true;

        }

        return false;

    }

@Override

    public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {

        Resources resources = getDependentView().getResources();

        final float progress =1.f -

Math.abs(dependency.getTranslationY() / (dependency.getHeight() - resources.getDimension(R.dimen.collapsed_header_height)));

        // Translation

        final float collapsedOffset = resources.getDimension(R.dimen.collapsed_float_offset_y);

        final float initOffset = resources.getDimension(R.dimen.init_float_offset_y);

        float translateY = collapsedOffset + (initOffset - collapsedOffset) * progress;

        child.setTranslationY(translateY);

        // Background

        child.setBackgroundColor((int)argbEvaluator.evaluate(

progress,

                resources.getColor(R.color.colorCollapsedFloatBackground),

                resources.getColor(R.color.colorInitFloatBackground)));

        // Margins

        final float collapsedMargin = resources.getDimension(R.dimen.collapsed_float_margin);

        final float initMargin = resources.getDimension(R.dimen.init_float_margin);

        final int margin = (int) (collapsedMargin + (initMargin - collapsedMargin) * progress);

        CoordinatorLayout.LayoutParams lp = (CoordinatorLayout.LayoutParams) child.getLayoutParams();

        lp.setMargins(margin, 0, margin, 0);

        child.setLayoutParams(lp);

        return true;

    }

private ViewgetDependentView() {

        return dependentView.get();

    }

}

--------END------

我是静染星辰,私人微信:azxy986753

欢迎添加微信,互相学习,互相进步!

相关文章

网友评论

    本文标题:CoordinatorLayout 折叠悬浮效果

    本文链接:https://www.haomeiwen.com/subject/cviuaqtx.html