仿百度助手的搜索栏动画

作者: Mr_高 | 来源:发表于2016-03-30 22:04 被阅读824次

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


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

相关文章

  • 仿百度助手的搜索栏动画

    昨天无意间发现百度手机助手里边的搜索栏挺有意思,如下图 感觉可以模仿一下,以后项目中可能会用到 首先先分析一下整个...

  • 乐秀视频编辑器破解教程『碎念教学』

    1.在浏览器搜索百度手机助手或者直接打开我这个链接进入百度手机助手 2.在搜索栏搜索乐秀视频编辑器,点下载,如果有...

  • Android

    顶部导航栏 仿京东搜索 顶部导航栏 今日头条导航栏 导航栏快速实现 瀑布流 搜索框带历史记录 tablayout ...

  • 油猴脚本:在百度主页添加按钮快速过滤百家号或百度系内容

    // ==UserScript== // @name 百度搜索助手 // @namespace http...

  • 在网页中加入百度搜索栏

    要在自己的网页中加入百度搜索栏很简单。直接搜索网页中加入百度搜索栏 https://www.baidu.com/c...

  • 仿百度搜索加载动画

    因为百度的加载动画不是经常出现,以前就想做一个,今天有时间做了一个类似效果的加载动画,给大家分享一下。 这是百度的...

  • 个人远离百度软件

    百度搜索->google搜索(chrome安装谷歌访问助手插件) 百度地图->高德地图 百度输入法->必应输入法 ...

  • 随记

    //是横向大小不同的瀑布流动画 搜索动画时有很多侧边栏的效果 无限循环滚动卡片动画-CyclicCardhttp:...

  • 安卓手机如何下载英雄联盟手游-国际服?

    测试机型:一加8Pro 1.先下载光环助手 2.安装并打开光环助手APP 点击热门搜索或者直接在搜索栏里输入“LO...

  • ZQSearchController

    ZQSearchController 仿饿了么搜索栏交互, 主要功能 1.搜索主界面、模糊匹配界面,搜索结果界面之...

网友评论

  • 小廖111:您好 请问如果放的是头像怎么弄?因为头像是圆形的,缩小就是上下左右都改变了
    小廖111: @Mr_高 您好!我指的头像是输入栏那个地方,随输入栏上移动改变他的大小,我把输入栏改成圆形头像,只能改变宽度,不能改变长度,多次上下滑动会造成界面卡住,非常感谢,大神会回答我的问题
    Mr_高: @小廖111 你好,你说的头像指的是那里的图标呢?动态改变的只是searchbsr的宽和高,对里边的图标是没有影响的,如果想改变里边图标的大小了,可以以操作SesrchBar 的方式同样搞一下
  • 735ad2a7fe40:不错不错
  • 08a80639d366:这个不错
  • 天之大任:那这种下拉加载更多怎么搞啊,listvirw没法处理下拉加载更多了,求解
    天之大任:@Mr_高 等你啊,别忘了加哦:stuck_out_tongue_winking_eye:
    天之大任:@天之大任 好的,等你哦。
    Mr_高:@天之大任 前两天回老家了,下个版本加上,到时候私聊你
  • 小鄧子:很帅
    Mr_高: @小鄧子 邓兄来了,有失远迎啊!

本文标题:仿百度助手的搜索栏动画

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