Android 使用圆形揭露动画巧妙地隐藏或显示View

在开发过程中，我们经常会遇到需要显示或隐藏View视图的情况，如果在隐藏或显示View的过程中加上动画，能让交互更加的友好和动感，本文将介绍如何使用圆形揭露动画巧妙地隐藏或显示View。

圆形揭露动画是动画的一种，是由ViewAnimationUtils类提供的，调用ViewAnimationUtils.createCircularReveal()方法可以创建圆形揭露动画，使用此动画要求API级别为21及以上版本，createCircularReveal()方法的参数如下：

简易布局如下：

首先要计算得出View相对于自身的中心点的X坐标和Y坐标，然后调用Math.hypot()方法计算得出圆形的半径，接着调用ViewAnimationUtils.createCircularReveal(imageView, ivXCenter, ivYCenter, circleRadius, 0f)创建圆形揭露动画，增加动画执行的Listener，在动画执行结束后调用imageView.setVisibility(View.GONE)，最后启动动画，示例如下：

使用圆形揭露动画显示View，先计算得出View相对于自身的中心点的X坐标和Y坐标，然后算出圆形的半径，接着创建圆形揭露动画，此时的起始半径是0f，结束半径是圆形的半径，调用imageView.setVisibility(View.VISIBLE)，最后启动动画，示例如下：

使用圆形揭露动画隐藏或显示View，主要是计算出View相对于自身的中心点的X坐标和Y坐标，并计算出圆形半径，在调用ViewAnimationUtils.createCircularReveal()方法创建的时候要注意起始半径和结束半径的填写，隐藏View的时候在动画执行完毕后setVisibility()方法隐藏，显示View的时候，在动画启动前调用setVisibility()方法显示。

效果一:使Toolbar随着内容区域的滚动而隐藏和显示

我们知道手机屏幕的大小时候限的，有时候我们为了显示更多的内容需要隐藏掉一些不相关的内容，比如Toolbar。以前我们可能会使用属性动画或者通过view.animate().translationXX()这个便捷的方法来实现这些效果。现在就不用这么麻烦了，只需要在xml中添加两行代码就可以了。

为了实现上述的效果，这里需要引入两个新的控件：CoordinatorLayout和AppBarLayout，这两个控件均位于design兼容包中。所以你需要在module的build.gradle依赖中加入下面一行代码。

compile 'com.android.support:design:23.1.0'

AppBarLayout：本质上是一个垂直的线性布局。但是他实现了材料设计中app bar的滚动手势的特性。而为了让这些特性发挥效果，你必须把AppBarLayout作为CoordinatorLayout的一个直接子控件来使用。并且，你还需要为AppBarLayout设置一个支持NestedScroll的兄弟控件。这样父控件CoordinateLayout就知道什么时候来响应滚动事件了 它的子控件可以通过setScrollFlags(int)或者app:layout_scrollFlags的方式来为自己指定滚动行为。可选的行为有：SCROLL_FLAG_ENTER_ALWAYS、SCROLL_FLAG_ENTER_ALWAYS_COLLAPSED、SCROLL_FLAG_EXIT_UNTIL_COLLAPSED、SCROLL_FLAG_SCROLL、SCROLL_FLAG_SNAP。

CoordinateLayout：本质上是一个增强版的FrameLayout。一般作为一个容器来使用，这样可以让它的子控件实现一些交互效果。可以通过给子控件指定不同的Behaviors来实现不同的交互效果。

扯了这么多好像也没啥感觉，感觉还真是“Talk is cheap. Show me the code.”呢。那下来就撸代码，看效果吧。

<?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"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:fitsSystemWindows="true"

tools:context="com.demo.activity.MainActivity">

<android.support.design.widget.AppBarLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:theme="@style/AppTheme.AppBarOverlay">

<android.support.v7.widget.Toolbar

android:id="@+id/toolbar"

android:layout_width="match_parent"

android:layout_height="?attr/actionBarSize"

android:background="?attr/colorPrimary"

app:layout_scrollFlags="scroll|enterAlways"

app:popupTheme="@style/AppTheme.PopupOverlay"/>

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

<android.support.v7.widget.RecyclerView

android:id="@+id/recycler_view"

android:layout_width="match_parent"

android:layout_height="wrap_content"

app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

上面的布局中有两个地方需要注意：1.Toolbar的app:layout_scrollFlags="scroll|enterAlways"属性 2.RecyclerView的app:layout_behavior="@string/appbar_scrolling_view_behavior"属性。这两个地方就是上文中加粗部分的提到的注意点。同时，注意下整个布局的结构：CoordinateLayout作为跟布局，内部分别放置了一个AppBarLayout和RecyclerView。Toolbar作为AppBarLayout的子控件而存在。

其实，就改这么点地方就可以了。想要的效果已经有了。

---