Android实现有视差效果的ListView

 更新时间:2016年09月30日 09:17:46   投稿:daisy  
这篇文章给大家详解介绍了在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 获取本机其他app的版本信息的示例代码

    android 获取本机其他app的版本信息的示例代码

    本篇文章主要介绍了android 获取本机其他app的版本信息的示例代码,具有一定的参考价值,有兴趣的可以了解一下
    2017-09-09
  • Android中Volley框架下保持会话方法

    Android中Volley框架下保持会话方法

    这个是基于session的一个网络会话,手机app给服务器发送登陆请求的时候,服务器返回的网络response(networkRespone)的头(head)里面存放着你想要的sessionid。这篇文章主要介绍了Android中Volley框架下保持会话方法的相关资料,需要的朋友可以参考下
    2016-11-11
  • Android编程获取包名,版本信息及VersionName名称的方法

    Android编程获取包名,版本信息及VersionName名称的方法

    这篇文章主要介绍了Android编程获取包名,版本信息及VersionName名称的方法,涉及Android包及版本相关操作函数使用技巧,需要的朋友可以参考下
    2016-10-10
  • 详解android在mob平台实现qq登陆和分享

    详解android在mob平台实现qq登陆和分享

    这篇文章主要介绍了详解android在mob平台实现qq登陆和分享,对接入第三方平台SDK感兴趣的同学们,可以参考下
    2021-04-04
  • android studio实现简单的计算器(无bug)

    android studio实现简单的计算器(无bug)

    这篇文章主要为大家详细介绍了android studio实现简单计算器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08
  • Android ButtonOnClick事件的写法总结

    Android ButtonOnClick事件的写法总结

    这篇文章主要介绍了Android ButtonOnClick事件的写法总结的相关资料,这里把Android ButtonOnClick的写法做个总结,希望能帮助到大家,需要的朋友可以参考下
    2017-07-07
  • Android Tiny集成图片压缩框架的使用

    Android Tiny集成图片压缩框架的使用

    本篇文章主要介绍了Android Tiny集成图片压缩框架的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • OpenGL Shader实例分析(4)闪光效果

    OpenGL Shader实例分析(4)闪光效果

    这篇文章主要为大家详细介绍了OpenGL Shader实例分析第4篇,实现闪光效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-02-02
  • Android线程中Handle的使用讲解

    Android线程中Handle的使用讲解

    今天小编就为大家分享一篇关于Android线程中Handle的使用讲解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-02-02
  • Android涨姿势知识点之你没用过的BadgeDrawable

    Android涨姿势知识点之你没用过的BadgeDrawable

    现在Android中有许多的应用仿苹果的在应用图标上显示小红点,下面这篇文章主要给大家介绍了关于Android涨姿势知识点之你没用过的BadgeDrawable的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-09-09

最新评论