Android仿QQ好友详情页下拉顶部图片缩放效果

概述本文实例为大家分享了Android下拉顶部图片缩放效果展示的具体代码，供大家参考，具体内容如下

本文实例为大家分享了AndroID下拉顶部图片缩放效果展示的具体代码，供大家参考，具体内容如下

效果图

效果分析

1 向下滑动，头部的图片随着手指滑动不断变大

2 向上滑动，不断的向上移动图片，直到图片不可见

3 当顶部图片不可见时，向上滑动，滑动ListVIEw

实现思路

1 由于这个VIEw分上下两部分，垂直排列，可以通过继承linearLayout实现：：自定义一个DragImageVIEw，该VIEw继承linearLayout

public DragImageVIEw(Context context,AttributeSet attrs) {  super(context,attrs);  // 默认该VIEw垂直排列  setorIEntation(linearLayout.VERTICAL);  // 用于配合处理该VIEw的惯性滑动  mScroller = new OverScroller(context);  mtouchSlop = VIEwConfiguration.get(context).getScaledtouchSlop();  mMaximumVeLocity = VIEwConfiguration.get(context)        .getScaledMaximumFlingVeLocity();  mMinimumVeLocity = VIEwConfiguration.get(context)        .getScaledMinimumFlingVeLocity();  }

2 onMeasure中设置内容视图的高度

@OverrIDeprotected voID onMeasure(int wIDthMeasureSpec,int heightmeasureSpec) {  super.onMeasure(wIDthMeasureSpec,heightmeasureSpec);  LayoutParams params = (LayoutParams) getChildAt(1).getLayoutParams();  // 头部可以全部隐藏，所以内容视图的高度即为该控件的高度  params.height = getMeasuredHeight();}

3 设置ImageVIEw的ScaleType属性

@OverrIDeprotected voID onFinishInflate() {  super.onFinishInflate();  imageVIEw = (ImageVIEw) getChildAt(0);  // 随着手指滑动，图片不断放大（宽高都大于或者等于ImageVIEw的大小），并居中显示：  // 根据上边的分析，CENTER_CROP：可以使用均衡的缩放图像（保持图像原始比例），使图片的两个坐标（宽、高）都大于等于 相应的视图坐标（负的内边距）,图像则位于视图的中央  imageVIEw.setScaleType(ScaleType.CENTER_CROP);  ListVIEw = (ListVIEw) getChildAt(1);}

4 事件拦截

@OverrIDepublic boolean onIntercepttouchEvent(MotionEvent ev) {  if (ev.getAction() == MotionEvent.ACTION_DOWN) {    downX = (int) ev.getX();    downY = (int) ev.getY();  }  if (ev.getAction() == MotionEvent.ACTION_MOVE) {    int currentX = (int) ev.getX();    int currentY = (int) ev.getY();    // 确保是垂直滑动    if (Math.abs(currentY - downY) > Math.abs(currentX - downX)) {      VIEw childVIEw = ListVIEw.getChildAt(ListVIEw          .getFirstVisibleposition());      // 有两种情况需要拦截：      // 1 图片没有完全隐藏      // 2 图片完全隐藏，但是向下滑动，并且ListVIEw滑动到顶部      if (getScrollY() != imageHeight          || (getScrollY() == imageHeight && currentY - downY > 0              && childVIEw != null && childVIEw.gettop() == 0)) {        initVeLocityTrackerIfNotExists();        mVeLocityTracker.addMovement(ev);        return true;      }    }  }  if (ev.getAction() == MotionEvent.ACTION_UP) {    recycleVeLocityTracker();  }  return super.onIntercepttouchEvent(ev);}

5 ontouchEvent的ACTION_MOVE处理

if (ev.getAction() == MotionEvent.ACTION_MOVE) {    int currentX = (int) ev.getX();    int currentY = (int) ev.getY();    int deltyX = currentX - downX;    int deltyY = currentY - downY;    if (Math.abs(deltyY) > Math.abs(deltyX)) {      if (deltyY > 0) {        if (getScrollY() > 0) {          if (getScrollY() - deltyY < 0) {            scrollBy(0,-getScrollY());            return true;          }          // 当图片没有完全显示，并且向下滑动时，继续整个vIEw使图片可见          scrollBy(0,-deltyY);        } else {        // 当图片完全显示，并且向下滑动时，则不断的放大图片（通过改变ImageVIEw）的高度          LayoutParams layoutParams = (LayoutParams) getChildAt(0)              .getLayoutParams();          layoutParams.height = layoutParams.height + deltyY / 2;          getChildAt(0).setLayoutParams(layoutParams);        }      } else {      // 当图片还处于放大状态，并且向上滑动时，继续不断的缩小图片的高度，使图片缩小        if (getChildAt(1).gettop() > imageHeight) {          LayoutParams layoutParams = (LayoutParams) getChildAt(0)              .getLayoutParams();          layoutParams.height = layoutParams.height + deltyY / 2;          getChildAt(0).setLayoutParams(layoutParams);        } else {        // 当图片处于正常状态，并且向上滑动时，移动整个VIEw，缩小图片的可见范围          if (getScrollY() - deltyY > imageHeight) {            scrollBy(0,imageHeight - getScrollY());            return true;          }          scrollBy(0,-deltyY);        }      }      downY = currentY;      downX = currentX;      return true;    }  }

6 ontouchEvent的ACTION_UP处理

if (ev.getAction() == MotionEvent.ACTION_UP) {  // 当图片处于放大状态时松手，使图片缓慢的缩回到原来的状态  if (getChildAt(1).gettop() > imageHeight) {    isAnimating = true;    ValueAnimator valueAnimator = ValueAnimator.ofInt(getChildAt(1)        .gettop(),imageHeight);    valueAnimator.setDuration(300);    valueAnimator.addUpdateListener(new AnimatorUpdateListener() {      @OverrIDe      public voID onAnimationUpdate(ValueAnimator animation) {        int value = (Integer) animation.getAnimatedValue();        LayoutParams layoutParams = (LayoutParams) getChildAt(0)            .getLayoutParams();        layoutParams.height = value;        getChildAt(0).setLayoutParams(layoutParams);      }    });    valueAnimator.addListener(new AnimatorListenerAdapter() {      @OverrIDe      public voID onAnimationEnd(Animator animation) {        super.onAnimationEnd(animation);        isAnimating = false;      }    });    valueAnimator.start();  }  // 当现在图片处于正常状态，并且图片没有完全隐藏，并且松手时滑动的速度大于可惯性滑动的最小值，让VIEw产生惯性滑动效果  if (getChildAt(1).gettop() == imageHeight      && getScrollY() != imageHeight) {    mVeLocityTracker.computeCurrentVeLocity(1000,mMaximumVeLocity);    int veLocityY = (int) mVeLocityTracker.getYVeLocity();    if (Math.abs(veLocityY) > mMinimumVeLocity) {      fling(-veLocityY);    }    recycleVeLocityTracker();  }

总结

这里主要有两个学习的点

1 图片缩放的处理，事件的拦截

2 VIEw的惯性滑动：主要是结合OverScroller的使用

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程小技巧。

总结

以上是内存溢出为你收集整理的Android仿QQ好友详情页下拉顶部图片缩放效果全部内容，希望文章能够帮你解决Android仿QQ好友详情页下拉顶部图片缩放效果所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。