android开发游记：meterial design 使用circularReveal仿哔哩哔哩(bilibili)搜索框动画
一直觉得bilibili的安卓客户端做的很不错，所以自己在项目中都会有意识或无意识地去模仿，最近觉得它的搜索框弹出收回的效果体验挺不错的，于是研究了一下模仿着做了一个：
（ps：模仿不是罪，罪过的是没有经过思考地抄袭）
bilibili搜索框效果图：
博主模仿版：
实现原理：
这里的波纹动画需要使用的ViewAnimationUtils库来实现，但是该库是5.0以后才引入的，所以无法满足低版本。但是不用担心，已经有开源库为我们实现了低版本的动画，用法和ViewAnimationUtils一致。
这里首先要介绍一个开源库circularReveal，主要是提供了波浪式的展开和回缩动画，利用这个库提供的动画再自定义一下就很容易实现上面的效果了
有兴趣的朋友可以自动down下源码看一下：
CircularReveal libaray 源码下载
我这里就利用CircularReveal库，做了一个demo，就是上面的效果图的：
demo下载地址
整个搜索框是使用fragment实现的，弹出层是覆盖在activity上的一个fragment，具体搜索逻辑自己去实现，demo只提供出入场动画：
先贴出fragment的布局文件：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/root" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical">
<io.codetail.widget.RevealFrameLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_margin="7dp">
<LinearLayout android:id="@+id/content" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical">
<io.codetail.widget.RevealLinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal">
<LinearLayout android:id="@+id/edit_lay" android:background="#ffffff" android:layout_width="match_parent" android:layout_height="wrap_content">
<EditText android:id="@+id/edit_search" android:layout_width="0dp" android:layout_height="40dp" android:layout_weight="1" android:ems="10" android:hint="search" android:inputType="textPersonName" android:layout_marginLeft="13dp" android:textColor="#333333" android:textColorHint="#cccccc">
<requestFocus />
</EditText>
<ImageView android:id="@+id/img_search" android:padding="7dp" android:layout_width="40dp" android:layout_height="40dp" android:scaleType="fitXY" android:src="@drawable/icon_search" />
</LinearLayout>
</io.codetail.widget.RevealLinearLayout>
<LinearLayout android:id="@+id/items" android:layout_width="match_parent" android:layout_height="400dp" android:background="#ffffff" android:orientation="vertical" android:paddingLeft="15dp">
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:text="New Text" android:textColor="#333333" />
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:text="New Text" android:textColor="#333333" />
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:text="New Text" android:textColor="#333333" />
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:text="New Text" android:textColor="#333333" />
</LinearLayout>
</LinearLayout>
</io.codetail.widget.RevealFrameLayout>
</LinearLayout>布局很简单，根据自己需要更改，这里只是一个示例，要注意的一点就是：需要执行动画的视图必须有一个RevealLinearLayout或者RevealFrameLayout的父View。如上的布局，因为动画其实是由这个父View完成的。
布局效果：
代码解析
首先，点击搜索按钮，弹出fragment并放入回退栈fragment:reveal中：
@Override
public boolean onOptionsItemSelected(MenuItem item) {
int id = item.getItemId();
if (id == R.id.action_search) {
getSupportFragmentManager()
.beginTransaction()
.add(android.R.id.content, new FragmentRevealExample(), "fragment_my")
.addToBackStack("fragment:reveal")
.commit();
return true;
}
return super.onOptionsItemSelected(item);
}重点代码就在FragmentRevealExample中：
在fragment的onCreate()函数中添加一个绘制监听，在绘制渲染之前执行动画：
edit_lay.getViewTreeObserver().addOnPreDrawListener(
new ViewTreeObserver.OnPreDrawListener() {
@Override
public boolean onPreDraw() {
//执行动画
//......
}
});下面是执行动画的主要代码：
centerX = img_search.getLeft()+img_search.getWidth()/2;
centerY = img_search.getTop()+img_search.getHeight()/2;
SupportAnimator mRevealAnimator = ViewAnimationUtils.createCircularReveal(
edit_lay, centerX, centerY, 20,
PdUtil.hypo(edit_lay.getWidth(), edit_lay.getHeight()));
mRevealAnimator.addListener(new SupportAnimator.AnimatorListener() {
@Override
public void onAnimationStart() {
edit_lay.setVisibility(View.VISIBLE);
}
@Override
public void onAnimationEnd() {
new Handler().postDelayed(new Runnable() {
@Override
public void run() {
items.setVisibility(View.VISIBLE);
edit_search.requestFocus();
if (getActivity()!=null) {
InputMethodManager imm = (InputMethodManager)getActivity()
.getSystemService(Context.INPUT_METHOD_SERVICE);
imm.showSoftInput(edit_search, InputMethodManager.SHOW_IMPLICIT);
}
}
}, 100);
}
@Override
public void onAnimationCancel() {
}
@Override
public void onAnimationRepeat() {
}
});
mRevealAnimator.setDuration(200);
mRevealAnimator.setStartDelay(100);
mRevealAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
mRevealAnimator.start();动画其实是模仿一个圆放大的过程，我们首要就有计算出圆心的坐标 centerX，centerY，就是放大镜的图标的中心点：
centerX = img_search.getLeft()+img_search.getWidth()/2;
centerY = img_search.getTop()+img_search.getHeight()/2;然后通过library提供的ViewAnimationUtils的createCircularReveal方法获取一个动画对象执行mRevealAnimator，解释下createCircularReveal()方法的参数：
createCircularReveal(View view,int centerX,int centerY,float startRadius, float endRadius)
- view：就是需要执行动画的对象，这里简单来说就是搜索框上的EditText，由于还有一个放大镜的图片，所以我用一个LinearLayout包围起来了，那我们需要的对象就是这个LinearLayout，这里要注意，要执行动画的话，那么选定的View必须有一个RevealLinearLayout或者RevealFrameLayout的父View，因为你选的View本身是没有动画效果的动画是由这两个拥有动画效果的父View来完成的。
- centerX：动画中心点X坐标
- centerY：动画中心点Y坐标
- startRadius：动画开始时的圆半径
- endRadius：动画结束时的圆半径
centerX和centerY已经计算出来了，startRadius我们默认20px，endRadius则取控件的最大宽度(对角线长度)：
还记得勾股定理吗？
public static float hypo(int a, int b){
return (float) Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
}动画配置完了，接下来就是动画监听器：
由于动画开始时会有闪动，所以在开始前隐藏需要动画的View，然后在开始时显示它，这样就不会有闪动了：
@Override
public void onAnimationStart() {
edit_lay.setVisibility(View.VISIBLE);
}在动画结束后延迟100毫秒，然后显示整个fragment，并弹出键盘：
@Override
public void onAnimationEnd() {
new Handler().postDelayed(new Runnable() {
@Override
public void run() {
items.setVisibility(View.VISIBLE);
edit_search.requestFocus();
if (getActivity()!=null) {
InputMethodManager imm = (InputMethodManager)getActivity()
.getSystemService(Context.INPUT_METHOD_SERVICE);
imm.showSoftInput(edit_search, InputMethodManager.SHOW_IMPLICIT);
}
}
}, 100);
}最后设置动画时长和延迟，就可以执行动画了：
mRevealAnimator.setDuration(200);
mRevealAnimator.setStartDelay(100);
mRevealAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
mRevealAnimator.start();到这里，展开动画就完成了，接着是，回缩动画：
注意fragment并不能获取回退健点击事件，所以处理过程要放在activity中，fragment添加一个public的onBackPressed，在activity回退事件中获取fragment并调用fragment的自定义回退事件onBackPressed：
Activity：
@Override
public void onBackPressed() {
FragmentRevealExample fragment = (FragmentRevealExample) getSupportFragmentManager().
findFragmentByTag("fragment_my");
if(fragment!=null) {
fragment.onBackPressed();
}else {
super.onBackPressed();
}
}Fragment：
在fragment的onBackPressed中执行回缩动画：
public boolean onBackPressed() {
SupportAnimator mRevealAnimator = ViewAnimationUtils.createCircularReveal(content,
centerX, centerY, 20, PdUtil.hypo(content.getWidth(), content.getHeight()));
mRevealAnimator = mRevealAnimator.reverse();
if (mRevealAnimator==null) return false;
mRevealAnimator.addListener(new SupportAnimator.AnimatorListener() {
@Override
public void onAnimationStart() {
content.setVisibility(View.VISIBLE);
}
@Override
public void onAnimationEnd() {
content.setVisibility(View.INVISIBLE);
if (getActivity()!=null)
getActivity().getSupportFragmentManager().popBackStack();
}
@Override
public void onAnimationCancel() {
}
@Override
public void onAnimationRepeat() {
}
});
mRevealAnimator.setDuration(200);
mRevealAnimator.setStartDelay(100);
mRevealAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
mRevealAnimator.start();
return true;
}回缩动画和开始动画类似，主要是调用了mRevealAnimator.reverse()，使动画方向反转，由放大变为回缩。注意在动画结束后把fragment实例从回退栈中移除（出栈）：
getActivity().getSupportFragmentManager().popBackStack();这样示例的部分就完成了。
如果需要弹出的键盘挤压布局视图的话。需要在AndroidManifest.xml给该Activity加上一个属性：
android:windowSoftInputMode="adjustResize"如果不加的话，弹出的键盘是覆盖在视图之上的。是否需要这个效果看个人爱好了。