【移动应用开发技术】Android如何实现仿简书搜索框效果

【移动应用开发技术】Android如何实现仿简书搜索框效果

这篇文章给大家分享的是有关Android如何实现仿简书搜索框效果的内容。在下觉得挺实用的，因此分享给大家做个参考，一起跟随在下过来看看吧。直接上图：Activity布局：<?xml

version="1.0"

encoding="utf-8"?>

<RelativeLayout

xmlns:android="/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=“搜索简书内容和朋友”时会有2行变1行的效果，看起来效果不太好。头部视图：<?xml

version="1.0"

encoding="utf-8"?>

<RelativeLayout

xmlns:android="/apk/res/android"

xmlns:app="/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后的搜索框宽度最大值

mMaxWidth

=

mMaxWidth

-rightMargin*2;

//搜索框宽度最小值

mMinWidth

=

Px2DpUtil.dp2px(this,

R.dimen.d_80);

//header布局高度

mHeaderHeight=Px2DpUtil.dp2px(this,R.dimen.d_120);RecyclerView滚动监听：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时，对标题栏执行透明度变化

if

(position

==

0)

{

//计算滚动的距离占header高度的比例

double

delta

=

Math.floor(((float)

getScollYDistance(recyclerView)

%

mHeaderHeight));

//给标题栏设置透明度

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();

}搜索框执行的动画（ObjectAnimator）：animator.addListener(new

Animator.AnimatorListener()

{

@Override

public

void

onAnimationStart(Animator

animation)

{

}

@Override

public

void

onAnimationEnd(Animator

animation)

{

if

(visibity

==

1)

{

mMinTvSearchView.setText("搜索简书内容和朋友");

}

if

(visibity

==

0)

{

mMinTvSearchView.setText("搜索");

}

}

@Override

public

void

onAnima