前言

之前用簡書的時候一直是在web端，后來下載了客戶端，看到了搜索的那個動畫，就嘗試的去寫了，沒寫之前感覺挺容易的，寫了之后，就感覺里面還是有些要注意的東西的。話不多說，直接上圖。

Activity 布局：

android:layout_width="match_parent"

android:layout_height="match_parent"

>

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"/>

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">

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"

>

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"

/>

這里的TextView要添加maxLines=1屬性，如果不添加，當text=“搜索簡書內(nèi)容和朋友”時會有2行變1行的效果，看起來效果不太好。

頭部視圖：

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">

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="我是頭部"

/>

activity 頭部 xml.png

下面咱們省略findViewById的代碼，直接看核心代碼：

變量初始化：

//獲取屏幕寬度

mMaxWidth = ScreenUtil.getScreenWidth();

//搜索框距離屏幕邊緣的margin

int rightMargin = Px2DpUtil.dp2px(this, 17);

//屏幕寬度減去左右margin后的搜索框?qū)挾茸畲笾?/p>

mMaxWidth = mMaxWidth -rightMargin*2;

//搜索框?qū)挾茸钚≈?/p>

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)容，代碼中都有比較詳細的注釋。希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

總結(jié)

以上是生活随笔為你收集整理的android 仿简书评论,Android仿简书搜索框效果的示例代码的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。