当前位置： 移动技术网 > 移动技术>移动开发>Android > Android仿京东顶部搜索框滑动伸缩动画效果

Android仿京东顶部搜索框滑动伸缩动画效果

2019年09月06日  | 移动技术网移动技术  | 我要评论

最近使用京东发现，京东顶部的搜索框有一个新的伸缩效果，根据用户的手势滑动，伸缩搜索框。觉得效果还不错，就看了下其他的应用有没有这种伸缩的效果，发现安居客也使用了类似的一种效果，然后就想着实现这样的一种动画效果。
首先看下第三方的效果图：

京东效果：

安居客效果：

我们最终实现的效果：

仿京东效果：

仿安居客效果：

看完效果图，接下来，我们开始具体实现上面的效果：

布局文件的编写

根据效果我们可以分析我的要做的功能布局效果，首先，整个布局存在一个头部的滑动操作区域，包括标题栏和搜索栏，然后整个布局还包含了一个滑动控件，滑动控件我们可以使用scrollview或者nestedscrollview，过程中我们需要监听获取上下滑动的距离，因此需要自定义我们的滑动控件，获取滑动的距离：

自定义滑动控件：animationnestedscrollview

public class animationnestedscrollview extends nestedscrollview {
 private onanimationscrollchangelistener listener;

 public animationnestedscrollview(@nonnull context context) {
 super(context);
 }

 public animationnestedscrollview(@nonnull context context, @nullable attributeset attrs) {
 super(context, attrs);
 }

 public animationnestedscrollview(@nonnull context context, @nullable attributeset attrs, int defstyleattr) {
 super(context, attrs, defstyleattr);
 }

 public void setonanimationscrolllistener(onanimationscrollchangelistener listener) {
 this.listener = listener;
 }

 public interface onanimationscrollchangelistener {
 void onscrollchanged(float dy);
 }

 @override
 protected void onscrollchanged(int l, int t, int oldl, int oldt) {
 super.onscrollchanged(l, t, oldl, oldt);
 if (listener != null) {
 listener.onscrollchanged(getscrolly() * 0.65f);//x0.65 使位移效果更加平滑 解决手指按住停留时抖动问题
 }
 }
}

这里我使用了nestedscrollview 来实现自定义控件，使用scrollview也是一样的效果， 中间主要设置了滑动的监听方法，获取滑动的距离。

实现了自定义控件后，我们开始编写布局文件：

布局文件：activity_search

<?xml version="1.0" encoding="utf-8"?>
<relativelayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 tools:context="com.cjxj.androiddemo.activity.searchactivity">

 <relativelayout
 android:id="@+id/search_rl_top"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:background="#3f51b5">

 <relativelayout
 android:id="@+id/search_layout"
 android:layout_width="match_parent"
 android:layout_height="44dp">

 <imageview
 android:id="@+id/search_iv_back"
 android:layout_width="10dp"
 android:layout_height="20dp"
 android:layout_alignparentleft="true"
 android:layout_centervertical="true"
 android:layout_marginleft="20dp"
 android:src="@drawable/video_back" />

 <textview
 android:id="@+id/search_tv_title"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_centerhorizontal="true"
 android:layout_margintop="11.5dp"
 android:gravity="center"
 android:text="这是标题"
 android:textcolor="#fff"
 android:textsize="17dp"
 android:textstyle="bold" />

 </relativelayout>

 <linearlayout
 android:id="@+id/search_ll_search"
 android:layout_width="match_parent"
 android:layout_height="35dp"
 android:layout_centerhorizontal="true"
 android:layout_marginleft="15dp"
 android:layout_margintop="49dp"
 android:layout_marginright="15dp"
 android:layout_marginbottom="10dp"
 android:background="@drawable/activity_search_tv_shape"
 android:gravity="center_vertical"
 android:orientation="horizontal"
 android:visibility="visible">

 <imageview
 android:layout_width="16dp"
 android:layout_height="16dp"
 android:layout_marginleft="10dp"
 android:src="@drawable/ic_search" />

 <textview
 android:id="@+id/search_tv_search"
 android:layout_width="0dp"
 android:layout_height="match_parent"
 android:layout_marginleft="5dp"
 android:layout_marginright="10dp"
 android:layout_weight="1"
 android:cursorvisible="false"
 android:gravity="center_vertical|center_horizontal"
 android:hint="这是搜索框"
 android:textsize="15dp" />

 <imageview
 android:layout_width="16dp"
 android:layout_height="16dp"
 android:layout_marginright="10dp"
 android:src="@drawable/ic_search" />

 </linearlayout>

 </relativelayout>

 <com.cjxj.androiddemo.view.animationnestedscrollview
 android:id="@+id/search_sv_view"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:layout_below="@id/search_rl_top">

 <linearlayout
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:descendantfocusability="blocksdescendants"
 android:orientation="vertical">

 <textview
 android:layout_width="match_parent"
 android:layout_height="900dp" />

 </linearlayout>

 </com.cjxj.androiddemo.view.animationnestedscrollview>


