CoordinatorLayout自定义behavior(仿20CM动画效果)

首先上一张效果图:

动画分为三部分：1.视差效果：进入页面时，头图和列表同时向下移动，且列表有一个从0到1的alpha渐变。

     2.向上推动列表到距离顶部的距离为0dp ~ 96dp（即头部有返回关注按钮的导航栏高度的2倍，此处可根据需要自己定义)，导航栏会有一个颜色的渐变，且导航栏图标会有黑色和白色的变化,且在此过程中图片不动，列表上移。

     3.列表滚动中，如果列表向下滚动，则隐藏导航栏，如果列表向上滚动，则显示导航栏。

实现思路：

1.采用CoordinatorLayout结合CollapsingToolbarLayout来实现列表上移时图片保持不动或者以不同速度移动的效果。

2.重写CoordinatorLayout.Behavior来监听列表距离顶部的距离，从而实现导航栏的颜色渐变及位移效果。

3.监听RecyclerView的滚动，来控制导航栏的显示和隐藏。

4.进入界面时，默认设置图片的margin值为负的自身高度，列表距离顶部距离为0，然后通过属性动画，来控制图片和列表的向下移动及透明度效果(基本这里就看自己想象力，各种动画效果都可以组合来实现想要显示的动画效果)。

源码分析：

1. XML布局：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    android:id="@+id/mCoordinatorLayout"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <android.support.design.widget.AppBarLayout
        android:id="@+id/mAppbarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:elevation="0dp"
        >
        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            >
            <ImageView
                android:id="@+id/iv_head_img"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:src="@mipmap/ic_launcher"
                android:background="@android:color/holo_blue_bright"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="1"
                />
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:id="@+id/mRecyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#fff"
        />
    <FrameLayout
        android:id="@+id/fr_title_head"
        app:layout_behavior="com.test.git.coordinatorlayout.Behavior.ShortContentsTitleVGBehavior"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <LinearLayout
            android:id="@+id/ll_header_float"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:orientation="horizontal"
            android:gravity="center_vertical"
            android:alpha="1"
            >
            <ImageView
                android:id="@+id/iv_detail_back"
                android:paddingLeft="20dp"
                android:paddingRight="20dp"
                android:paddingTop="10dp"
                android:paddingBottom="10dp"
                android:layout_width="64dp"
                android:layout_height="44dp"
                android:scaleType="center"
                android:src="@drawable/ic_back_w"
                />
            <View
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                />
            <ImageView
                android:id="@+id/iv_detail_sub"
                android:paddingLeft="16dp"
                android:paddingRight="20dp"
                android:paddingTop="10dp"
                android:paddingBottom="10dp"
                android:layout_width="56dp"
                android:layout_height="44dp"
                android:scaleType="center"
                android:src="@drawable/ic_goods_collect_w"
                />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/ll_header_float_b"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:orientation="horizontal"
            android:gravity="center_vertical"
            android:background="#fff"
            android:alpha="0"
            >
            <ImageView
                android:id="@+id/iv_detail_back_b"
                android:paddingLeft="20dp"
                android:paddingRight="20dp"
                android:paddingTop="10dp"
                android:paddingBottom="10dp"
                android:layout_width="64dp"
                android:layout_height="44dp"
                android:scaleType="center"
                android:src="@drawable/ic_back"
                />
            <View
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                />
            <ImageView
                android:id="@+id/iv_detail_sub_b"
                android:paddingLeft="16dp"
                android:paddingRight="20dp"
                android:paddingTop="10dp"
                android:paddingBottom="10dp"
                android:layout_width="56dp"
                android:layout_height="44dp"
                android:scaleType="center"
                android:src="@drawable/ic_goods_collect"
                />
        </LinearLayout>

        <View android:layout_width="match_parent"
            android:layout_height="0.5dp"
            android:background="#dddddd"
            android:layout_gravity="bottom"
            />
    </FrameLayout>
</android.support.design.widget.CoordinatorLayout>

2. 重写CoordinatorLayout.Behavior

package com.test.git.coordinatorlayout.Behavior;

