高仿哔哩哔哩客户端的SearchView

作者: 35e3fd5d8158 | 来源:发表于2017-06-09 16:12 被阅读2470次

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

test.gif

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

image.png

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

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

相关文章

网友评论

  • eb3d4963ee34: @Override
    public int getItemCount() {
    if (mData.size() >= 1) {
    mDataCount = mData.size() + 1;
    return mData.size() + 1;
    } else if (mData.size() == 0) {
    mDataCount = mData.size();
    return mData.size();
    }
    mDataCount = mMaxCount;
    return mMaxCount;
    }
    从鸿洋博客看到的,你这里代码需要修改,会出现第一条搜索记录无法显示。
  • db83ecb6a69e:你项目里的vector 是用什么工具做的?
  • 54a7728cc5ff:洋神,能出个andrnid使用Echarts做MapCharts的文章分享吗
  • 2e552e92fe77:使用什么工具解析布局样式的呢?
    AndroidDevPlus:@三年二班王尼玛 为什么我再hierachy viewer 看不到你的View文字形式嵌套的那个视图,只有很复杂的view tree视图
    35e3fd5d8158:@林时均Jason_17 是Android Device Monitor 这个是谷歌官方的工具哦,ADT或者AS里都是有的
  • Afunnyrainman:膜拜大佬
  • f8dea1134de4:膜拜大佬
  • 4d2600b0f244:膜拜大佬

本文标题:高仿哔哩哔哩客户端的SearchView

本文链接:https://www.haomeiwen.com/subject/pnkfqxtx.html