浅析NestedScrolling嵌套滑动机制之实践篇-仿写饿了么商家详情页

预览

嵌套系列导航

本文已在公众号鸿洋原创发布。未经许可，不得以任何形式转载！

概述

之前的《浅析NestedScrolling嵌套滑动机制之基础篇》带大家了解NestedScrolling的原理和使用还有它的改进等等，这篇文章手把手基于NestedScrolling嵌套滑动机制现实饿了么v8.27.6商家详情页。github地址：https://github.com/pengguanming/ElemeNestedScrolling

效果预览

需要仿写的有两部分，第一个是商家页的嵌套滑动，第二个是商家点餐页的嵌套滑动。

商家滑动

商家点餐滑动

apk下载地址：
github
百度云 密码:jm39

商家页的嵌套滑动实现

效果分析

商家滑动页层级

商家滑动页布局主要有上图五部分组成，逻辑上的层级如图所示有3层。

商家滑动TransY

滑动Content部分时利用View的TransitionY属性改变位置来消耗滑动值，根据Content部分的TransitionY设定各种范围从而计算百分比来执行颜色渐变、位移、Scale、Alpha效果。下面来说明上图中变量的意义：

topBarHeight;//topBar高度
contentTransY;//滑动内容初始化TransY
upAlphaScaleY;//上滑时logo，收藏icon缩放、搜索icon、分享icon透明度临界值
upAlphaGradientY;//上滑时搜索框、topBar背景，返回icon、拼团icon颜色渐变临界值
downFlingCutOffY;//从折叠状态下滑产生fling时回弹到初始状态的最大值
downCollapsedAlphaY;//下滑时折叠内容透明度临界值
downShopBarTransY;//下滑时购物内容位移临界值
downContentAlphaY;//下滑时收起按钮和滑动内容透明度临界值
ivCloseHeight;//收起按钮的高度
content部分的上滑范围=[topBarHeight,contentTransY]
content部分的下滑范围=[contentTransY,满屏高度-ivCloseHeight]

举个根据Content部分的TransitionY计算百分比例子(请注意：根据Android的坐标系contentTransY>upAlphaScaleY)：

    /**
    *计算上滑时logo，收藏icon缩放、搜索icon、分享icon透明度的百分比其范围控制在[0.0f,1.0f]，
    而Content部分的TranslationY值控制在[upAlphaScaleY,contentTransY],v4包的MathUtils类的clamp方法可以帮助控制值的范围，超过范围时百分下限为0，上限为1。
    */
    upAlphaScalePro= (contentTransY - MathUtils.clamp(Content部分的TranslationY, upAlphaScaleY, 
    contentTransY)) / (contentTransY-upAlphaScaleY);

    //根据upAlphaScalePro设置icon的透明度
    float alpha = 1 - upAlphaScalePro;
    setAlpha(mIvShare, alpha);

ElemeNestedScrollLayout

商家页的嵌套滑的自定义View继承FrameLayout，命名为ElemeNestedScrollLayout，在Content部分能够滑动的View只有ViewPager里Fragment的RecyclerView和NestedScrollView，它们都实现了NestedScrollingChild2接口，故自定义View要实现NestedScrollingParent2接口根据具体逻辑来消费NestedScrollingChild2的滑动值。

布局

下面是布局要点，侧重于控件的尺寸和位置，完整布局请参考:ElemeNestedScrollLayout布局

<ElemeNestedScrollLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <!--Header部分-->
            <android.support.constraint.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="@dimen/header_height"
                ... >
        <!--Header部分-->
        <!--Collasp Content部分-->
            <<android.support.constraint.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1" 
                ... >
        <!--Collasp Content部分-->
     </LinearLayout>
    
    <!--Top Bar部分-->//自定义View，其作用是在折叠状态时适配沉浸式状态栏效果。
    <TopBarLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/top_bar_height"
        ...>
    <!--Top Bar部分-->

    <!--Content部分-->
    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:translationY="@dimen/content_trans_y">
            <com.flyco.tablayout.SlidingTabLayout
                android:layout_width="match_parent"
                android:layout_height="@dimen/stl_height"/>
            <android.support.v4.view.ViewPager
                android:layout_width="match_parent"
                android:layout_height="0dp"/>
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="@dimen/iv_close_height"/>
    </android.support.constraint.ConstraintLayout>
    <!--Content部分-->

    <!--Shop Bar部分-->
        <android.support.constraint.ConstraintLayout
            android:layout_gravity="bottom"
            android:layout_width="match_parent"
            android:layout_height="@dimen/shop_bar_height"
            ... >
    <!--Shop Bar部分-->
</ElemeNestedScrollLayout>

绑定需要做效果的View、引入Dimens、测量Content部分的高度

从上面图片能够分析出：折叠状态时，Content部分高度=满屏高度-TopBar部分的高度

public class ElemeNestedScrollLayout extends FrameLayout implements NestedScrollingParent2 {
    //Header部分
    private View mIvLogo;
    private View mVCollect;

    //Collaps Content部分
    private View mClCollapsedHeader;
    private View mCollapsedContent;
    private View mRvCollapsed;

    //TopBar部分
    private View mIvSearch;
    private View mIvShare;
    private View mTvSearch;
    private View mTopBar;
    private ImageView mIvBack;
    private ImageView mIvAssemble;

    //Content部分
    private View mLlContent;
    private View mIvClose;
    private View mViewPager;
    private View mStl;

    //ShopBar部分
    private View mShopBar;

