Android 自定义可缩放图片的ScrollView

最新推荐文章于 2025-06-28 09:40:40 发布
原创 最新推荐文章于 2025-06-28 09:40:40 发布 · 521 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何实现Android中一个特殊效果：在ScrollView内，通过手指上下拉动实现图片的缩放，并在松手后有回弹效果。详细步骤包括获取图片尺寸、记录起点坐标、计算缩放参数及实现回弹动画。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

前言

  • 今天在某APP中看到了这个效果，感觉还不错，所以这就自己动手试了一下，不过还好，总算把这效果给弄出来了！
  • 俗话说得好，自己丰衣足食嘛！
  • 实现效果：手指上下拉动，可对图片进行缩放，松开手指有回弹效果！

实现过程：

  1. 获取图片宽高
  2. 记录起始Y坐标
  3. 计算图片缩放后的宽高参数
  4. 回弹动画效果

其它的基本上都是，处理bug写得条件分支

在这里插入图片描述

<?xml version="1.0" encoding="utf-8"?>
<com.mycompany.myapp.ZoomScrollView
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_height="match_parent"
   android:layout_width="match_parent"
   android:fillViewport="true">

   <LinearLayout
      android:layout_height="match_parent"
      android:layout_width="match_parent"
      android:elevation="1dp"
      android:gravity="center_horizontal"
      android:orientation="vertical">

      <ImageView
         android:layout_height="200dp"
         android:layout_width="match_parent"
         android:src="@drawable/image_1"
         android:scaleType="centerCrop"/>

      <TextView
         android:layout_height="66dp"
         android:layout_width="match_parent"
         android:text="第一项"
         android:background="#FFFFFFFF"
         android:layout_margin="10dp"
         android:elevation="2dp"
         android:gravity="center"
         android:textSize="18sp"/>

      <TextView
         android:layout_height="66dp"
         android:layout_width="match_parent"
         android:text="第二项"
         android:background="#FFFFFFFF"
         android:layout_margin="10dp"
         android:elevation="2dp"
         android:gravity="center"
         android:textSize="18sp"/>

      <TextView
         android:layout_height="66dp"
         android:layout_width="match_parent"
         android:text="第三项"
         android:background="#FFFFFFFF"
         android:layout_margin="10dp"
         android:elevation="2dp"
         android:gravity="center"
         android:textSize="18sp"/>

      <TextView
         android:layout_height="66dp"
         android:layout_width="match_parent"
         android:text="第四项"
         android:background="#FFFFFFFF"
         android:layout_margin="10dp"
         android:elevation="2dp"
         android:gravity="center"
         android:textSize="18sp"/>

      <TextView
         android:layout_height="66dp"
         android:layout_width="match_parent"
         android:text="第五项"
         android:background="#FFFFFFFF"
         android:layout_margin="10dp"
         android:elevation="2dp"
         android:gravity="center"
         android:textSize="18sp"/>

      <TextView
         android:layout_height="66dp"
         android:layout_width="match_parent"
         android:text="第六项"
         android:background="#FFFFFFFF"
         android:layout_margin="10dp"
         android:elevation="2dp"
         android:gravity="center"
         android:textSize="18sp"/>

      <TextView
         android:layout_height="66dp"
         android:layout_width="match_parent"
         android:text="第七项"
         android:background="#FFFFFFFF"
         android:layout_margin="10dp"
         android:elevation="2dp"
         android:gravity="center"
         android:textSize="18sp"/>
      
      <TextView
         android:layout_height="66dp"
         android:layout_width="match_parent"
         android:text="第八项"
         android:background="#FFFFFFFF"
         android:layout_margin="10dp"
         android:elevation="2dp"
         android:gravity="center"
         android:textSize="18sp"/>
      
      <TextView
         android:layout_height="66dp"
         android:layout_width="match_parent"
         android:text="第九项"
         android:background="#FFFFFFFF"
         android:layout_margin="10dp"
         android:elevation="2dp"
         android:gravity="center"
         android:textSize="18sp"/>
      
      <TextView
         android:layout_height="66dp"
         android:layout_width="match_parent"
         android:text="第十项"
         android:background="#FFFFFFFF"
         android:layout_margin="10dp"
         android:elevation="2dp"
         android:gravity="center"
         android:textSize="18sp"/>
      
   </LinearLayout>

</com.mycompany.myapp.ZoomScrollView>

public class ZoomScrollView extends ScrollView
{
   private View imageView;
   private ViewGroup.LayoutParams lp_move,lp_up;
   private int startY,offsetY;
   private int height,width;
   private boolean isFirst=true;
   private int MaxHeight=0,MaxWidth=0,MaxOffsetY=0;

