Android仿簡書動態searchview搜索欄效果

2019-12-12 02:37:56

字體：大中小

來源：轉載

供稿：網友

簡書的動態搜索欄效果是這樣的，挺高大上的感覺。

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使用RecyclerView實現列表數據選擇操作

下一篇：Android實現定時自動靜音小助手