    private float topBarHeight;//topBar高度
    private float shopBarHeight;//shopBar高度
    private float contentTransY;//滑动内容初始化TransY
    private float upAlphaScaleY;//上滑时logo，收藏icon缩放、搜索icon、分享icon透明度临界值
    private float upAlphaGradientY;//上滑时搜索框、topBar背景，返回icon、拼团icon颜色渐变临界值
    private float downFlingCutOffY;//从折叠状态下滑产生fling时回弹到初始状态的临界值
    private float downCollapsedAlphaY;//下滑时折叠内容透明度临界值
    private float downShopBarTransY;//下滑时购物内容位移临界值
    private float downContentAlphaY;//下滑时收起按钮和滑动内容透明度临界值
    private float downEndY;//下滑时终点值
  
    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        mLlContent = findViewById(R.id.cl_content);
        mCollapsedContent = findViewById(R.id.cl_collapsed_content);
        mIvSearch = findViewById(R.id.iv_search);
        mIvShare = findViewById(R.id.iv_share);
        mIvBack = findViewById(R.id.iv_back);
        mIvAssemble = findViewById(R.id.iv_assemble);
        mIvLogo = findViewById(R.id.iv_logo);
        mVCollect = findViewById(R.id.iv_collect);
        mTvSearch = findViewById(R.id.tv_search);
        mTopBar = findViewById(R.id.cl_top_bar);
        mClCollapsedHeader = findViewById(R.id.cl_collapsed_header);
        mRvCollapsed = findViewById(R.id.rv_collasped);
        mIvClose = findViewById(R.id.iv_close);
        mViewPager = findViewById(R.id.vp);
        mStl = findViewById(R.id.stl);
        mShopBar = findViewById(R.id.cl_shop_bar);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //设置Content部分高度
        topBarHeight= mTopBar.getMeasuredHeight();
        ViewGroup.LayoutParams params = mLlContent.getLayoutParams();
        params.height = (int) (getMeasuredHeight() - topBarHeight);
        //重新测量
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

     @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        shopBarHeight = getResources().getDimension(R.dimen.shop_bar_height);
        contentTransY = getResources().getDimension(R.dimen.content_trans_y);
        downShopBarTransY = contentTransY+ shopBarHeight;
        upAlphaScaleY = contentTransY - dp2px(32);
        upAlphaGradientY = contentTransY - dp2px(64);
        downFlingCutOffY = contentTransY + dp2px(28);
        downCollapsedAlphaY = contentTransY + dp2px(32);
        downContentAlphaY = getResources().getDimension(R.dimen.donw_content_alpha_y);
        downEndY = getHeight() - getResources().getDimension(R.dimen.iv_close_height);
    }
}

现实NestedScrollingParent2接口

onStartNestedScroll()

ElemeNestedScrollLayout只处理Content部分里可滑动View的垂直方向的滑动。

    @Override
    public boolean onStartNestedScroll(@NonNull View child, @NonNull View target, int axes, int type) {
        return child.getId() == mLlContent.getId()&&
        axes==ViewCompat.SCROLL_AXIS_VERTICAL;
    }

onNestedPreScroll()

接下来就是处理滑动，上面效果分析提过：Content部分的上滑范围=[topBarHeight,contentTransY]、
下滑范围=[contentTransY,downEndY(即满屏高度-ivCloseHeight)]即滑动范围为[topBarHeight,downEndY]；ElemeNestedScrollLayout要控制Content部分的TransitionY值要在范围内，具体处理如下。

Content部分里可滑动View往上滑动时：

1、如果Content部分当前TransitionY+View滑动的dy > topBarHegiht，ElemeNestedScrollLayout设置Content部分的TransitionY为Content部分当前TransitionY+View滑动的dy达到移动的效果来消费View的dy。

2、如果Content部分当前TransitionY+View滑动的dy = topBarHegiht，ElemeNestedScrollLayout同上操作。

3、如果Content部分当前TransitionY+View滑动的dy < topBarHegiht，ElemeNestedScrollLayout只消费部分dy(即Content部分当前TransitionY到topBarHeight差值)，剩余的dy让View滑动消费。

Content部分里可滑动View往下滑动并且View已经不能往下滑动
（比如RecyclerView已经到顶部还往下滑）时：

1、如果Content部分当前TransitionY+View滑动的dy >= topBarHeight 并且 Content部分当前TransitionY+View滑动的dy <= downEndY，ElemeNestedScrollLayout设置Content部分的TransitionY为Content部分当前TransitionY+View滑动的dy达到移动的效果来消费View的dy。

2、Content部分当前TransitionY+View滑动的dy > downEndY,ElemeNestedScrollLayout只消费部分dy(即Content部分当前TransitionY到downEndY差值)。

下面是代码实现：

    @Override
    public void onNestedPreScroll(@NonNull View target, int dx, int dy, @NonNull int[] consumed, int type) {
        float contentTransY = mLlContent.getTranslationY() - dy;
        //处理上滑
        if (dy > 0) {
            if (contentTransY >= topBarHeight) {
                translationByConsume(mLlContent, contentTransY, consumed, dy);
            } else {
                translationByConsume(mLlContent, topBarHeight, consumed, (mLlContent.getTranslationY() - topBarHeight));
            }
        }
        if (dy < 0 && !target.canScrollVertically(-1)) {
            //处理下滑
            if (contentTransY >= topBarHeight && contentTransY <= downEndY) {
                translationByConsume(mLlContent, contentTransY, consumed, dy);
            } else {
                translationByConsume(mLlContent, downEndY, consumed, downEndY - mLlContent.getTranslationY());
            }
        }
    }

    private void translationByConsume(View view, float translationY,
     int[] consumed, float consumedDy) {
        consumed[1] = (int) consumedDy;
        view.setTranslationY(translationY);
    }

就这样处理好了Content部分的滑动，接下来就处理Content部分的滑动过程中各种View的效果并对外暴露百分比监听接口，比如上滑折叠过程改变状态栏字体就需要用到。下面的范围值是针对Content部分的TransitionY，根据之前效果分析具体如下：

1、设置logo、收藏icon缩放，搜索icon、分享icon透明度范围[upAlphaScaleY,contentTransY]

2、设置搜索框、topBar背景，返回icon、拼团icon颜色渐范围[upAlphaGradientY,contentTransY]

3、设置Collapse Content部分透明度范围[contentTransY,downCollapsedAlphaY]

4、设置Shop Bar位移范围[contentTransY,downShopBarTransY]

5、设置收起按钮和滑动内容透明度[downContentAlphaY,downEndY]

