Android仿简书动态searchview搜索栏效果_网络技术

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

发布时间 - 2026-01-11 01:59:33 点击率：次

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

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

当然简书的整个布局是基于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:drawableLeft="@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), 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);
 }

 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 Studio搜索功能(查找功能)及快捷键图文详解 # Android实现搜索功能并本地保存搜索历史记录 # Android自定义View实现搜索框（SearchView）功能 # Android百度地图实现搜索和定位及自定义图标绘制并点击时弹出泡泡 # Android搜索框SearchView属性和用法详解 # Android SearchView搜索框组件的使用方法 # Android遍历所有文件夹和子目录搜索文件 # Android搜索框组件SearchView的基本使用方法 # Android ListView用EditText实现搜索功能效果 # Android实现简单动态搜索功能 # 大家多多 # 这是 # 我是 # 瞬间 # 几个 # 在这里 # 好了 # 是这样 # 这么多 # 只需 # 这部 # 点了 # 用了 # 要知道 # 自定义 # 我做 # 只需要 # 设置为 # 轻而易举 # 全屏

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：如何使用Golang捕获JSON解析错误_结合encodin

下一篇：汕头网站优化策略：提升排名与流量的关键技巧

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：如何使用Golang捕获JSON解析错误_结合encodin

下一篇：汕头网站优化策略：提升排名与流量的关键技巧