之前使用哔哩哔哩客户端的时候觉得她的搜索效果非常的赞,最近刚好有时间准备学习尝试自己写一下。
话不多说,先看东西是吧
好了废话不多说正式开始:
1.首先分析一下我们解析获得的布局样式
观察之后发现B站实现这个效果是在主页面有单独的一个布局,也就是说这个列表其实是早就写好的。那么实际上这个效果就只有2个步骤1个就是首页的布局,2就是圆形的动画。
2.圆形动画的实现:
这个圆形动画就是5.0之后谷歌新加入的ViewAnimationUtils.createCircularRevea
* @param view 需要增加动画的view
* @param centerX 确定圆心
*
* @param centerY 确定圆心
*
* @param startRadius 开始半径
* @param endRadius 结束半径
*/
public static Animator createCircularReveal(View view,
int centerX, int centerY, float startRadius, float endRadius) {
}
实现动画效果:
public static void handleToolBar(final Context context, final CardView search, final EditText editText) {
//隐藏
if (search.getVisibility() == View.VISIBLE) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
final Animator animatorHide = ViewAnimationUtils.createCircularReveal(search,
search.getWidth() - dip2px(context, 56),
dip2px(context, 23),
//确定元的半径(算长宽的斜边长,这样半径不会太短也不会很长效果比较舒服)
(float) Math.hypot(search.getWidth(), search.getHeight()),
0);
animatorHide.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
}
@Override
public void onAnimationEnd(Animator animation) {
search.setVisibility(View.GONE);
((InputMethodManager) context.getSystemService(Context.INPUT_METHOD_SERVICE)).hideSoftInputFromWindow(search.getWindowToken(), 0);
}
@Override
public void onAnimationCancel(Animator animation) {
}
@Override
public void onAnimationRepeat(Animator animation) {
}
});
animatorHide.setDuration(300);
animatorHide.start();
} else {
// 关闭输入法
((InputMethodManager) context.getSystemService(Context.INPUT_METHOD_SERVICE)).hideSoftInputFromWindow(search.getWindowToken(), 0);
search.setVisibility(View.GONE);
}
editText.setText("");
search.setEnabled(false);
}
//显示
else {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
final Animator animator = ViewAnimationUtils.createCircularReveal(search,
search.getWidth() - dip2px(context, 56),
dip2px(context, 23),
0,
(float) Math.hypot(search.getWidth(), search.getHeight()));
animator.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
}
@Override
public void onAnimationEnd(Animator animation) {
((InputMethodManager) context.getSystemService(Context.INPUT_METHOD_SERVICE)).toggleSoftInput(InputMethodManager.SHOW_FORCED, InputMethodManager.HIDE_IMPLICIT_ONLY);
}
@Override
public void onAnimationCancel(Animator animation) {
}
@Override
public void onAnimationRepeat(Animator animation) {
}
});
search.setVisibility(View.VISIBLE);
if (search.getVisibility() == View.VISIBLE) {
animator.setDuration(300);
animator.start();
search.setEnabled(true);
}
} else {
search.setVisibility(View.VISIBLE);
search.setEnabled(true);
// 关闭输入法
((InputMethodManager) context.getSystemService(Context.INPUT_METHOD_SERVICE)).toggleSoftInput(InputMethodManager.SHOW_FORCED, InputMethodManager.HIDE_IMPLICIT_ONLY);
}
}