下面是代码实现：

    ...
    private ArgbEvaluator iconArgbEvaluator;//返回icon、拼团icon颜色渐变的Evaluator
    private ArgbEvaluator topBarArgbEvaluator;//topbar颜色渐变的Evaluator

    public ElemeNestedScrollLayout(@NonNull Context context) {
        this(context, null);
    }

    public ElemeNestedScrollLayout(@NonNull Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, -1);
    }

    public ElemeNestedScrollLayout(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mParentHelper = new NestedScrollingParentHelper(this);

        iconArgbEvaluator = new ArgbEvaluator();
        topBarArgbEvaluator = new ArgbEvaluator();
        ...
    }

     @Override
    public void onNestedPreScroll(@NonNull View target, int dx, int dy, @NonNull int[] consumed, int type) {
        ...

        //根据upAlphaScalePro,设置logo、收藏icon缩放，搜索icon、分享icon透明度
        float upAlphaScalePro = getUpAlphaScalePro();
        alphaScaleByPro(upAlphaScalePro);

        //根据upAlphaGradientPro,设置topBar背景、返回icon、拼团icon颜色渐变值，搜索框透明度
        float upAlphaGradientPro = getUpAlphaGradientPro();
        alphaGradientByPro(upAlphaGradientPro);

        //根据downCollapsedAlphaPro,设置折叠内容透明度
        float downCollapsedAlphaPro = getDownCollapsedAlphaPro();
        alphaCollapsedContentByPro(downCollapsedAlphaPro);

        //根据downContentAlphaPro,设置滑动内容、收起按钮的透明度
        float downContentAlphaPro = getDownContentAlphaPro();
        alphaContentByPro(downContentAlphaPro);

        //根据downShopBarTransPro,设置购物内容内容位移
        float downShopBarTransPro = getDownShopBarTransPro();
        transShopBarByPro(downShopBarTransPro);

        //根据upCollapsedContentTransPro,设置折叠内容位移
        float upCollapsedContentTransPro = getUpCollapsedContentTransPro();
        transCollapsedContentByPro(upCollapsedContentTransPro);

        if (mProgressUpdateListener!=null){
            mProgressUpdateListener.onUpAlphaScaleProUpdate(upAlphaScalePro);
            mProgressUpdateListener.onUpAlphaGradientProUpdate(upAlphaGradientPro);
            mProgressUpdateListener.onDownCollapsedAlphaProUpdate(downCollapsedAlphaPro);
            mProgressUpdateListener.onDownContentAlphaProUpdate(downContentAlphaPro);
            mProgressUpdateListener.onDownShopBarTransProUpdate(downShopBarTransPro);
            mProgressUpdateListener.onUpCollapsedContentTransProUpdate(upCollapsedContentTransPro);
        }
    }

    /**
     * 根据upCollapsedContentTransPro,设置折叠内容位移
     */
    private void transCollapsedContentByPro(float upCollapsedContentTransPro) {
        float collapsedContentTranY = - (upCollapsedContentTransPro * (contentTransY - topBarHeight));
        translation(mCollapsedContent,collapsedContentTranY);
    }

    /**
     * 根据downShopBarTransPro,设置购物内容内容位移
     */
    private void transShopBarByPro(float downShopBarTransPro) {
        float shopBarTransY = (1-downShopBarTransPro) * shopBarHeight;
        translation(mShopBar,shopBarTransY);
    }

    /**
     * 根据downContentAlphaPro,设置滑动内容、收起按钮的透明度
     */
    private void alphaContentByPro(float downContentAlphaPro) {
        setAlpha(mViewPager,downContentAlphaPro);
        setAlpha(mStl,downContentAlphaPro);
        setAlpha(mIvClose,1-downContentAlphaPro);
        if (mIvClose.getAlpha()==0){
            mIvClose.setVisibility(GONE);
        }else {
            mIvClose.setVisibility(VISIBLE);
        }
    }

    /**
     * 根据downCollapsedAlphaPro,设置折叠内容透明度
     */
    private void alphaCollapsedContentByPro(float downCollapsedAlphaPro) {
        setAlpha(mClCollapsedHeader,downCollapsedAlphaPro);
        setAlpha(mRvCollapsed,1 - downCollapsedAlphaPro);
    }

    /**
     * 根据upAlphaGradientPro,设置topBar背景、返回icon、拼团icon颜色渐变值，搜索框透明度
     */
    private void alphaGradientByPro(float upAlphaGradientPro) {
        setAlpha(mTvSearch, upAlphaGradientPro);
        int iconColor = (int) iconArgbEvaluator.evaluate(
                upAlphaGradientPro,
                getContext().getResources().getColor(R.color.white),
                getContext().getResources().getColor(R.color.black)
        );
        int topBarColor = (int) topBarArgbEvaluator.evaluate(
                upAlphaGradientPro,
                getContext().getResources().getColor(R.color.trans_white),
                getContext().getResources().getColor(R.color.white)
        );
        mTopBar.setBackgroundColor(topBarColor);
        mIvBack.getDrawable().mutate().setTint(iconColor);
        mIvAssemble.getDrawable().mutate().setTint(iconColor);
    }

    /**
     * 根据upAlphaScalePro,设置logo、收藏icon缩放，搜索icon、分享icon透明度
     */
    private void alphaScaleByPro(float upAlphaScalePro) {
        float alpha = 1 - upAlphaScalePro;
        float scale = 1 - upAlphaScalePro;
        setAlpha(mIvSearch, alpha);
        setAlpha(mIvShare, alpha);
        setScaleAlpha(mIvLogo, scale, scale, alpha);
        setScaleAlpha(mVCollect, scale, scale, alpha);
    }

    private float getDownContentAlphaPro() {
        return (downEndY - MathUtils.clamp(mLlContent.getTranslationY(), downContentAlphaY, downEndY)) / (downEndY - downContentAlphaY);
    }

    private float getDownCollapsedAlphaPro() {
        return (downCollapsedAlphaY - MathUtils.clamp(mLlContent.getTranslationY(), contentTransY, downCollapsedAlphaY)) / (downCollapsedAlphaY -contentTransY);
    }

    private float getDownShopBarTransPro() {
        return (downShopBarTransY - MathUtils.clamp(mLlContent.getTranslationY(), contentTransY, downShopBarTransY)) / (downShopBarTransY -contentTransY);
    }

    private float getUpAlphaGradientPro() {
        return (upAlphaScaleY - MathUtils.clamp(mLlContent.getTranslationY(), upAlphaGradientY, upAlphaScaleY)) / (upAlphaScaleY-upAlphaGradientY);
    }

    private float getUpAlphaScalePro() {
        return (contentTransY - MathUtils.clamp(mLlContent.getTranslationY(), upAlphaScaleY, contentTransY)) / (contentTransY-upAlphaScaleY);
    }

    private float getUpCollapsedContentTransPro() {
        return (contentTransY - MathUtils.clamp(mLlContent.getTranslationY(), topBarHeight, contentTransY)) / (contentTransY-topBarHeight);
    }

    private void setAlpha(View view, float alpha){
        view.setAlpha(alpha);
    }

    private void setScale(View view ,float scaleY,float scaleX){
        view.setScaleY(scaleY);
        view.setScaleX(scaleX);
    }
    private void setScaleAlpha(View view ,float scaleY,float scaleX,float alpha){
        setAlpha(view,alpha);
        setScale(view,scaleY,scaleX);
    }

    private void translation(View view, float translationY) {
            view.setTranslationY(translationY);
    }

    public interface ProgressUpdateListener{

        void onUpCollapsedContentTransProUpdate(float pro);

        void onUpAlphaScaleProUpdate(float pro);

        void onUpAlphaGradientProUpdate(float pro);

        void onDownCollapsedAlphaProUpdate(float pro);

        void onDownContentAlphaProUpdate(float pro);

        void onDownShopBarTransProUpdate(float pro);
    }

