android 仿搜索动画,Android仿京东顶部搜索框滑动伸缩动画效果
最近使用京东发现,京东顶部的搜索框有一个新的伸缩效果,根据用户的手势滑动,伸缩搜索框。觉得效果还不错,就看了下其他的应用有没有这种伸缩的效果,发现安居客也使用了类似的一种效果,然后就想着实现这样的一种动画效果。
首先看下第三方的效果图:
京东效果:
安居客效果:
我们最终实现的效果:
仿京东效果:
仿安居客效果:
看完效果图,接下来,我们开始具体实现上面的效果:
布局文件的编写
根据效果我们可以分析我的要做的功能布局效果,首先,整个布局存在一个头部的滑动操作区域,包括标题栏和搜索栏,然后整个布局还包含了一个滑动控件,滑动控件我们可以使用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
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.cjxj.androiddemo.activity.SearchActivity">
android:id="@+id/search_rl_top"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#3F51B5">
android:id="@+id/search_layout"
android:layout_width="match_parent"
android:layout_height="44dp">
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" />
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" />
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">
android:layout_width="16dp"
android:layout_height="16dp"
android:layout_marginLeft="10dp"
android:src="@drawable/ic_search" />
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" />
android:layout_width="16dp"
android:layout_height="16dp"
android:layout_marginRight="10dp"
android:src="@drawable/ic_search" />
android:id="@+id/search_sv_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/search_rl_top">
android:layout_width="match_parent"
android:layout_height="match_parent"
android:descendantFocusability="blocksDescendants"
android:orientation="vertical">
android:layout_width="match_parent"
android:layout_height="900dp" />
这里的布局文件是实现安居客的效果的代码,如果要实现京东的效果,布局文件只需要设置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;
}
至此,我们想要的效果就基本实现了,如有问题欢迎留言指正。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
android 仿搜索动画,Android仿京东顶部搜索框滑动伸缩动画效果相关推荐
- 微信小程序 顶部搜索框滑动伸缩效果的实现
项目场景:微信小程序顶部搜索框随页面滑动伸缩效果 提示:实现搜索框跟随用户滑动页面,实现伸缩效果 微信小程序 顶部搜索框滑动伸缩动画的实现 实现效果: 滑动前 滑动后 实现原理 提示:主要用到了微信小 ...
- 接入科大讯飞语音听写,增加语音动画,类似京东语音搜索功能
前言:小白第一次接入科大讯飞语音听写,接入还是比较简单的,先看效果图无UI界面 Demo地址拿去 效果图有两部分,一是接入科大讯飞语音听写功能,可以实现将语音转换成文字. 二是看到的语音音量动画效果, ...
- 列出搜索过的数据(类似京东顶部搜索框)
tip: 只要进行数据绑定,一定要先检查是否在app_module.ts中进行过formsModule的数据引入,如果没有进行引入,在数据绑定的时候会出现报错 例一:京东搜索,历史记录 html: & ...
- 仿淘宝商品详情页顶部nav屏幕滑动出现-商品/详情/评价/分享
项目开发实录 将其简化为一个demo方便后续使用 简化淘宝顶部的淡入淡出并将其修改为两个不同盒子之间的切换,毕竟实际项目实际操作嘛. 下面的代码块为简略版的demo,直接复制粘贴即可实现效果(移动端喔 ...
- Android卡片滑动切换动画,Android原生ViewPager控件实现卡片翻动效果
本文实例为大家分享了Android控件ViewPager实现卡片翻动效果的具体代码,供大家参考,具体内容如下 先放一张效果图: 想要实现这样的效果其实并不是太难,需要对ViewPager的一些细节属性 ...
- jQuery仿麦包包商城图片滑动伸缩图片广告代码-20130701
1.效果及功能说明 仿麦包包商城网站首页全屏图片上下滑动伸缩图片广告代码,设置固定时间图片滑动伸缩的图片广告代码 2.实现原理 先获得显示div的宽度高度自由在将两个图片放到div里显示每次只显示一张 ...
- 最贴近京东首页体验的嵌套滑动吸顶效果
吸顶效果是各家 App 或多或少都会用的一个交互,这种交互也常见于 PC.H5,可以说是一种通用性很强的前端交互体验,相比较来说京东首页的嵌套滑动吸顶效果是各个类似效果中体验比较好的一个,因为在嵌套布 ...
- android仿京东底部tab,GitHub - wenchaosong/BottomBar: 仿京东底部栏重复选择刷新动画,还有普通的样式和 MaterialDesign 样式...
轻量级的底部导航栏 在原项目PagerBottomTabStrip 基础上 增加了 getItem 方法,能设置对应 position 的 tab 属性 实现效果图 自定义扩展例子 仿京东重复刷新动画 ...
- android 辐射动画_Android仿微信雷达辐射搜索好友(逻辑清晰实现简单)
不知不觉这个春节也已经过完了,遗憾家里没网,没能及时给大家送上祝福,今天回到深圳,明天就要上班了,小伙伴们是不是和我一样呢?今天讲的是一个大家都见过的动画,雷达搜索好友嘛,原理也十分的简单,你看完我的 ...
最新文章
- 轻量级嵌入式数据库H2的愉快玩耍之旅
- 用了虚拟机Linux不能上网,虚拟机Linux不能上网怎么办
- 【Python】青少年蓝桥杯_每日一题_7.03_输出符合要求的字母
- 【万字长文详解】Python库collections,让你击败99%的Pythoner
- Python学习【day02】-str类型方法记录
- 单片机定时器精准定时_PIC单片机的定时器精准计时的计算
- php print r用法,php中echo(),print(),print_r()用法
- dj鲜生-37-order应用-模型类创建
- 使用Maven命令安装jar包到repo中
- Spark:通过start-slaves.sh脚本启动worker报错:Permission denied
- 中国结肠镜设备行业市场供需与战略研究报告
- 计算机网络之物理层、链路层、网络层
- 无纸化办公软件app 快用这款科学处理办公事宜的便签
- 深度解析京东个性化推荐系统演进史
- 关于Word插入图片闪退
- html 操作cookie,HtmlUnit 模拟浏览器以及Cookie使用示例
- javascript进阶面向对象ES6
- 3.Go语言中常量,变量, 及其命名规则以及代码风格
- 前端九年老司机的一天作息
- 社保证照片怎么做?一招教你get既专业又好看的证件照!
热门文章
- UDP \TCP详详详详解,你想要的全都有(呕心沥血)
- php header jpg,php header函数输入图片IE不显示问题
- python字典数据类型笔记_python笔记2-数据类型:元组、字典常用操作
- httpd svn 编译安装_linux下php7安装与Apache配置
- php core模块,module.php
- 力扣20.有效的括号
- 微信小程序|开发实战篇之request请求(单个、多个参数,json对象,header)
- 线程安全性的基础知识
- springmvc整理
- 互联网系统性能优化方向