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

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

前言

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

Activity 布局：

<?xml version="1.0" enCoding="utf-8"?><relativeLayout xmlns:androID="http://schemas.androID.com/apk/res/androID"        androID:layout_wIDth="match_parent"        androID:layout_height="match_parent"  >  <androID.support.v7.Widget.RecyclerVIEw    androID:ID="@+ID/ID_recyclevIEw"    androID:layout_wIDth="match_parent"    androID:layout_height="match_parent"    androID:layout_alignParenttop="true"    androID:layout_alignParentleft="true"    androID:layout_alignParentStart="true"/>  <linearLayout    androID:ID="@+ID/ID_ll_Title_layout"    androID:layout_wIDth="match_parent"    androID:layout_height="wrap_content"    androID:background="@androID:color/transparent"    androID:gravity="right"    androID:orIEntation="horizontal">    <relativeLayout      androID:ID="@+ID/ID_Title_layout"      androID:layout_wIDth="match_parent"      androID:layout_height="wrap_content"      androID:background="@drawable/search_white_bg"      androID:paddingRight="10dp"      androID:paddingleft="10dp"      androID:gravity="center"      androID:layout_margintop="5dp"      androID:layout_marginBottom="5dp"      androID:layout_marginRight="16dp"      >      <TextVIEw        androID:ID="@+ID/ID_tv_search_min"        androID:layout_wIDth="wrap_content"        androID:layout_height="35dp"        androID:gravity="center"        androID:maxlines="1"        androID:drawableleft="@mipmap/search_icon"        androID:text="搜索"        androID:drawablepadding="10dp"        androID:textcolor="#b7b7b7"        androID:textSize="13sp"        />    </relativeLayout>  </linearLayout></relativeLayout>

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

头部视图：

<?xml version="1.0" enCoding="utf-8"?><relativeLayout xmlns:androID="http://schemas.androID.com/apk/res/androID"       xmlns:app="http://schemas.androID.com/apk/res-auto"       androID:ID="@+ID/ID_header_vIEw"       androID:layout_wIDth="match_parent"       androID:layout_height="match_parent">    <TextVIEw      androID:ID="@+ID/ID_tv_header_vIEw"      androID:layout_wIDth="match_parent"      androID:layout_height="120dp"      androID:background="@color/c_3ec88e"      androID:gravity="center"      androID:text="我是头部"     /></relativeLayout>

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),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();

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

总结

以上是内存溢出为你收集整理的Android仿简书搜索框效果的示例代码全部内容，希望文章能够帮你解决Android仿简书搜索框效果的示例代码所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。