onStopNestedScroll()

在下滑Content部分从初始状态转换到展开状态的过程中松手就会执行收起或展开的动画，这逻辑在onStopNestedScroll()实现，但注意如果动画未执行完毕手指再落下滑动时，应该在onNestedScrollAccepted()取消当前执行中的动画。


收起动画

如果Content部分的TransitionY没有超过downCollapsedAlphaY，执行收起Content部分动画效果，恢复到初始转态。

展开动画

如果Content部分的TransitionY超过了downCollapsedAlphaY，执行展开Content部分动画效果，转换到展开转态。
代码实现如下：

    ...
    public static final long ANIM_DURATION_FRACTION = 200L;
    private ValueAnimator restoreOrExpandAnimator;//收起或展开折叠内容时执行的动画
    
    public ElemeNestedScrollLayout(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        ...
        restoreOrExpandAnimator = new ValueAnimator();
        restoreOrExpandAnimator.setInterpolator(new AccelerateInterpolator());
        restoreOrExpandAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                translation(mLlContent, (float) animation.getAnimatedValue());

                //根据downShopBarTransPro,设置购物内容内容位移
                float downShopBarTransPro = getDownShopBarTransPro();
                transShopBarByPro(downShopBarTransPro);

                //根据downCollapsedAlphaPro,设置折叠内容透明度
                float downCollapsedAlphaPro = getDownCollapsedAlphaPro();
                alphaCollapsedContentByPro(downCollapsedAlphaPro);

                //根据downContentAlphaPro,设置滑动内容、收起按钮的透明度
                float downContentAlphaPro = getDownContentAlphaPro();
                alphaContentByPro(downContentAlphaPro);

                if (mProgressUpdateListener!=null){
                    mProgressUpdateListener.onDownCollapsedAlphaProUpdate(downCollapsedAlphaPro);
                    mProgressUpdateListener.onDownContentAlphaProUpdate(downContentAlphaPro);
                    mProgressUpdateListener.onDownShopBarTransProUpdate(downShopBarTransPro);
                }
            }
        });
    }

    @Override
    public void onNestedScrollAccepted(@NonNull View child, @NonNull View target, int axes, int type) {
        mParentHelper.onNestedScrollAccepted(child, target, axes, type);
        if (restoreOrExpandAnimator.isStarted()) {
            restoreOrExpandAnimator.cancel();
        }
    }

    @Override
    public void onStopNestedScroll(@NonNull View target, int type) {
        mParentHelper.onStopNestedScroll(target, type);
        //如果不是从初始状态转换到展开状态过程触发返回
        if (mLlContent.getTranslationY() <= contentTransY) {
            return;
        }

        //根据百分比计算动画执行的时长
        float downCollapsedAlphaPro = getDownCollapsedAlphaPro();
        float downContentAlphaYPro = getDownContentAlphaPro();
        if (downCollapsedAlphaPro == 0) {
            expand((long) (downContentAlphaYPro * ANIM_DURATION_FRACTION));
        } else {
            restore((long) (downCollapsedAlphaPro * ANIM_DURATION_FRACTION));
        }
    }

     public void restore(long dur){
        if (restoreOrExpandAnimator.isStarted()) {
            restoreOrExpandAnimator.cancel();
        }
        restoreOrExpandAnimator.setFloatValues(mLlContent.getTranslationY(), contentTransY);
        restoreOrExpandAnimator.setDuration(dur);
        restoreOrExpandAnimator.start();
    }

    public void expand(long dur){
        if (restoreOrExpandAnimator.isStarted()) {
            restoreOrExpandAnimator.cancel();
        }
        restoreOrExpandAnimator.setFloatValues(mLlContent.getTranslationY(), downEndY);
        restoreOrExpandAnimator.setDuration(dur);
        restoreOrExpandAnimator.start();
    }

处理惯性滑动

NestedScrollingParent2处理惯性滑动的方式主要有两种：
一、在onNestedPreFling()或者onNestedFling()返回值为true消费掉。
二、在onNestedPreFling()和onNestedFling()返回值都为false的前提下，在onNestedPreScroll()或者onNestedScroll()消费掉，这种方式可以和普通的滑动共用逻辑代码。


上滑Fling到折叠状态

场景1：快速往上滑动Content部分的可滑动View产生惯性滑动，这和前面onNestedPreScroll()处理上滑的效果一模一样，因此可以复用逻辑，使用第二种方式处理。

折叠状态下滑Fling

场景2：在折叠状态并Content部分的可滑动View没有滑动到顶部尽头时，快速往下滑动Content部分的可滑动View产生惯性滑动滑到顶部尽头就停止了，这和前面onNestedPreScroll()处理下滑的效果类似，但多了个惯性滑动滑到顶部尽头就停止的条件判断，使用第二种方式处理。

