仿百度助手的搜索栏动画

作者: 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鼓励一下!!

    相关文章

      网友评论

      • 小廖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