</relativelayout>

这里的布局文件是实现安居客的效果的代码，如果要实现京东的效果，布局文件只需要设置search_ll_search的属性即可：

删除代码：

android:layout_centerhorizontal="true"

添加代码：

android:layout_alignparentleft="true"

然后再修改逻辑代码参数即可，后面会介绍。

逻辑的处理

逻辑部分，主要是根据滑动距离，动态的修改搜索栏的宽度和顶部距离，同时设置边界即可。

public class searchactivity extends appcompatactivity {
 private animationnestedscrollview sv_view;
 private linearlayout ll_search;
 private textview tv_title;
 private float ll_search_min_top_margin, ll_search_max_top_margin, ll_search_max_width, ll_search_min_width, tv_title_max_top_margin;
 private viewgroup.marginlayoutparams searchlayoutparams, titlelayoutparams;

 @override
 protected void oncreate(bundle savedinstancestate) {
 super.oncreate(savedinstancestate);
 setcontentview(r.layout.activity_search);

 initview();
 }

 private void initview() {
 sv_view = findviewbyid(r.id.search_sv_view);
 ll_search = findviewbyid(r.id.search_ll_search);
 tv_title = findviewbyid(r.id.search_tv_title);
 searchlayoutparams = (viewgroup.marginlayoutparams) ll_search.getlayoutparams();
 titlelayoutparams = (viewgroup.marginlayoutparams) tv_title.getlayoutparams();

 ll_search_min_top_margin = commonutil.dp2px(this, 4.5f);//布局关闭时顶部距离
 ll_search_max_top_margin = commonutil.dp2px(this, 49f);//布局默认展开时顶部距离
 ll_search_max_width = commonutil.getscreenwidth(this) - commonutil.dp2px(this, 30f);//布局默认展开时的宽度
 ll_search_min_width = commonutil.getscreenwidth(this) - commonutil.dp2px(this, 82f);//布局关闭时的宽度
 tv_title_max_top_margin = commonutil.dp2px(this, 11.5f);

 sv_view.setonanimationscrolllistener(new animationnestedscrollview.onanimationscrollchangelistener() {
 @override
 public void onscrollchanged(float dy) {
 float searchlayoutnewtopmargin = ll_search_max_top_margin - dy;
 float searchlayoutnewwidth = ll_search_max_width - dy * 1.3f;//此处 * 1.3f 可以设置搜索框宽度缩放的速率

 float titlenewtopmargin = (float) (tv_title_max_top_margin - dy * 0.5);

 //处理布局的边界问题
 searchlayoutnewwidth = searchlayoutnewwidth < ll_search_min_width ? ll_search_min_width : searchlayoutnewwidth;

 if (searchlayoutnewtopmargin < ll_search_min_top_margin) {
  searchlayoutnewtopmargin = ll_search_min_top_margin;
 }

 if (searchlayoutnewwidth < ll_search_min_width) {
  searchlayoutnewwidth = ll_search_min_width;
 }

 float titlealpha = 255 * titlenewtopmargin / tv_title_max_top_margin;
 if (titlealpha < 0) {
  titlealpha = 0;
 }

 //设置相关控件的layoutparams 此处使用的是marginlayoutparams，便于设置params的topmargin属性
 tv_title.settextcolor(tv_title.gettextcolors().withalpha((int) titlealpha));
 titlelayoutparams.topmargin = (int) titlenewtopmargin;
 tv_title.setlayoutparams(titlelayoutparams);

 searchlayoutparams.topmargin = (int) searchlayoutnewtopmargin;
 searchlayoutparams.width = (int) searchlayoutnewwidth;
 ll_search.setlayoutparams(searchlayoutparams);
 }
 });
 }
}

具体的代码都有相应的注释，需要解释的是，这里同样是实现安居客的效果的代码，如果要实现京东效果，这里需要做相关修改：

1.修改搜索栏的最小宽度：

ll_search_min_width = commonutil.getscreenwidth(this) - commonutil.dp2px(this, 122f);//布局关闭时的宽度

2.设置搜索框宽度缩放的速率

float searchlayoutnewwidth = ll_search_max_width - dy * 3.0f;//此处 * 1.3f 可以设置搜索框宽度缩放的速率

通过这两步修改，结合上文说的布局文件的修改，即可实现京东的效果。

注：

1.文件中我们使用的layoutparams是marginlayoutparams，主要是便于我们设置相关控件的topmargin属性.
2.文件中commonutil是方法公共类，主要是用于获取屏幕的宽度，以及dp和px的转换，相关方法如下：

public static int dp2px(context context, float dpvalue) {
 if (null == context) {
 return 0;
 }
 final float scale = context.getresources().getdisplaymetrics().density;
 return (int) (dpvalue * scale + 0.5f);
 }

//...

public static int getscreenwidth(context context) {
 if (null == context) {
 return 0;
 }
 return context.getresources().getdisplaymetrics().widthpixels;
 }

至此，我们想要的效果就基本实现了，如有问题欢迎留言指正。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网