仿百度助手的搜索栏动画

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


百度手机助手.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鼓励一下!!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,132评论 25 708
  • 今晚流氓兔推荐的歌曲是《折子戏》,黄阅。“如果人人都是一出折子戏,把最璀璨的部分留在别人生命里。” 某天无意中听到...
    佐恬阅读 169评论 0 0
  • 杨萨萨几乎是瘫痪在后座的。 “哎,同学,是去东校区吗?”出租车司机问到。他通过后视镜看到后座上这个女孩子,齐肩...
    十小返阅读 381评论 0 0
  • 我的思念里, 埋着一架指南针, 无论生活 被风刮的有多乱, 那针的两头,永远指向,我 和你住的那座城市。 我去了,...
    诗与远方工作室阅读 170评论 0 2