下滑Fling到展开状态

场景3：快速往下滑动Content部分的可滑动View转化展开状态产生惯性滑动，这和前面onNestedPreScroll()处理下滑的效果类似，使用第二种方式处理，但注意在惯性滑动没有完全消费掉的时候，会不断触发onNestedPreScroll()来消费直到惯性滑动完全消费掉，所以当滑动到展开状态的时候要停止Content部分的View滑动因为这时已经是展开状态了，不需View继续滑动触发onNestedPreScroll(),注意NestedScrollView并没有暴露对外停止滑动的方法，只能反射获取它的OverScroller停止滑动。
下面是代码实现：

    @Override
    public void onNestedPreScroll(@NonNull View target, int dx, int dy, @NonNull int[] consumed, int type) {
        float contentTransY = mLlContent.getTranslationY() - dy;
        //处理上滑和场景1
        if (dy > 0) {
            if (contentTransY >= topBarHeight) {
                translationByConsume(mLlContent, contentTransY, consumed, dy);
            } else {
                translationByConsume(mLlContent, topBarHeight, consumed, (mLlContent.getTranslationY() - topBarHeight));
            }
        }

        if (dy < 0 && !target.canScrollVertically(-1)) {
            //下滑时处理Fling,完全折叠时，下滑Recycler(或NestedScrollView) Fling滚动到列表顶部（或视图顶部）停止Fling，对应场景2
            if (type == ViewCompat.TYPE_NON_TOUCH&&mLlContent.getTranslationY() == topBarHeight) {
                stopViewScroll(target);
                return;
            }

            //处理下滑
            if (contentTransY >= topBarHeight && contentTransY <= downEndY) {
                translationByConsume(mLlContent, contentTransY, consumed, dy);
            } else {
                translationByConsume(mLlContent, downEndY, consumed, downEndY - mLlContent.getTranslationY());
                //对应场景3
                if (target instanceof NestedScrollView) {
                    stopViewScroll(target);
                }
            }
        }
        ...
    }

    /**
     * 停止View的滑动
     */
    private void stopViewScroll(View target){
        if (target instanceof RecyclerView) {
            ((RecyclerView) target).stopScroll();
        }
        if (target instanceof NestedScrollView) {
            try {
                Class<? extends NestedScrollView> clazz = ((NestedScrollView) target).getClass();
                Field mScroller = clazz.getDeclaredField("mScroller");
                mScroller.setAccessible(true);
                OverScroller overScroller = (OverScroller) mScroller.get(target);
                overScroller.abortAnimation();
            } catch (NoSuchFieldException | IllegalAccessException e) {
                e.printStackTrace();
            }
        }
    }
下滑Fling到初始状态回弹

场景4：快速往下滑动Content部分的可滑动View，从非折叠状态转化展开状态产生惯性滑动，因为有回弹效果，所以逻辑处理和onNestedPreScroll()不一样，使用第一种方式处理。

    ...
    private ValueAnimator reboundedAnim;//回弹动画

    public ElemeNestedScrollLayout(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        ...
        reboundedAnim = new ValueAnimator();
        reboundedAnim.setInterpolator(new DecelerateInterpolator());
        reboundedAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                translation(mLlContent, (float) animation.getAnimatedValue());

                //根据upAlphaScalePro,设置logo、收藏icon缩放，搜索icon、分享icon透明度
                float upAlphaScalePro = getUpAlphaScalePro();
                alphaScaleByPro(upAlphaScalePro);

                //根据upAlphaGradientPro,设置topBar背景、返回icon、拼团icon颜色渐变值，搜索框透明度
                float upAlphaGradientPro = getUpAlphaGradientPro();
                alphaGradientByPro(upAlphaGradientPro);

                //根据downCollapsedAlphaPro,设置折叠内容透明度
                float downCollapsedAlphaPro = getDownCollapsedAlphaPro();
                alphaCollapsedContentByPro(downCollapsedAlphaPro);

                //根据downShopBarTransPro,设置购物内容内容位移
                float downShopBarTransPro = getDownShopBarTransPro();
                transShopBarByPro(downShopBarTransPro);

                //根据upCollapsedContentTransPro,设置折叠内容位移
                float upCollapsedContentTransPro = getUpCollapsedContentTransPro();
                transCollapsedContentByPro(upCollapsedContentTransPro);

                if (mProgressUpdateListener!=null){
                    mProgressUpdateListener.onUpAlphaScaleProUpdate(upAlphaScalePro);
                    mProgressUpdateListener.onUpAlphaGradientProUpdate(upAlphaGradientPro);
                    mProgressUpdateListener.onDownCollapsedAlphaProUpdate(downCollapsedAlphaPro);
                    mProgressUpdateListener.onDownShopBarTransProUpdate(downShopBarTransPro);
                    mProgressUpdateListener.onUpCollapsedContentTransProUpdate(upCollapsedContentTransPro);
                }
            }
        });
        reboundedAnim.setDuration(ANIM_DURATION_FRACTION);
    }

    @Override
    public boolean onNestedFling(@NonNull View target, float velocityX, float velocityY, boolean consumed) {
        return false;
    }

    @Override
    public boolean onNestedPreFling(@NonNull View target, float velocityX, float velocityY) {
        if (velocityY<0){//往下滑动的惯性滑动
            float translationY = mLlContent.getTranslationY();
            float dy = translationY - velocityY;
            if (translationY >topBarHeight && translationY<= downFlingCutOffY) {//非折叠状态
                //根据dy设置动画结束值，只有dy>contentTransY才会有回弹，downFlingCutOffY是回弹的最大值
                if (dy<=contentTransY){
                    reboundedAnim.setFloatValues(translationY,dy);
                }else if (dy>contentTransY&&dy<downFlingCutOffY){
                    reboundedAnim.setFloatValues(translationY,dy,contentTransY);
                }else {
                    reboundedAnim.setFloatValues(translationY,downFlingCutOffY,contentTransY);
                }
                reboundedAnim.start();
                return true;
            }
        }
        return false;
    }

释放资源

