一直觉得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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
布局很简单,根据自己需要更改,这里只是一个示例,要注意的一点就是:需要执行动画的视图必须有一个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();
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
动画其实是模仿一个圆放大的过程,我们首要就有计算出圆心的坐标 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;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
回缩动画和开始动画类似,主要是调用了mRevealAnimator.reverse(),使动画方向反转,由放大变为回缩。注意在动画结束后把fragment实例从回退栈中移除(出栈):
getActivity().getSupportFragmentManager().popBackStack()
这样示例的部分就完成了。
如果需要弹出的键盘挤压布局视图的话。需要在AndroidManifest.xml给该Activity加上一个属性:
android:windowSoftInputMode="adjustResize"
如果不加的话,弹出的键盘是覆盖在视图之上的。是否需要这个效果看个人爱好了。