Android仿简书搜索框效果的示例代码

前言

之前用简书的时候一直是在web端，后来下载了客户端，看到了搜索的那个动画，就尝试的去写了，没写之前感觉挺容易的，写了之后，就感觉里面还是有些要注意的东西的。话不多说，直接上图。

Activity 布局：

这里的TextView要添加maxLines=1属性，如果不添加，当text=“搜索简书内容和朋友”时会有2行变1行的效果，看起来效果不太好。

头部视图：

activity 头部 xml.png

下面咱们省略findViewById的代码，直接看核心代码：

变量初始化：

    //获取屏幕宽度
    mMaxWidth = ScreenUtil.getScreenWidth();
    //搜索框距离屏幕边缘的margin
    int rightMargin = Px2DpUtil.dp2px(this, 17);
    //屏幕宽度减去左右margin后的搜索框宽度最大值
    mMaxWidth = mMaxWidth -rightMargin*2;
    //搜索框宽度最小值
    mMinWidth = Px2DpUtil.dp2px(this, R.dimen.d_80);
    //header布局高度
    mHeaderHeight=Px2DpUtil.dp2px(this,R.dimen.d_120);

RecyclerView 滚动监听：

mRecyclerView.addonScrollListener(new RecyclerView.onScrollListener() {
      @Override
      public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
 super.onScrollStateChanged(recyclerView, newState);
      }

      @Override
      public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
 super.onScrolled(recyclerView, dx, dy);
 LinearLayoutManager l = (LinearLayoutManager)recyclerView.getLayoutManager();
 //获取第一个可见视图的position
 int position = l.findFirstVisibleItemPosition();
 //获取第一个完全可见视图的position
 int firstCompletelyVisibleItemPosition = l.findFirstCompletelyVisibleItemPosition();
 //当position=0时，对标题栏执行透明度变化
 if (position == 0) {
   //计算滚动的距离占header高度的比例
   double delta = Math.floor(((float) getScollYDistance(recyclerView) % mHeaderHeight));
   //给标题栏设置透明度
   mLlTitle.getBackground().setAlpha((int) delta);
 }
 //当position=1时，搜索框最大
 if (position == 1) {
   ObjectAnimator animator = ObjectAnimator.ofInt(new ViewWidthWrapper(mRlTitleLayout), "width", mMaxWidth);
   setAnimatorListener(animator,1);
 }
  //当position=0时，搜索框最小
 if(firstCompletelyVisibleItemPosition==0){
   ObjectAnimator animator = ObjectAnimator.ofInt(new ViewWidthWrapper(mRlTitleLayout), "width", mMinWidth);
   setAnimatorListener(animator,0);
 }
      }

    });

获取RecycleView垂直滚动的距离：

public int getScollYDistance(RecyclerView rv) {
    LinearLayoutManager layoutManager = (LinearLayoutManager) rv.getLayoutManager();
    //获取第一个可见item的position
    int position = layoutManager.findFirstVisibleItemPosition();
    //获取第一个position的View
    View firstVisiableChildView = layoutManager.findViewByPosition(position);
    //获取第一个可见View的高度 
    int itemHeight = firstVisiableChildView.getHeight();
    return (position) * itemHeight - firstVisiableChildView.getTop();
  }

搜索框执行的动画（ObjectAnimator）：

animator.addListener(new Animator.AnimatorListener() {
      @Override
      public void onAnimationStart(Animator animation) {
      }

      @Override
      public void onAnimationEnd(Animator animation) {
 if (visibity == 1) {
   mMinTvSearchView.setText("搜索简书内容和朋友");
 }
 if (visibity == 0) {
   mMinTvSearchView.setText("搜索");
 }
      }

      @Override
      public void onAnimationCancel(Animator animation) {
      }

      @Override
      public void onAnimationRepeat(Animator animation) {
      }
    });
    animator.setDuration(100).start();

好了，以上就是搜索框效果的全部内容，代码中都有比较详细的注释。希望对大家的学习有所帮助，也希望大家多多支持考高分网。