热门标签 | HotTags
当前位置:  开发笔记 > Android > 正文

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

这篇文章主要为大家详细介绍了Android仿QQ好友详情页下拉顶部图片缩放效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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中设置内容视图的高度

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

3 设置ImageView的ScaleType属性

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

4 事件拦截

@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处理

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开发中的关键组件——View和ViewGroup类,以及Android平台上的两种主要事件处理方式。同时,文章还探讨了如何利用Android提供的标准布局文件来优化UI设计。 ... [详细]
  • Android 自定义指南针视图实现
    本文介绍了如何在Android应用中自定义绘制指南针视图,包括方位角的计算、不同方向的颜色区分以及视图随手势移动的功能实现。 ... [详细]
  • ECharts 基础使用指南
    本文档提供了一个简单的 ECharts 使用示例,帮助初学者快速了解如何在网页中集成和使用 ECharts 创建图表。更多详细信息请参阅官方文档:https://www.echartsjs.com/zh/tutorial.html#5%20分钟上手%20ECharts ... [详细]
  • 本文详细探讨了函数与对象方法的主要区别,包括它们的定义方式、调用规则以及在面向对象编程语言中的应用特点。 ... [详细]
  • 深入解析 Jetpack LiveData 的工作原理
    本文详细介绍了 Jetpack 库中的 LiveData 组件,这是一种能够感知生命周期并可被观察的数据持有类。LiveData 支持存储任何类型的数据,并通常与 ViewModel 结合使用,以确保数据在配置变更时保持一致。 ... [详细]
  • 本文介绍了ADB(Android Debug Bridge)的基本概念、安装方法、环境配置、连接真机步骤以及常用命令和高级技巧。ADB是一个强大的工具,适用于Android设备的开发和调试。 ... [详细]
  • NFC OMA 接口访问优化
    本文探讨了NFC设备中OMA接口的访问方式,特别是针对IC制造商提供的NFC swp-sim访问与NFC服务提供商对eSe(嵌入式安全元件)访问的不同处理方法。文中提出了几种解决方案以解决由此产生的双SmartcardService运行问题。 ... [详细]
  • 目录介绍01.CoordinatorLayout滑动抖动问题描述02.滑动抖动问题分析03.自定义AppBarLayout.Behavior说明04.CoordinatorLayo ... [详细]
  • 深入探讨PHP中的输出缓冲技术(Output Buffering)
    本文深入解析了PHP中输出缓冲(Output Buffering)的原理及其在Web开发中的应用,特别是如何通过输出缓冲技术有效管理HTTP头部信息,提高代码的灵活性与健壮性。 ... [详细]
  • 深入理解Java NIO:基础概念与原理
    本文介绍了Java NIO(New Input/Output)的基本概念,包括同步与异步、阻塞与非阻塞等核心理念,以及NIO相对于传统IO的优势和应用场景。通过详细解析这些概念,帮助读者更好地理解和掌握NIO的使用。 ... [详细]
  • 本问题涉及对一个非负整数数组执行加一操作。数组以最高位数字在前的方式存储,每个数组元素仅包含一位数字。假设该整数没有前导零,除非该整数为0。 ... [详细]
  • 本文详细介绍了 Freemarker 模板引擎中的 include 指令,以及如何利用该指令从其他文件中引入内容,以增强页面的模块化和可维护性。 ... [详细]
  • 本文提供了关于如何在 Java 中使用 `com.amazonaws.services.kinesis.model.StreamDescription.getRetentionPeriodHours()` 方法的详细说明,并附带了多个实际代码示例。 ... [详细]
  • 本文介绍了两种有效的方法来检查Android应用是否拥有特定权限,如媒体读写权限(media_rw)。通过这些方法,开发者和安全人员可以更好地了解应用的行为,确保其不会滥用权限。 ... [详细]
  • 深入理解Kafka架构
    本文将详细介绍Kafka的内部工作机制,包括其工作流程、文件存储机制、生产者与消费者的具体实现,以及如何通过高效读写技术和Zookeeper支持来确保系统的高性能和稳定性。 ... [详细]
author-avatar
cc_vb8
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有