Android应用开发Android 仿简书搜索栏实现方法
白羽 2019-03-04 来源 :网络 阅读 87 评论 0

摘要:本文将带你了解Android应用开发Android 仿简书搜索栏实现方法,希望本文对大家学Android有所帮助。

    本文将带你了解Android应用开发Android 仿简书搜索栏实现方法,希望本文对大家学Android有所帮助。



Android应用开发Android 仿简书搜索栏实现方法


需求分析
    当整个页面的轮播图部分上划消失的过程中,透明度会出现渐变的效果,同时当全部消失或者全部显示的时候搜索框宽度动态变化。
   
    效果如下
    这里写图片描述
   
    实现这个效果, 只要关注几个点
   
    1.搜索栏伸展和收缩动画效果实现
    2.搜索栏伸展和收缩的时机
    3.顶部透明度的渐变
   
    搜索栏伸展和收缩动画效果实现:
   
    我们只要明确,使用系统为我们提供的Transition框架,就可以轻而易举的实现了。
    首先要引入依赖compile   ‘com.android.support:design:25.3.1’,要知道我们使用到的这部分Transition效果只是封装了属性动画的内容,是可以兼容到5.0之前的。

    private void expand() {
     //设置伸展状态时的布局
     tvSearch.setText(搜索简书的内容和朋友);
     RelativeLayout.LayoutParams   LayoutParams = (RelativeLayout.LayoutParams) mSearchLayout.getLayoutParams();
     LayoutParams.width =   LayoutParams.MATCH_PARENT;
     LayoutParams.setMargins(dip2px(10),   dip2px(10), dip2px(10), dip2px(10));
     mSearchLayout.setLayoutParams(LayoutParams);
     //设置动画
     beginDelayedTransition(mSearchLayout);
     }
     
     private void reduce() {
     //设置收缩状态时的布局
     tvSearch.setText(搜索);
     RelativeLayout.LayoutParams   LayoutParams = (RelativeLayout.LayoutParams)   mSearchLayout.getLayoutParams();
     LayoutParams.width =   dip2px(80);
     LayoutParams.setMargins(dip2px(10),   dip2px(10), dip2px(10), dip2px(10));
     mSearchLayout.setLayoutParams(LayoutParams);
     //设置动画
     beginDelayedTransition(mSearchLayout);
     }
     
     void   beginDelayedTransition(ViewGroup view) {
     mSet = new AutoTransition();
     //设置动画持续时间
     mSet.setDuration(300);
     // 开始表演
     TransitionManager.beginDelayedTransition(view,   mSet);
     }
    其中mSearchLayout就是搜索框的布局,只需要动态设置一下伸展和收缩的布局大小和其中显示的文字,剩下的就交给Transition吧~   这样搜索框就可以来回摇摆了。
   
    搜索栏伸展和收缩的时机:
   
      观察一下效果,伸展的时机是当顶部完全盖住banner的时候开始的,收缩的时机是滚动到顶部的时候触发。需要我们监听scllerview的滚动状态。这里的顶部我是用了自定义布局的toolbar,然后用一个imageview代替了banner。

    //scrollview滚动状态监听
     mScrollView.getViewTreeObserver().addOnScrollChangedListener(new   ViewTreeObserver.OnScrollChangedListener() {
      @Override
      public void onScrollChanged()   {
      //改变toolbar的透明度
      changeToolbarAlpha();
      //滚动距离>=大图高度-toolbar高度   即toolbar完全盖住大图的时候 且不是伸展状态 进行伸展操作
      if (mScrollView.getScrollY()   >=ivImg.getHeight() - toolbar.getHeight() && !isExpand) {
       expand();
       isExpand = true;
      }
      //滚动距离<=0时 即滚动到顶部时 且当前伸展状态   进行收缩操作
      else if   (mScrollView.getScrollY()<=0&& isExpand) {
       reduce();
       isExpand = false;
      }
      }
     });
     }
    顶部透明度的渐变

    private void changeToolbarAlpha() {
    int scrollY = mScrollView.getScrollY();
    //快速下拉会引起瞬间scrollY<0
    if(scrollY<0){
     toolbar.getBackground().mutate().setAlpha(0);
     return;
    }
    //计算当前透明度比率
    float radio=   Math.min(1,scrollY/(ivImg.getHeight()-toolbar.getHeight()*1f));
    //设置透明度
    toolbar.getBackground().mutate().setAlpha( (int)(radio * 0xFF));
    }
    注意刚才监听滚动事件的时候调用changeToolbarAlpha()方法,并且需要初始设置为全透明
    toolbar.getBackground().mutate().setAlpha(0);
   
    edittext样式文件

   

    布局文件

    activity文件
   

    public class Main 

 

本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之Android频道!

本文由 @白羽 发布于职坐标。未经许可,禁止转载。
喜欢 | 1 不喜欢 | 0
看完这篇文章有何感觉?已经有1人表态,100%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

X
免费获取海同IT培训资料
验证码手机号,获得海同独家IT培训资料
获取验证码
提交

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    ICP许可  沪B2-20190160