在View从Window上移除时候，执行要停止动画、释放监听者的操作。

    @Override
    protected void onDetachedFromWindow() {
        super.onDetachedFromWindow();
        if (restoreOrExpandAnimator.isStarted()) {
            restoreOrExpandAnimator.cancel();
            restoreOrExpandAnimator.removeAllUpdateListeners();
            restoreOrExpandAnimator = null;
        }
        
        if(reboundedAnim.isStarted()){
            reboundedAnim.cancel();
            reboundedAnim.removeAllUpdateListeners();
            reboundedAnim = null;
        }

        if (mProgressUpdateListener!=null){
            mProgressUpdateListener=null;
        }
    }

商家点餐页的嵌套滑动实现

效果分析

商家点餐页层级

商家点餐页布局主要有上图五部分组成，逻辑上的层级如图所示有3层。

商家点餐页TransY

滑动Content部分时利用View的TransitionY属性改变位置来消耗滑动值，根据Content部分的TransitionY设定各种范围从而计算百分比来执行位移、Alpha效果。下面来说明上图中变量的意义：

contentTransY;//滑动内容初始化TransY
iconTransY;//分享、关闭icon初始化transY
upEndIconTransY;//分享、关闭icon上滑最终transY
downFlingCutOffY;///从展开状态下滑产生fling时回弹到初始状态的最大值

ElemeFoodNestedScrollLayout

商家点餐页的嵌套滑的自定义View继承FrameLayout、实现NestedScrollingParent2接口，命名为ElemeFoodNestedScrollLayout。

布局

下面是布局要点，侧重于控件的尺寸和位置，完整布局请参考:ElemeFoodNestedScrollLayout布局

<ElemeFoodNestedScrollLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!--Mask部分-->
    <View
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
    <!--Mask部分-->

    <!--Content部分-->
    <android.support.v4.widget.NestedScrollView
        android:id="@+id/ns"
        android:translationY="@dimen/food_content_trans_y"
        android:fillViewport="true"
        android:background="@android:color/white"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        ...
        >
    <!--Content部分-->

    <!--Icon部分-->
    <ImageView
        android:layout_gravity="right"
        android:layout_width="28dp"
        android:layout_height="28dp"
        android:translationY="@dimen/iv_food_icon_trans_y"
        android:layout_marginEnd="60dp"
        />
    <ImageView
        android:layout_gravity="right"
        android:layout_width="28dp"
        android:layout_height="28dp"
        android:translationY="@dimen/iv_food_icon_trans_y"
        android:layout_marginEnd="16dp"
        />
    <!--Icon部分-->

    <!--Expand部分-->
    <ImageView
        android:alpha="0"
        android:layout_gravity="bottom"
        android:layout_width="match_parent"
        android:layout_height="@dimen/iv_food_expand"
        />
    <!--Expand部分-->

    <!--Shop Bar部分-->
    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_gravity="bottom"
        android:layout_height="@dimen/shop_bar_height"
        android:translationY="@dimen/shop_bar_height"
        ...
        >
    <!--Shop Bar部分-->
</ElemeFoodNestedScrollLayout>

绑定需要做效果的View、引入Dimens、设置Content部分的初始化TransitionY

从上面图片能够分析出：关闭状态时，Content部分的TransY为满屏高度

public class ElemeFoodNestedScrollLayout extends FrameLayout implements NestedScrollingParent2 {
    ...
    //shopBar部分
    private View mShopBar;

    //content部分
    private View mNestedScrollView;
    private View mTvComm;
    private View mTvGoodCommRate;
    private View mTvCommDetail;
    private View mTvCommCount;
    private View mVLine;
    private View mTvFoodDetail;
    
    //expand部分
    private View mIvExpand;
    
    //icon部分
    private View mIvShare;
    private View mIvClose;

    //mask部分
    private View mVMask;

    private float shopBarHeight;//shopBar部分高度
    private float ivExpandHegiht;//ivExpand部分高度
    private float statusBarHeight;//状态栏高度
    private float iconTransY;//分享、关闭icon初始化transY
    private float contentTransY;//滑动内容初始化TransY
    private float downFlingCutOffY;//下滑时fling上部分回弹临界值
    private float upEndIconTransY;//分享、关闭icon上滑最终transY

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        shopBarHeight = getResources().getDimension(R.dimen.shop_bar_height);
        ivExpandHegiht = getResources().getDimension(R.dimen.iv_food_expand);
        contentTransY = getResources().getDimension(R.dimen.food_content_trans_y);
        iconTransY = getResources().getDimension(R.dimen.iv_food_icon_trans_y);
        statusBarHeight = getResources().getDimensionPixelSize(getResources().getIdentifier("status_bar_height", "dimen", "android"));
        downFlingCutOffY = contentTransY + dp2px(92);
        upEndIconTransY = statusBarHeight + dp2px(8);
        //因为开始就是关闭状态，设置Content部分的TransY为满屏高度
        mNestedScrollView.setTranslationY(getMeasuredHeight());
    }

    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        mNestedScrollView = findViewById(R.id.ns);
        mShopBar = findViewById(R.id.cl_food_shop_bar);

        mTvComm = findViewById(R.id.t_comm);
        mTvGoodCommRate = findViewById(R.id.t_good_comm_rate);
        mTvCommDetail = findViewById(R.id.t_comm_detail);
        mTvFoodDetail = findViewById(R.id.t_food_detail);

        mTvCommCount = findViewById(R.id.t_comm_count);
        mVLine = findViewById(R.id.view_line);

        mIvExpand = findViewById(R.id.iv_food_expand);
        mIvShare = findViewById(R.id.iv_small_share);
        mIvClose = findViewById(R.id.iv_small_close);
        mVMask = findViewById(R.id.v_mask);
    }
}

实现NestedScrollingParent2接口

onStartNestedScroll()

ElemeFoodNestedScrollLayout只处理Content部分里可滑动View的垂直方向的滑动。

    @Override
    public boolean onStartNestedScroll(@NonNull View child, @NonNull View target, int axes, int type) {
        //处理Content部分里可滑动View的垂直方向的滑动
        return axes == ViewCompat.SCROLL_AXIS_VERTICAL && target.getId() == R.id.ns;
    }

onNestedPreScroll()