import android.content.Context;
import android.support.design.widget.CoordinatorLayout;
import android.support.v7.widget.RecyclerView;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;
import android.widget.FrameLayout;

import com.test.git.coordinatorlayout.Utils.Local;

/**
 * Created by lk on 16/8/2.
 */
public class ShortContentsTitleVGBehavior extends CoordinatorLayout.Behavior<FrameLayout> {

    private static final String TAG = "ShortContentsVGBehavior";
    private ViewGroup.MarginLayoutParams params;
    private int top = Local.dip2px(48);//导航栏高度
    private View child_w;
    private View child_b;
    private View child_line;
    private int count;

    public ShortContentsTitleVGBehavior() {
    }

    public ShortContentsTitleVGBehavior(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public boolean layoutDependsOn(CoordinatorLayout parent, FrameLayout child, View dependency) {
        //获取View的params
        params = (ViewGroup.MarginLayoutParams) child.getLayoutParams();
        //获取子View
        child_w = child.getChildAt(0);
        child_b = child.getChildAt(1);
        child_line = child.getChildAt(2);
        
        //依赖的View 这里选择RecyclerView
        return dependency instanceof RecyclerView;
    }

    /**
     * 依赖的View发生了变化
     * @param parent
     * @param child
     * @param dependency
     * @return
     */
    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, FrameLayout child, View dependency) {
        //依赖的View距离顶部的距离
        float y = dependency.getY();
        //图片的高度为屏幕宽度,所以此处做一次判断. 
        if(y == Local.getWidthPx()){
            //count的作用:由于开场动画会设置列表距离顶部距离为0,此时应不做处理,所以用count来判断是否开始执行导航栏动画.
            if(count <= 1){
                count ++;
            }
        }

        Log.i(TAG, "y:" + y + "  count:" + count);
        if(count >= 1) {
            //出场动画已经结束,可以开始监听顶部距离来实现导航栏动画
            changePostion(child, y);
        }

        return super.onDependentViewChanged(parent, child, dependency);
    }

    /**
     * 导航栏动画
     * @param child
     * @param y
     */
    public void changePostion(FrameLayout child, float y) {
        if(y >= 0 && y <= top){//列表与导航栏接触,导航栏随着列表的移动而移动
            //计算导航栏上移距离
            float dy = y - top;
            params.topMargin = (int) dy;
            child.setLayoutParams(params);
            //显示黑色icon的标题栏
            child_b.setAlpha(1);
            //隐藏白色icon的标题栏
            child_w.setAlpha(0);
            //显示分割线
            child_line.setVisibility(View.VISIBLE);
        }else {//列表未接触到导航栏(导航栏高度为top)
            if(y <= top * 2) {//列表距离顶部距离时导航栏高度两倍时,开启动画(这里可以自己决定)
                //top ~ top * 2过程中计算alpha值
                float f = 2 - y / top;
                child_b.setAlpha(f);
                child_w.setAlpha(1 - f);
            }else {
                child_b.setAlpha(0);
                child_w.setAlpha(1);
            }
            //还原导航栏的位置
            params.topMargin = 0;
            child.setLayoutParams(params);
            child_line.setVisibility(View.GONE);
        }

        //此处用来给RecyclerView滚动监听用,只有列表在顶部,列表滚动时才执行导航栏的显示和隐藏.列表不在顶部时,
        // 通过上面代码来控制导航栏动画效果
        if(y <= 0) {
            child.setTag(true);//在顶部
        }else {
            child.setTag(false);//不在顶部
        }
    }
}

