仿百度助手的搜索栏动画

2019年5月25日 173次阅读 来源: Mr_高

昨天无意间发现百度手机助手里边的搜索栏挺有意思，如下图

《仿百度助手的搜索栏动画》 百度手机助手.gif

感觉可以模仿一下，以后项目中可能会用到

首先先分析一下整个效果

1.顶部应该是一个固定的titlebar，随着页面的滑动透明度发生变化
2.最底层的页面应该是一个scrollview，很简单。
3.然后就是那个搜索栏了，仔细看整个动画，发现这个搜索栏应该是在titlebar的上边的，所以整个页面是分成这样3层的

主要细节：

搜索栏随着滑动而变小
titlebar随着滑动改变透明度
当scrollview最上边的imageview完全进入titlebar下边的时候，此时是搜索栏缩小到最小程度，titlebar完全不透明

用到主要知识：估值器 IntEvaluator

主要代码：

              int abs_y = Math.abs(y);
              //滑动距离小于顶部栏从透明到不透明所需的距离
              if ((scrollLength - abs_y) > 0) {

                  //估值器
                  IntEvaluator evaluator = new IntEvaluator();
                  float percent = (float) (scrollLength - abs_y) / scrollLength;

                  if (percent <= 1) {

                      //透明度
                      int evaluate = evaluator.evaluate(percent, 255, 0);
                      rv_bar.getBackground().setAlpha(evaluate);
                      //搜索栏左右margin值
                      evaluatemargin = evaluator.evaluate(percent, DensityUtil.dip2px(SearchViewActivity.this, ENDMARGINLEFT), DensityUtil.dip2px(SearchViewActivity.this, STARTMARGINLEFT));
                      //搜索栏顶部margin值
                      evaluatetop = evaluator.evaluate(percent, DensityUtil.dip2px(SearchViewActivity.this, ENDMARGINTOP), DensityUtil.dip2px(SearchViewActivity.this, STARTMARGINTOP));

                      layoutParams = (FrameLayout.LayoutParams) rv_search.getLayoutParams();
                      layoutParams.setMargins(evaluatemargin, evaluatetop, evaluatemargin, 0);
                      rv_search.requestLayout();
                  }


              } else {
                  rv_bar.getBackground().setAlpha(255);
                  if (layoutParams != null) {
                      layoutParams.setMargins(DensityUtil.dip2px(SearchViewActivity.this, ENDMARGINLEFT), DensityUtil.dip2px(SearchViewActivity.this, 5), DensityUtil.dip2px(SearchViewActivity.this, ENDMARGINLEFT), 0);
                      rv_search.requestLayout();
                  }

              }
          }
      });

我实现的效果，只是把图片换成了一个红色背景，大同小异

《仿百度助手的搜索栏动画》 my.gif

源码地址 有什么问题，欢迎交流
如果感觉有用，请star鼓励一下！！

    原文作者：Mr_高
    原文地址: https://www.jianshu.com/p/bc71daf8b3a3
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