接下来就是处理滑动，上面效果分析提过：Content部分的上滑范围=[0,contentTransY]、
下滑范围=[contentTransY,即满屏高度]即滑动范围为[0,即满屏高度]，ElemeFoodNestedScrollLayout要控制Content部分的TransitionY值要在范围内，之前的商家页已经说过了具体思路，这里不再赘述。

    ...
    private ProgressUpdateListener mProgressUpdateListener;
    
    @Override
    public void onNestedPreScroll(@NonNull View target, int dx, int dy, @NonNull int[] consumed, int type) {
        float contentTransY = target.getTranslationY() - dy;
        //处理上滑
        if (dy > 0) {
            if (contentTransY >= 0) {
                translationByConsume(target, contentTransY, consumed, dy);
            } else {
                translationByConsume(target, 0, consumed, (target.getTranslationY() - 0));
            }
        }

        //处理下滑
        if (dy < 0 && !target.canScrollVertically(-1)) {
            if (contentTransY >= 0 && contentTransY < getMeasuredHeight()) {
                translationByConsume(target, contentTransY, consumed, dy);
            } else {
                translationByConsume(target, getMeasuredHeight(), consumed, getMeasuredHeight() - target.getTranslationY());
            }
        }

        alphaTransView(contentTransY);

        if (mProgressUpdateListener!=null){
            mProgressUpdateListener.onDownConetntCloseProUpdate(getDownConetntClosePro());
        }
    }

    private void alphaTransView(float transY) {
        float upCollapseTransPro = getUpExpandTransPro();
        //位移购物内容
        float shopBarTransY = (1 - upCollapseTransPro) * shopBarHeight;
        translation(mShopBar, shopBarTransY);

        //设置商品信息View的透明度变化
        setAlpha(mTvComm, upCollapseTransPro);
        setAlpha(mTvGoodCommRate, upCollapseTransPro);
        setAlpha(mTvCommDetail, upCollapseTransPro);
        setAlpha(mTvFoodDetail, upCollapseTransPro);
        setAlpha(mTvCommCount, 1 - upCollapseTransPro);
        setAlpha(mVLine, 1 - upCollapseTransPro);

        //位移share close两个Icon，设置展开icon透明度
        if (transY <= contentTransY) {
            float ivExpandUpTransY = upCollapseTransPro * -contentTransY;
            translation(mIvExpand, ivExpandUpTransY);
            setAlpha(mIvExpand, 1 - upCollapseTransPro);

            float iconTransY = upEndIconTransY + (1 - upCollapseTransPro) * (this.iconTransY - upEndIconTransY);
            translation(mIvShare, iconTransY);
            translation(mIvClose, iconTransY);

        } else if (transY > contentTransY && transY <= getMeasuredHeight()) {
            float ivExpandDowndTransY = (1 - getDownIvExpnadPro()) * ivExpandHegiht;
            translation(mIvExpand, ivExpandDowndTransY);

            float iconTransY = transY + dp2px(16);
            translation(mIvShare, iconTransY);
            translation(mIvClose, iconTransY);
        }
    }

    private float getDownConetntClosePro() {
        return (mNestedScrollView.getTranslationY() - contentTransY) / (getMeasuredHeight() - contentTransY);
    }

    private float getDownIvExpnadPro() {
        return ((contentTransY+ivExpandHegiht)-MathUtils.clamp(mNestedScrollView.getTranslationY(), contentTransY, contentTransY+ivExpandHegiht)) / ivExpandHegiht;
    }

    private float getUpExpandTransPro() {
        return (contentTransY - MathUtils.clamp(mNestedScrollView.getTranslationY(), 0, contentTransY)) / contentTransY;
    }

    public interface ProgressUpdateListener{
        void onDownConetntCloseProUpdate(float pro);
    }

onStopNestedScroll()

在从初始状态到展开状态的上滑过程中松手，若上滑百分比小于等于50%则执行恢复到初始状态的动画，否则执行转化到展开状态的动画；同理从初始状态到关闭状态下滑过程中松手，若下滑百分比小于等于50%则执行恢复到初始状态的动画，否则执行转化到关闭状态的动画；

    ...
    private ValueAnimator restoreOrExpandOrCloseAnimator;//收起或展开折叠内容时执行的动画
    private NestedScrollingParentHelper mParentHelper;

    public ElemeFoodNestedScrollLayout(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mParentHelper = new NestedScrollingParentHelper(this);
        ...
        restoreOrExpandOrCloseAnimator = new ValueAnimator();
        restoreOrExpandOrCloseAnimator.setInterpolator(new AccelerateInterpolator());
        restoreOrExpandOrCloseAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                translation(mNestedScrollView, (float) animation.getAnimatedValue());
                alphaTransView(mNestedScrollView.getTranslationY());
                if (mProgressUpdateListener!=null){
                    mProgressUpdateListener.onDownConetntCloseProUpdate(getDownConetntClosePro());
                }
            }
        });
        restoreOrExpandOrCloseAnimator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                int alpha=mNestedScrollView.getTranslationY() >= getMeasuredHeight()?0:1;
                setAlpha(mIvClose,alpha);
                setAlpha(mIvShare,alpha);
            }
        });
    }

    @Override
    public void onStopNestedScroll(@NonNull View target, int type) {
        mParentHelper.onStopNestedScroll(target, type);
        float translationY = target.getTranslationY();
        if (translationY == contentTransY|| reboundedAnim.isStarted()|| restoreOrExpandOrCloseAnimator.isStarted()) {
            return;
        }

        long dur;
        if (translationY < contentTransY) {
            if (getUpExpandTransPro() <= 0.5f) {
                dur = (long) (getUpExpandTransPro() *  ANIM_DURATION_FRACTION);
                restore(dur);
            } else {
                dur = (long) ((1 - getUpExpandTransPro()) *  ANIM_DURATION_FRACTION);
                expand(dur);
            }
        } else {
            if (getDownConetntClosePro() >= 0.5f) {
                dur = (long) (getDownConetntClosePro() *  ANIM_DURATION_FRACTION);
                close(dur);
            } else {
                dur = (long) ((1 - getDownConetntClosePro()) *  ANIM_DURATION_FRACTION);
                restore(dur);
            }
        }
    }

    public void restore(long dur) {
        mIvClose.setClickable(true);
        mVMask.setClickable(true);
        mIvExpand.setClickable(true);
        if (restoreOrExpandOrCloseAnimator.isStarted()) {
            restoreOrExpandOrCloseAnimator.cancel();
        }
        restoreOrExpandOrCloseAnimator.setFloatValues(mNestedScrollView.getTranslationY(), contentTransY);
        restoreOrExpandOrCloseAnimator.setDuration(dur);
        restoreOrExpandOrCloseAnimator.start();
    }

    public void expand(long dur) {
        if (restoreOrExpandOrCloseAnimator.isStarted()) {
            restoreOrExpandOrCloseAnimator.cancel();
        }
        restoreOrExpandOrCloseAnimator.setFloatValues(mNestedScrollView.getTranslationY(), 0);
        restoreOrExpandOrCloseAnimator.setDuration(dur);
        restoreOrExpandOrCloseAnimator.start();
    }

    public void close(long dur) {
        mNestedScrollView.scrollTo(0,0);
        mIvClose.setClickable(false);
        mVMask.setClickable(false);
        mIvExpand.setClickable(false);
        if (restoreOrExpandOrCloseAnimator.isStarted()) {
            restoreOrExpandOrCloseAnimator.cancel();
        }
        restoreOrExpandOrCloseAnimator.setFloatValues(mNestedScrollView.getTranslationY(), getMeasuredHeight());
        restoreOrExpandOrCloseAnimator.setDuration(dur);
        restoreOrExpandOrCloseAnimator.start();
    }

