前言
之前用簡書的時候一直是在web端，后來下載了客戶端福荸，看到了搜索的那個動畫蕴坪，就嘗試的去寫了，沒寫之前感覺挺容易的，寫了之后背传，就感覺里面還是有些要注意的東西的呆瞻。話不多說，直接上圖径玖。
簡書搜索框.gif
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=“搜索簡書內(nèi)容和朋友”時會有2行變1行的效果梳星，看起來效果不太好赞赖。
activity xml.png
頭部視圖：
<?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 滾動監(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();
//獲取第一個可見視圖的position
int position = l.findFirstVisibleItemPosition();
//獲取第一個完全可見視圖的position
int firstCompletelyVisibleItemPosition = l.findFirstCompletelyVisibleItemPosition();
//當position=0時冤灾，對標題欄執(zhí)行透明度變化
if (position == 0) {
//計算滾動的距離占header高度的比例
double delta = Math.floor(((float) getScollYDistance(recyclerView) % mHeaderHeight));
//給標題欄設(shè)置透明度
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), "width", 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();
}
搜索框執(zhí)行的動畫（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)容匿垄，代碼中都有比較詳細的注釋。
快樂生活归粉！快樂工作椿疗！快樂編程！