3.RecyclerView滚动监听

        mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
            @Override
            public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
                super.onScrolled(recyclerView, dx, dy);
                //后去tag,如果为null,则返回
                if(fr_title_head.getTag() == null)return;
                //获取列表距离顶部是否为0,true表示在顶部,列表可以自己控制动画,否则由behavior来控制.
                boolean isIntop = (boolean) fr_title_head.getTag();
                //获取列表第一个可见的item位置
                int firstVisibleItem = mLinearLayoutManager.findFirstVisibleItemPosition();

                //列表滚动到距离顶部小于导航栏高度,隐藏导航栏(用来实现下拉导航栏一起下移,所以做的调整,这里是边缘case).
                if(firstVisibleItem == 0 && mLinearLayoutManager.findViewByPosition(firstVisibleItem).getTop() <= title_height){
                    Log.i("ShortContentsVGBehavior", "hide");
                    frParams.topMargin = - title_height;
                    fr_title_head.setLayoutParams(frParams);
                    return;
                }
                //isLoadingAnimate是一个标志位,用来控制是否执行动画,避免列表滚动中频繁执行动画,导致效果不好.
                if(!isLoadingAnimate && isIntop){//控制
                    if(dy > 0){//列表向下滚动,隐藏导航栏
                        AnimateOut();
                    }else{//列表向上滚动,显示导航栏
                        AnimateIn();
                    }
                }

            }
        });

显示动画：

    //显示动画
    private void AnimateIn() {
        if(titleAnimateIn == null) {
            titleAnimateIn = new ValueAnimator().ofInt( - title_height, 0).setDuration(200);
            titleAnimateIn.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator valueAnimator) {
                    frParams.topMargin = (int) valueAnimator.getAnimatedValue();
                    fr_title_head.setLayoutParams(frParams);
                }
            });
            titleAnimateIn.addListener(new Animator.AnimatorListener() {
                @Override
                public void onAnimationStart(Animator animator) {
                    isLoadingAnimate = true;
                }

                @Override
                public void onAnimationEnd(Animator animator) {
                    isLoadingAnimate = false;
                }

                @Override
                public void onAnimationCancel(Animator animator) {

                }

                @Override
                public void onAnimationRepeat(Animator animator) {

                }
            });
        }
        if(frParams.topMargin == - title_height) {
            titleAnimateIn.start();
        }
    }

隐藏动画：

   //隐藏动画
    private void AnimateOut() {
        if(titleAnimateOut == null) {
            titleAnimateOut = new ValueAnimator().ofInt(0, - title_height).setDuration(200);
            titleAnimateOut.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator valueAnimator) {
                    frParams.topMargin = (int) valueAnimator.getAnimatedValue();
                    fr_title_head.setLayoutParams(frParams);
                }
            });
            titleAnimateOut.addListener(new Animator.AnimatorListener() {
                @Override
                public void onAnimationStart(Animator animator) {
                    isLoadingAnimate = true;
                }

                @Override
                public void onAnimationEnd(Animator animator) {
                    isLoadingAnimate = false;
                }

                @Override
                public void onAnimationCancel(Animator animator) {

                }

                @Override
                public void onAnimationRepeat(Animator animator) {

                }
            });
        }
        if(frParams.topMargin == 0) {
            titleAnimateOut.start();
        }
    }

4. 开场动画：

    //开场动画
    private void loadStartAnimation() {
        final ViewGroup.MarginLayoutParams rvParams = (ViewGroup.MarginLayoutParams) mRecyclerView.getLayoutParams();
        final ViewGroup.MarginLayoutParams rvParams1 = (ViewGroup.MarginLayoutParams) mAppbarLayout.getLayoutParams();
        rvParams.topMargin = - Local.getWidthPx();
        mRecyclerView.setLayoutParams(rvParams);

        rvParams1.topMargin = - Local.getWidthPx();
        mAppbarLayout.setLayoutParams(rvParams1);

        final ValueAnimator valueAnima = ValueAnimator.ofInt(-Local.getWidthPx(), 0);
        valueAnima.setDuration(600).addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                rvParams.topMargin = (int) valueAnimator.getAnimatedValue();
                mRecyclerView.setLayoutParams(rvParams);
                mRecyclerView.setAlpha(valueAnimator.getAnimatedFraction());

                rvParams1.topMargin = (int) valueAnimator.getAnimatedValue();
                mAppbarLayout.setLayoutParams(rvParams1);
            }
        });
        valueAnima.start();
    }

相关文章： 点击打开链接    点击打开链接

源码地址：点击打开链接