处理惯性滑动

这里有两个场景需要使用onNestedPreFling()处理惯性滑动：
1、从展开状态下滑时处理回弹Fling,执行回弹动画；
2、从初始状态到关闭状态下滑百分比超过50%惯性滑动关闭；

    private ValueAnimator reboundedAnim;//回弹动画
    ...

    public ElemeFoodNestedScrollLayout(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        ...
        reboundedAnim = new ValueAnimator();
        reboundedAnim.setInterpolator(new DecelerateInterpolator());
        reboundedAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                translation(mNestedScrollView, (float) animation.getAnimatedValue());
                alphaTransView(mNestedScrollView.getTranslationY());
                if (mProgressUpdateListener!=null){
                    mProgressUpdateListener.onDownConetntCloseProUpdate(getDownConetntClosePro());
                }
            }
        });
        reboundedAnim.setDuration(ANIM_DURATION_FRACTION);
    }

    @Override
    public boolean onNestedPreFling(@NonNull View target, float velocityX, float velocityY) {
        if (velocityY<0) {
            float translationY = target.getTranslationY();
            float dy = translationY - velocityY;
            //从展开状态下滑时处理回弹Fling,执行回弹动画
            if (translationY >= 0 && translationY <= downFlingCutOffY){
                if (dy<contentTransY){
                    reboundedAnim.setFloatValues(translationY,dy);
                }else if (dy>contentTransY&&dy<downFlingCutOffY){
                    reboundedAnim.setFloatValues(translationY,dy,contentTransY);
                }else {
                    reboundedAnim.setFloatValues(translationY,downFlingCutOffY,contentTransY);
                }
                target.scrollTo(0,0);
                reboundedAnim.start();
                return true;
            }

            //从初始状态到关闭状态下滑百分比超过50%惯性滑动关闭
            float dur = (1- getDownConetntClosePro()) * ANIM_DURATION_FRACTION;
            if (translationY<=(getMeasuredHeight()/2f)&&translationY>downFlingCutOffY){
                restore((long) dur);
                return true;
            }else {
                close((long) dur);
                return true;
            }
        }
        return false;
    }

释放资源

在View从Window上移除时候，执行要停止动画、释放监听者的操作。

    @Override
    protected void onDetachedFromWindow() {
        super.onDetachedFromWindow();
        if (restoreOrExpandOrCloseAnimator.isStarted()) {
            restoreOrExpandOrCloseAnimator.cancel();
            restoreOrExpandOrCloseAnimator.removeAllUpdateListeners();
            restoreOrExpandOrCloseAnimator.removeAllListeners();
            restoreOrExpandOrCloseAnimator = null;
        }

        if (reboundedAnim.isStarted()) {
            reboundedAnim.cancel();
            reboundedAnim.removeAllUpdateListeners();
            restoreOrExpandOrCloseAnimator = null;
        }

        if (mProgressUpdateListener!=null){
            mProgressUpdateListener=null;
        }
    }

ElemeNestedScrollLayout和ElemeFoodNestedScrollLayout联动

从效果预览看的出，在点击商品时ElemeFoodNestedScrollLayout内容弹出，而背后有蒙层和ElemeFoodNestedScrollLayout内容的缩放效果，它们两都提供滑动百分比监听者，所以这部分逻辑应该在Activity处理：

    mElemeFoodNsLayout.setProgressUpdateListener(new ElemeFoodNestedScrollLayout.ProgressUpdateListener() {
        @Override
        public void onDownConetntCloseProUpdate(float pro) {
            mElemeNSLayout.setScaleX(0.9f+(pro*0.1f));
            mElemeNSLayout.setScaleY(0.9f+(pro*0.1f));
            mVMask.setAlpha(1-pro);
            if (pro==1){
                mVMask.setVisibility(View.GONE);
            }else {
                mVMask.setVisibility(View.VISIBLE);
            }
        }
    });

总结

NestedScrolling机制结合View的Alpha、Scale、Transitio、动画等等可以弄出各种神奇而体验好的交互，当自定义View遇上NestedScrolling机制，给你不一样的精彩，只要理清思路、分析问题、一步一步来解决或许就会守得云开见月明，由于本人水平有限仅给各位提供参考，希望能够抛砖引玉，如果有什么可以讨论的问题可以在评论区留言或联系本人，本文饿了么例子图片素材来源于h5饿了么和阿里巴巴矢量素材库。

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,547评论 6赞 477
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,399评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,428评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,599评论 1赞 274
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,612评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,577评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,941评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,603评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,852评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,375评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,955评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2赞 342