前言
之前用簡書的時(shí)候一直是在web端，后來下載了客戶端，看到了搜索的那個(gè)動(dòng)畫，就嘗試的去寫了，沒寫之前感覺挺容易的，寫了之后，就感覺里面還是有些要注意的東西的。話不多說，直接上圖。
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屬性，如果不添加，當(dāng)text=“搜索簡書內(nèi)容和朋友”時(shí)會有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后的搜索框?qū)挾茸畲笾? mMaxWidth = mMaxWidth -rightMargin*2; //搜索框?qū)挾茸钚≈? mMinWidth = Px2DpUtil.dp2px(this, R.dimen.d_80); //header布局高度 mHeaderHeight=Px2DpUtil.dp2px(this,R.dimen.d_120);
RecyclerView 滾動(dòng)監(jiān)聽：
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(); //獲取第一個(gè)可見視圖的position int position = l.findFirstVisibleItemPosition(); //獲取第一個(gè)完全可見視圖的position int firstCompletelyVisibleItemPosition = l.findFirstCompletelyVisibleItemPosition(); //當(dāng)position=0時(shí)，對標(biāo)題欄執(zhí)行透明度變化 if (position == 0) { //計(jì)算滾動(dòng)的距離占header高度的比例 double delta = Math.floor(((float) getScollYDistance(recyclerView) % mHeaderHeight)); //給標(biāo)題欄設(shè)置透明度 mLlTitle.getBackground().setAlpha((int) delta); } //當(dāng)position=1時(shí)，搜索框最大 if (position == 1) { ObjectAnimator animator = ObjectAnimator.ofInt(new ViewWidthWrapper(mRlTitleLayout), "width", mMaxWidth); setAnimatorListener(animator,1); } //當(dāng)position=0時(shí)，搜索框最小 if(firstCompletelyVisibleItemPosition==0){ ObjectAnimator animator = ObjectAnimator.ofInt(new ViewWidthWrapper(mRlTitleLayout), "width", mMinWidth); setAnimatorListener(animator,0); } } });獲取RecycleView垂直滾動(dòng)的距離：
public int getScollYDistance(RecyclerView rv) { LinearLayoutManager layoutManager = (LinearLayoutManager) rv.getLayoutManager(); //獲取第一個(gè)可見item的position int position = layoutManager.findFirstVisibleItemPosition(); //獲取第一個(gè)position的View View firstVisiableChildView = layoutManager.findViewByPosition(position); //獲取第一個(gè)可見View的高度 int itemHeight = firstVisiableChildView.getHeight(); return (position) * itemHeight - firstVisiableChildView.getTop(); }搜索框執(zhí)行的動(dòng)畫（ObjectAnimator）：
animator.addListener(new Animator.AnimatorListener() { @Override public void onAnimationStart(Animator animation) { } @Override public void onAnimationEnd(Animator animation) { if (visibity == 1) { mMinTvSearchView.setText("搜索簡書內(nèi)容和朋友"); } if (visibity == 0) { mMinTvSearchView.setText("搜索"); } } @Override public void onAnimationCancel(Animator animation) { } @Override public void onAnimationRepeat(Animator animation) { } }); animator.setDuration(100).start();好了，以上就是搜索框效果的全部內(nèi)容，代碼中都有比較詳細(xì)的注釋。希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持VEVB武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
