高仿哔哩哔哩客户端的SearchView

之前使用哔哩哔哩客户端的时候觉得她的搜索效果非常的赞,最近刚好有时间准备学习尝试自己写一下。
话不多说,先看东西是吧

test.gif

好了废话不多说正式开始:
1.首先分析一下我们解析获得的布局样式

高仿哔哩哔哩客户端的SearchView_第1张图片
image.png

观察之后发现B站实现这个效果是在主页面有单独的一个布局,也就是说这个列表其实是早就写好的。那么实际上这个效果就只有2个步骤1个就是首页的布局,2就是圆形的动画。
2.圆形动画的实现:
这个圆形动画就是5.0之后谷歌新加入的ViewAnimationUtils.createCircularRevea

高仿哔哩哔哩客户端的SearchView_第2张图片
image.png
*     @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);
            }
        }

项目源代码:
https://github.com/didixyy/BilibiliSearchView

你可能感兴趣的:(高仿哔哩哔哩客户端的SearchView)