Android实现有视差效果的ListView
视差效果是什么?
所谓的视差效果在Web设计和移动应用中都非常常见,我们在一些主要的平台都可以发现它的身影,从Windows Phone到iOS乃至Android。按照维基百科的说法,视差滚动是计算机图形学中的一种特殊的滚动技术,在此相机移动背景图像比前景图像慢,从而引起了视觉深度的假象。
那么到底什么是视差效果呢?一起来看效果图就知道了:
我们可以看到 ListView
的 HeaderView
会跟随 ListView
的滑动而变大,HeaderView
里的图片会有缩放效果。这些可以使用属性动画来实现。接下来我们就来动手吧!
首先自定义几个属性,在之后可以用到:
<?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="ZoomListView"> <!-- headerView的高度 --> <attr name="header_height" format="dimension|reference"></attr> <!-- headerView的最大高度 --> <attr name="header_max_height" format="dimension|reference"></attr> <!-- headerView里面的图片最大的伸缩量 --> <attr name="header_max_scale" format="float"></attr> </declare-styleable> </resources>
之后创建 ZoomListView
类,继承自 ListView
:
public class ZoomListView extends ListView { // 最大的伸缩量 private final float defaultHeaderMaxScale = 1.2f; // 头部最大的高度 private float headerMaxHeight; // 头部初始高度 private float headerHeight; // 头部默认初始高度 private float defaultHeaderHeight; // 头部默认最大的高度 private float defaultHeaderMaxHeight; private ImageView headerView; private ViewGroup.LayoutParams layoutParams; private LinearLayout linearLayout; // 最大的缩放值 private float headerMaxScale; public ZoomListView(Context context) { this(context, null); } public ZoomListView(Context context, AttributeSet attrs) { this(context, attrs, 0); } public ZoomListView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); defaultHeaderHeight = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 160, context.getResources().getDisplayMetrics()); defaultHeaderMaxHeight = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 240, context.getResources().getDisplayMetrics()); TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.ZoomListView); headerHeight = a.getDimension(R.styleable.ZoomListView_header_height, defaultHeaderHeight); headerMaxHeight = a.getDimension(R.styleable.ZoomListView_header_max_height, defaultHeaderMaxHeight); headerMaxScale = a.getFloat(R.styleable.ZoomListView_header_max_scale, defaultHeaderMaxScale); a.recycle(); initView(); } ... }
到这里都是按部就班式的,设置好自定义属性的初始值,之后调用 initView()
,那就来看看 initView()
方法:
private void initView() { headerView = new ImageView(getContext()); headerView.setScaleType(ImageView.ScaleType.CENTER_CROP); linearLayout = new LinearLayout(getContext()); linearLayout.addView(headerView); layoutParams = headerView.getLayoutParams(); if (layoutParams == null) { layoutParams = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, (int) headerHeight); } else { layoutParams.width = ViewGroup.LayoutParams.MATCH_PARENT; layoutParams.height = (int) headerHeight; } headerView.setLayoutParams(layoutParams); addHeaderView(linearLayout); } public void setDrawableId(int id) { headerView.setImageResource(id); }
可以看出在 initView()
里我们创建了 headerView
,并添加到了ListView
的头部。而 setDrawableId(int id)
就是给 headerView
设置相关图片的。
下面就是视差效果的主要实现代码了:
@Override protected boolean overScrollBy(int deltaX, int deltaY, int scrollX, int scrollY, int scrollRangeX, int scrollRangeY, int maxOverScrollX, int maxOverScrollY, boolean isTouchEvent) { if (deltaY < 0 && isTouchEvent) { if (headerView.getHeight() < headerMaxHeight) { int newHeight = headerView.getHeight() + Math.abs(deltaY / 3); headerView.getLayoutParams().height = newHeight; headerView.requestLayout(); float temp = 1 + (headerMaxScale - 1f) * (headerView.getHeight() - headerHeight) / (headerMaxHeight - headerHeight); headerView.animate().scaleX(temp) .scaleY(temp).setDuration(0).start(); } } return super.overScrollBy(deltaX, deltaY, scrollX, scrollY, scrollRangeX, scrollRangeY, maxOverScrollX, maxOverScrollY, isTouchEvent); }
我们重写了 overScrollBy()
方法,当 deltaY 小于0时(即 ListView
已经到顶端,但是用户手势还是向下拉),去动态地设置 headerView
的高度以及 headerView
的 scale
值。这样就可以产生 headerView
变高以及图片放大的效果了。
接下来要考虑的问题就是当用户松开手指时,要恢复回原来的样子。所以我们应该在 onTouchEvent(MotionEvent ev)
里去实现相关操作:
@Override public boolean onTouchEvent(MotionEvent ev) { switch (ev.getAction()) { case MotionEvent.ACTION_UP: startAnim(); break; } return super.onTouchEvent(ev); } // 开始执行动画 private void startAnim() { ValueAnimator animator = ValueAnimator.ofFloat(headerView.getHeight(), headerHeight); animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { float fraction = (float) animation.getAnimatedValue(); headerView.getLayoutParams().height = (int) fraction; headerView.requestLayout(); } }); animator.setDuration(500); animator.setInterpolator(new LinearInterpolator()); ValueAnimator animator2 = ValueAnimator.ofFloat(headerView.getScaleX(), 1f); animator2.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { float fraction = (float) animation.getAnimatedValue(); headerView.setScaleX(fraction); headerView.setScaleY(fraction); } }); animator2.setDuration(500); animator2.setInterpolator(new LinearInterpolator()); animator.start(); animator2.start(); }
上面的代码简单点来说,就是在 ACTION_UP 时,去开始两个属性动画,一个属性动画是将 headerView
的高度恢复成原来的值,另一个属性动画就是把 headerView
的 scale 重新恢复为1f。相信大家都可以看懂的。
总结
以上就是这篇文章的全部内容了,希望这篇文章的内容对各位Android开发者们能有所帮助,如果有疑问大家可以留言交流。
- Android实现listview滑动时渐隐渐现顶部栏实例代码
- Android ListView自动显示隐藏布局的实现方法
- Android实现上拉加载更多ListView(PulmListView)
- Android UI控件ExpandableListView基本用法详解
- Android中ListView绑定CheckBox实现全选增加和删除功能(DEMO)
- Android之ListView分页加载数据功能实现代码
- Android实现Listview异步加载网络图片并动态更新的方法
- Android ListView的OnItemClickListener详解
- Android实现带有边框的ListView和item的方法
- Android ListView下拉刷新上拉自动加载更多DEMO示例
- Android ListView position详解及实例代码
相关文章
详解Android应用中preference首选项的编写方法
这篇文章主要介绍了Android应用中preference首选项的编写方法,或许Apple将其翻译为'偏好设置'更直观些,即用户对应用的一些个性化调整菜单,需要的朋友可以参考下2016-04-04JetpackCompose Navigation导航实现流程
Navigation是Jetpack用于Android导航的组件,作用是处理页面跳转,以及页面跳转过程中的交互。使用Navigation,你就需要为每个页面设定一条唯一路径,它是一个String常量,形式是DeepLink的样子,从一个页面跳转到另一个页面,它通过输入目的地的路径进行转跳2023-01-01Android用PopupWindow实现新浪微博的分组信息实例
PopupWindow可以实现浮层效果,而且可以自定义显示位置,本篇文章主要介绍Android用PopupWindow实现新浪微博的分组信息,有需要的可以了解一下。2016-11-11[Android] 通过GridView仿微信动态添加本地图片示例代码
本篇文章主要介绍了[Android] 通过GridView仿微信动态添加本地图片示例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。2017-01-01
最新评论