coordinatorLayout 的一个小效果

     Design Support Library中 有个CoordinatorLayout类，效果挺不错的。先看看下面的效果：

    

  布局代码:

   

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="200.0dp"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:layout_collapseMode="parallax">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">


            <ImageView
                android:id="@+id/backdrop"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:src="@drawable/img_text2"
                app:layout_collapseMode="parallax" />


            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

        </android.support.design.widget.CollapsingToolbarLayout>

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/scrollview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="1000.0dp"
            android:orientation="vertical"
            android:paddingBottom="10.0dp"
            android:paddingTop="24dp">


        </LinearLayout>


    </android.support.v4.widget.NestedScrollView>


    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_dialog_email"
        app:layout_anchor="@id/appbar"
        app:layout_anchorGravity="bottom|right|end" />

</android.support.design.widget.CoordinatorLayout>

        看了上面的效果，但是别误会了，我这篇文章要将的小效果是FloatingActionButton渐进渐出的效果，这个控件实现的效果跟NestScrollview中的layout_behavior中的的类同一个原理。都是去实现一个Behavior类来控制控件的效果。当有一个需求要在

FloatingActionButton的位置上放一个更复杂的布局，而不单单是一个FloatingActionButton，例如放其它的一个View。这时我们可以自己写一个behavior。先看看效果：

                     

     下面是自定义behavior的代码：

      

package com.example.arze.apptotest.Untils.AnimUntils;

/**
 * Created by arze on 2016/3/14.
 */

import android.content.Context;
import android.os.Build;
import android.support.design.widget.AppBarLayout;
import android.support.design.widget.CoordinatorLayout;
import android.support.v4.view.ViewCompat;
import android.support.v4.view.ViewPropertyAnimatorListener;
import android.support.v4.view.animation.FastOutSlowInInterpolator;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;

import com.example.arze.apptotest.R;

/**
 * Created by arze on 2016/3/14.
 */
public class ViewBehavior extends CoordinatorLayout.Behavior<View> {
    private boolean isOut = false;
    private boolean isIn = false;
    private Animation mAnimIn;
    private Animation mAnimOut;
    public ViewBehavior () {
        super();
    }
    public ViewBehavior(Context context, AttributeSet attrs) {
        super(context, attrs);
        mAnimIn = AnimationUtils.loadAnimation(context, R.anim.view_in);
        mAnimOut = AnimationUtils.loadAnimation(context, R.anim.view_out);
    }

    /**
     * 
     * @param parent   coordinatorLayout 父布局
     * @param child    跟随变化的view
     * @param dependency  这个view的改变会引发child的改变 ，当然要返回为true
     * @return
     */
    public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {
        return dependency instanceof AppBarLayout;
    }

    /**
     *  这个函数执行child的变换 
     * @param parent    coordinatorLayout 父布局
     * @param child     跟随变化的view
     * @param dependency  这个view的改变会引发child的改变 
     * @return
     */
    public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {


        if (Math.abs(dependency.getTop()) > dependency.getHeight() / 2 && View.VISIBLE == child.getVisibility() && !isOut) {
            animateOut(child);
        } else if (Math.abs(dependency.getTop()) < dependency.getHeight() / 2 && View.GONE == child.getVisibility() && !isIn) {
            animateIn(child);
        }

        return false;
    }

    /**
     * 出现动画
     * @param view
     */
    private void animateIn(final View view) {

        if (Build.VERSION.SDK_INT >= 14) {
            ViewCompat.animate(view).scaleX(1.0F).scaleY(1.0F).alpha(1.0F).setInterpolator(
                    new FastOutSlowInInterpolator()).withLayer().setListener(new ViewPropertyAnimatorListener() {
                @Override
                public void onAnimationStart(View view) {
                    view.setVisibility(View.VISIBLE);
                    isIn = true;
                }

                @Override
                public void onAnimationEnd(View view) {
                    isIn = false;
                }

                @Override
                public void onAnimationCancel(View view) {
                }
            }).start();
        } else {

            mAnimIn.setInterpolator(new FastOutSlowInInterpolator());
            mAnimIn.setDuration(200L);
            mAnimIn.setAnimationListener(new Animation.AnimationListener() {
                @Override
                public void onAnimationStart(Animation animation) {
                    view.setVisibility(View.VISIBLE);
                    isIn = true;
                }

                @Override
                public void onAnimationEnd(Animation animation) {
                    isIn = false;
                }

                @Override
                public void onAnimationRepeat(Animation animation) {

                }
            });
            view.startAnimation(mAnimIn);

        }
    }
    /**
     *消失动画
     * @param view
     */
    private void animateOut(final View view) {

        if (Build.VERSION.SDK_INT >= 14) {
            ViewCompat.animate(view).scaleX(0.0F).scaleY(0.0F).alpha(0.0F).setInterpolator(
                    new FastOutSlowInInterpolator()).withLayer().setListener(new ViewPropertyAnimatorListener() {
                public void onAnimationStart(View view) {
                    isOut = true;
                }

                public void onAnimationCancel(View view) {
                }

                public void onAnimationEnd(View view) {
                    isOut = false;
                    view.setVisibility(View.GONE);
                }
            }).start();
        } else {

            mAnimOut.setInterpolator(new FastOutSlowInInterpolator());
            mAnimOut.setDuration(200L);
            mAnimOut.setAnimationListener(new Animation.AnimationListener() {
                @Override
                public void onAnimationStart(Animation animation) {
                    isOut = true;
                }

                @Override
                public void onAnimationEnd(Animation animation) {
                    isOut = false;
                    view.setVisibility(View.GONE);
                }

                @Override
                public void onAnimationRepeat(Animation animation) {

                }
            });
            view.startAnimation(mAnimOut);

        }


    }


}

   使用方法是在布局文件中要跟随变化的view中添加layout_behavior = ViewBehavior的路径名 ，最终由CoordinatorLayout用过反射来实现类的实例化。当然这里只是简单的实现了behavior，因为Behavior这个抽象类还有很多方法。

     用动画控制这个效果不太灵活，动画从开始到结束这个过程是固定的。我们可以通过view.set属性来控制view的变化。需要一个dependency 这个view的变化细节，比如定义一个float 类型来表示dependency  在一定区间内的变化率。用这个变化率来实现view的属性变化。