前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Android仿QQ好友详情页下拉顶部图片缩放效果

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

作者头像
砸漏
发布2020-10-27 10:45:43
5770
发布2020-10-27 10:45:43
举报
文章被收录于专栏:恩蓝脚本

今天已经是这个星期连续加班的第四天了,趁着现在后台在处理逻辑问题,将前几天写的一个小例子整理下来。

效果图

效果分析

1 向下滑动,头部的图片随着手指滑动不断变大 2 向上滑动,不断的向上移动图片,直到图片不可见 3 当顶部图片不可见时,向上滑动,滑动ListView

实现思路

1 由于这个View分上下两部分,垂直排列,可以通过继承LinearLayout实现::自定义一个DragImageView,该View继承LinearLayout

代码语言:javascript
复制
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中设置内容视图的高度

代码语言:javascript
复制
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 super.onMeasure(widthMeasureSpec, heightMeasureSpec);
 LayoutParams params = (LayoutParams) getChildAt(1).getLayoutParams();
 // 头部可以全部隐藏,所以内容视图的高度即为该控件的高度
 params.height = getMeasuredHeight();
}

3 设置ImageView的ScaleType属性

代码语言:javascript
复制
@Override
protected void onFinishInflate() {
 super.onFinishInflate();
 imageView = (ImageView) getChildAt(0);
 // 随着手指滑动,图片不断放大(宽高都大于或者等于ImageView的大小),并居中显示:
 // 根据上边的分析,CENTER_CROP:可以使用均衡的缩放图像(保持图像原始比例),使图片的两个坐标(宽、高)都大于等于 相应的视图坐标(负的内边距),图像则位于视图的中央
 imageView.setScaleType(ScaleType.CENTER_CROP);
 listView = (ListView) getChildAt(1);
}

4 事件拦截

代码语言:javascript
复制
@Override
public 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处理

代码语言:javascript
复制
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;
  }
 }

5 onTouchEvent的ACTION_UP处理

代码语言:javascript
复制
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的使用

以上就是本文的全部内容,希望对大家的学习有所帮助。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-09-11 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档