   public ZoomScrollView(Context context)
   {
      super(context);
   }
   public ZoomScrollView(Context context, AttributeSet attrs)
   {
      super(context, attrs);
   }
   public ZoomScrollView(Context context, AttributeSet attrs, int defStyleAttr)
   {
      super(context, attrs, defStyleAttr);
   }

   @Override
   protected void onFinishInflate()
   {
      super.onFinishInflate();

      ViewGroup vg = (ViewGroup) getChildAt(0);
      imageView = vg.getChildAt(0);
   }

   @Override
   public boolean dispatchTouchEvent(MotionEvent ev)
   {
      switch (ev.getAction())
      {
         case MotionEvent.ACTION_DOWN:
            {
               startY = (int) ev.getY();
               MaxHeight = 0;
               MaxWidth = 0;
               MaxOffsetY = 0;

               if (getScrollY() == 0 && isFirst == true)
               {
                  height = imageView.getHeight();
                  width = imageView.getWidth();
                  isFirst = false;
               }
            }
            break;
         case MotionEvent.ACTION_MOVE:
            {
               offsetY = ((int) ev.getY()) - startY;

               lp_move = imageView.getLayoutParams();

               if (offsetY > 0 && getScrollY() == 0)
               {

                  lp_move.height = height + (int)(offsetY * 0.5);
                  lp_move.width = width + (int)(offsetY * 0.5);
                  imageView.setLayoutParams(lp_move);

                  MaxHeight = Math.max(imageView.getHeight(), MaxHeight);
                  MaxWidth = Math.max(imageView.getWidth(), MaxWidth);
                  MaxOffsetY = Math.max(offsetY, MaxOffsetY);
               }
               else if (imageView.getHeight() > height)
               {
                  scrollTo(0, 0);

                  lp_move.height = Math.max((MaxHeight - (MaxOffsetY - offsetY)), height);
                  lp_move.width = Math.max((MaxWidth - (MaxOffsetY - offsetY)), width);
                  imageView.setLayoutParams(lp_move);
               }
               else
               {
                  startY = (int) ev.getY();
                  MaxHeight = 0;
                  MaxWidth = 0;
                  MaxOffsetY = 0;
               }}
            break;
         case MotionEvent.ACTION_UP:
            {
               ValueAnimator anim=ValueAnimator.ofFloat(1.0f, 0.0f);
               anim.setDuration(400);
               anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener(){

                     @Override
                     public void onAnimationUpdate(ValueAnimator p1)
                     {
                        float current=p1.getAnimatedValue();
                        lp_up = imageView.getLayoutParams();
                        lp_up.height = height + (int)((imageView.getHeight() - height) * current);
                        lp_up.width = width + (int)((imageView.getWidth() - width) * current);
                        imageView.setLayoutParams(lp_up);
                     }
                  });
               anim.start();

            }
            break;

      }
      return super.dispatchTouchEvent(ev);

   }
}
android 自定义ScrollView实现背景图片伸缩（仿多米,PaPa个人页面特效也称为阻尼效果）
jj120522的专栏
05-21 1万+
首先还是按照惯例给大家看下示例.       用过多米音乐的都会知道， 这个UI可以上下滑动，作用嘛---无聊中可以划划解解闷，这被锤子公司老罗称呼为“情怀”，其实叫“情趣”更合适。嘿嘿.如今移动互联网发展这么迅速，市场上已不再是那初期随便敲个APP放上架就能拥有几十万用户的阶段了.最近苹果公司，为了怕android下载量赶超苹果商店，大势声称：(第 500 亿个下载应用的用户就可以获得
安卓吸顶+下拉放大_Android自定义scrollView实现顶部图片下拉放大
weixin_39704727的博客
12-20 311
本文实例为大家分享了scrollView实现顶部图片下拉放大的具体代码，供大家参考，具体内容如下之前的scrollView顶部图片下拉放大在之后的项目用到了几次，但没次都写在Activity中很麻烦，也不方便复用。这几天有空，所以重新使用自定义scrollView的方法实现这个效果。原理和之前的基本是一致的，所以也不多说了，直接上代码。package com.example.myapplicati...
Android自定义控件（二）——有弹性的ScrollView
简单随心的Android之旅
01-03 5613
此控件实现了自定义的ScrollView， 此ScrollView当手指滑动到ScrollView的顶部、底部时， 可以继续的向上、向下拉伸。当释放手指的时候，向上、下弹回。 效果如图所示： 主要代码： public class ElasticScrollView extends ScrollView { private View inner; private float y
Android杂谈（二）：缩放图片
最新发布
m0_56334538的博客
06-28 345
Android原生图像浏览器实现方案 本项目展示了使用纯Android API开发的图片浏览器，具备图片加载、缩放和滑动浏览功能。核心特点包括：完全基于原生API实现（ViewPager、BitmapFactory等），支持本地和网络图片加载，实现了手势缩放和平移操作。项目结构清晰，包含ZoomImageView（自定义缩放视图）、ImageLoader（图片加载器）和ImagePagerAdapter（滑动适配器）三大组件。通过此项目可深入掌握Android图像处理基础技术，包括Canvas绘图、Matr
Android PullZoomView：PullToZoomScrollViewEx（2）
Zhang Phil
12-07 4529
 Android PullZoomView：PullToZoomScrollViewEx（2） 在附录文章1中，介绍了Android PullZoomView在ListView中的实现：PullToZoomListViewEx，事实上，Android PullZoomView亦可在ScrollView实现，Android PullZoomView在ScrollView的实现是：PullTo
Android-PullZoomScrollView滑动缩放顶部视图
08-13
PullZoomScrollView 滑动缩放顶部视图
android scrollview内实现图片的手势缩放
agehua
10-31 1113
图片是一张长图，在scrollview内上下滑动图片的同时，增加了对图片的手势放大或缩小的操作。   之前将手势缩放的布局放在scrollview内总是会发生手势冲突，这个不会，可以找张图片试试。   主界面的activity：   package test; import com.agehua.drag.R; import android.app.Activity; ...
Android自定义ScrollView实现背景图片伸缩：代码及思路分享
Android自定义ScrollView的实现背景图片伸缩的代码及思路，以及多米音乐这种上下滑动的UI的作用，被锤子公司老罗称为"情怀"实则更应该称为"情味"。随着移动互联网的快速发展，市场上的竞争越来越激烈，APP的用户量也...
Android自定义ScrollView实现放大回弹效果实例代码
08-31
本文将详细解析如何在Android中自定义ScrollView以实现放大回弹效果。这种效果通常用于头部视图（header view），当用户下拉时，header view会放大，松手后会自动回弹到原始状态，增强用户操作的反馈感。 首先，...
Android自定义视图实现图片滑动放大及缩放功能
为了实现Android平台上图片的左右滚动功能，并在点击时放大以及支持缩放，我们需要掌握和理解以下几个关键知识点和技术点： 1. **HorizontalScrollView的使用和自定义：** - **HorizontalScrollView** 是Android...
实现图片预览与缩放的ScrollView技术
- 缩放图片时，关键是如何保持图片的宽高比，避免图像扭曲。在Web开发中，可以使用CSS的`transform: scale()`函数，iOS开发可以使用`CGAffineTransform`，Android开发则需要编写相应的矩阵变换代码。 5. **性能...
android自定义scrollview
11-11
自定义scrollview来实现滑动列表项。PS：使用时在xml中调用，只能有一个直接子组件
Android实现ScrollView顶部布局上滑缩小，下滑恢复
10-18
http://blog.youkuaiyun.com/yanjunhui2011/article/details/78274608 对应资源
Scrollview滑动，并且单个页面也实现放大缩小，滑回来可还原
09-26
Scrollview滑动，并且单个页面也实现放大缩小，滑动到下一个page时在划回来，可还原，额外，双击屏幕，也可以实现放大
Android自定义Scrollview
Kawa103的博客
12-07 1316
效果： 主要的几个知识点有 Scroller 、VelocityTracker 主要操作View里面的几个方法有  onMeasure、onTouchEvent 、computeScroll 、scrollTo() 、scrollBy()   Scroller 是一个专门用于处理滚动效果的工具类，直接调用ScrollTo（）或者ScrollBy（）的方式来移动的话是瞬间完成，用户体...
Android自定义ScrollView
weixin_39654467的博客
09-19 338
public class CustomScrollView extends ScrollView { private OnScrollChanged mOnScrollChanged; private int upHeight; public CustomScrollView(Context context, AttributeSet attrs) { ...
Android 自定义ScrollView - 头部可拉伸
notthin的博客
10-15 468
自定义ScrollView一、直接上代码二、使用二、注意事项 一、直接上代码 public class HeadZoomScrollView extends ScrollView { //头部View private View mZoomView; // View的宽度 private int mZoomViewWidth; // View的高度 private int mZoomViewHeight; //是否在滑动 private bo
Android 自定义最简单的ScrollView，附带拉动回弹
liaoyi的博客
03-17 2930
布局样式 <com.example.test.myapplication.customview.MyScrollView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content
Android 自定义ScrollView嵌套滚动兼容，监听滑动状态：顶部、底部、停止、滑动中
华至的博客
05-26 981
public class CustomScrollView extends ScrollView { private ScrollListener scrollListener; private boolean isScrolling = false; public CustomScrollView(Context context) { super(co
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值