【移动应用开发技术】Android如何实现仿简书搜索框效果_第1页
【移动应用开发技术】Android如何实现仿简书搜索框效果_第2页
【移动应用开发技术】Android如何实现仿简书搜索框效果_第3页
【移动应用开发技术】Android如何实现仿简书搜索框效果_第4页
【移动应用开发技术】Android如何实现仿简书搜索框效果_第5页
已阅读5页,还剩5页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

【移动应用开发技术】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

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论