Android仿简书动态searchview搜索栏效果

概述简书的动态搜索栏效果是这样的，挺高大上的感觉。ezgif.com-resize.gif仔细想一下，其实实现起来非常简单，这是我做的效果，基本完美还原。

简书的动态搜索栏效果是这样的，挺高大上的感觉。

ezgif.com-resize.gif

仔细想一下，其实实现起来非常简单，这是我做的效果，基本完美还原。

ezgif.com-resize (2).gif

实现这个效果， 只要关注几个点

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)); 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)); 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;  }  } }); }

当然简书的整个布局是基于recyclervIEw的，这里我为了方便使用了scrollervIEw。recyclervIEw也只需监听相应的滚动状态即可。

顶部透明度的渐变

直接上代码

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

好了关键代码就这么多点了~

下面附上完整代码

布局文件

<?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" xmlns:tools="http://schemas.androID.com/tools" androID:layout_wIDth="match_parent" androID:layout_height="match_parent" androID:background="#c2c0c0" > <ScrollVIEw androID:ID="@+ID/scrollVIEw" androID:layout_wIDth="match_parent" androID:layout_height="wrap_content" androID:scrollbars="none"> <FrameLayout  androID:layout_wIDth="match_parent"  androID:layout_height="wrap_content">  <FrameLayout  androID:layout_wIDth="match_parent"  androID:layout_height="1500dp">  <ImageVIEw   androID:ID="@+ID/iv_img"   androID:layout_wIDth="match_parent"   androID:layout_height="180dp"   androID:scaleType="centerCrop"   androID:src="@drawable/night1" />  </FrameLayout> </FrameLayout> </ScrollVIEw> <androID.support.v7.Widget.Toolbar androID:layout_wIDth="match_parent" androID:layout_height="wrap_content" androID:ID="@+ID/toolbar" androID:background="@androID:color/white" androID:fitsSystemwindows="true"> <relativeLayout  androID:layout_wIDth="match_parent"  androID:layout_height="wrap_content"  >  <linearLayout  androID:ID="@+ID/ll_search"  androID:layout_wIDth="80dp"  androID:layout_height="30dp"  androID:layout_alignParentRight="true"  androID:layout_marginRight="10dp"  androID:layout_margintop="10dp"  androID:layout_marginBottom="10dp"  androID:background="@drawable/shape_bg"  androID:gravity="center">  <TextVIEw   androID:ID="@+ID/tv_search"   androID:layout_wIDth="wrap_content"   androID:layout_height="wrap_content"   androID:drawable@R_404_6823@="@drawable/search"   androID:gravity="center_vertical"   androID:text="搜索"   androID:textcolor="#8A8A8A" />  </linearLayout> </relativeLayout> </androID.support.v7.Widget.Toolbar></relativeLayout>

就一个activity

public class MainActivity extends AppCompatActivity { @Bind(R.ID.tv_search) TextVIEw tvSearch; @Bind(R.ID.ll_search) linearLayout mSearchLayout; @Bind(R.ID.scrollVIEw) ScrollVIEw mScrollVIEw; boolean isExpand = false; @Bind(R.ID.iv_img) ImageVIEw ivimg; @Bind(R.ID.toolbar) Toolbar toolbar; private TransitionSet mSet; @OverrIDe protected voID onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentVIEw(R.layout.activity_main); ButterKnife.bind(this); //设置全屏透明状态栏 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {  getwindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);  VIEwGroup rootVIEw = (VIEwGroup) ((VIEwGroup)findVIEwByID(androID.R.ID.content)).getChildAt(0);  VIEwCompat.setFitsSystemwindows(rootVIEw,false);  rootVIEw.setClipTopadding(true); } if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LolliPOP) { getwindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS|   WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION); getwindow().getDecorVIEw().setsystemUIVisibility(VIEw.SYstem_UI_FLAG_LAYOUT_FulLSCREEN| VIEw.SYstem_UI_FLAG_LAYOUT_Stable); getwindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYstem_bar_BACKGROUNDS);  getwindow().setStatusbarcolor(color.transparent); } //设置toolbar初始透明度为0 toolbar.getBackground().mutate().setAlpha(0); //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)); } private voID expand() { //设置伸展状态时的布局 tvSearch.setText("搜索简书的内容和朋友"); relativeLayout.LayoutParams LayoutParams = (relativeLayout.LayoutParams) mSearchLayout.getLayoutParams(); LayoutParams.wIDth = LayoutParams.MATCH_PARENT; LayoutParams.setmargins(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)); mSearchLayout.setLayoutParams(LayoutParams); //开始动画 beginDelayedTransition(mSearchLayout); } voID beginDelayedTransition(VIEwGroup vIEw) { mSet = new autoTransition(); mSet.setDuration(300); TransitionManager.beginDelayedTransition(vIEw,mSet); } private int dip2px(float dpVale) { final float scale = getResources().getdisplayMetrics().density; return (int) (dpVale * scale + 0.5f); }}

更完整的在这里https://github.com/yanyiqun001/dymicSearchview 希望大家多多支持

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程小技巧。

总结

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

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