自定义控件之重写ScrollView实现图片下拉放大

最新推荐文章于 2017-10-22 12:15:59 发布
最新推荐文章于 2017-10-22 12:15:59 发布
阅读量985 收藏 4
点赞数
分类专栏： 自定义控件
前言

因为公司项目要实现一个效果，在ScrollView没有向下滚动时，下拉（未重写前下拉是没有任何效果的）放大顶部的图片，当时去网上找了，记得以前见过很多这样的控件的，现在却找半天也很难找到一个，好不容易找到了2个，发现效果都和需求上面的效果有偏差，最后没有办法只能是自己写了，花费了半天时间研究出来了，同时为了记录实现思路，所以就有了此文章

效果

效果图

实现思路

拦截ScrollView的触摸滑动事件（ACTION_MOVE）,记录下当前事件y轴坐标，判断当前ScrollView的Y轴滚动进度（getScrollY）是否等于0，等于0就与上次事件记录的位置进行对比，如果为正数就放大（X轴是从左往右，Y轴是从上往下，所以下拉时本次事件的Y轴会大于上次事件的Y轴），每次事件都通过设置ImageView的高度来放大图片控件（本来想用属性动画的，但是因为每个事件放大的比例非常小，所以最后就没使用，直接通过修改属性来实现），同时记录从开始到现在事件位置一共偏移了多少，当偏移量大于最大值的，就停止放大并将偏移量设置为最大值，当偏移量小于0时，则将偏移量设置为0，同时不再继续拦截事件。注意被放大的图片需要设置scaleType为centerCrop，这样当图片高度发生变化时，图片内容才会跟着大，当然其他几种模式有些模式也能跟着放大，但是具体可以自己去测试，我就不去测试了，毕竟我已经达到我要的效果了

好了，废话少说，先贴代码，再对代码进行说明

代码
Java 
package wang.raye.library;

import android.annotation.TargetApi;
import android.content.Context;
import android.content.res.TypedArray;
import android.os.Build;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.ScrollView;


/**
 * 重写让ScrollView有滚动监听(23以前是没有滚动监听的)
 * 拦截touch事件，让其支持下拉放大图片
 * Created by Raye on 2016/6/11.
 */
public class ZoomScrollView extends ScrollView {

    private View zoomView;
    /** 记录上次事件的Y轴*/
    private float mLastMotionY;
    /** 记录一个滚动了多少距离，通过这个来设置缩放*/
    private int allScroll = -1;
    /** 控件原本的高度*/
    private int height = 0;
    /** 被放大的控件id*/
    private int zoomId;
    /** 最大放大多少像素*/
    private int maxZoom;
    /** 滚动监听*/
    private ScrollViewListener scrollViewListener = null;
    private Handler handler = new Handler(){
        @Override
        public void handleMessage(Message msg) {
            allScroll -= 25;
            if(allScroll < 0){
                allScroll = 0;
            }
            LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) zoomView.getLayoutParams();
            lp.height = (int) (height + allScroll/2);
            zoomView.setLayoutParams(lp);
            if(allScroll != 0){
                handler.sendEmptyMessageDelayed(1,10);
            }else{
                allScroll = -1;
            }
        }
    };
    public ZoomScrollView(Context context) {
        super(context);
    }

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

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

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    public ZoomScrollView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        init(attrs);
    }

    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        zoomView = findViewById(zoomId);
    }

    private void init(AttributeSet attrs){
        TypedArray t = getContext().obtainStyledAttributes(attrs, R.styleable.ObservableScrollView);
        zoomId = t.getResourceId(R.styleable.ObservableScrollView_zoomId,-1);
        maxZoom = t.getDimensionPixelOffset(R.styleable.ObservableScrollView_maxZoom,0);
    }

    public void setScrollViewListener(ScrollViewListener scrollViewListener) {
        this.scrollViewListener = scrollViewListener;
    }


    @Override
    public boolean dispatchTouchEvent(MotionEvent event) {
        if(zoomView == null || maxZoom == 0){
            return super.dispatchTouchEvent(event);
        }

        final int action = event.getAction();

        if (action == MotionEvent.ACTION_CANCEL || action == MotionEvent.ACTION_UP) {
            if(allScroll != -1){
                handler.sendEmptyMessageDelayed(1,10);
            }
            return super.dispatchTouchEvent(event);
        }

        switch (action) {
            case MotionEvent.ACTION_MOVE: {
                final float y = event.getY();
                final float diff, absDiff;
                diff = y - mLastMotionY;
                mLastMotionY = y;
                absDiff = Math.abs(diff);
                if(allScroll >= 0 && absDiff > 1){
                    allScroll += diff;

                    if(allScroll < 0){
                        allScroll = 0;
                    }else if(allScroll > maxZoom){
                        allScroll = maxZoom;
                    }
                    LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) zoomView.getLayoutParams();
                    lp.height = (int) (height + allScroll/2);
                    zoomView.setLayoutParams(lp);
                    if(allScroll == 0){
                        allScroll = -1;
                    }
                    return false;
                }
                if (isReadyForPullStart()) {
                    if (absDiff > 0 ) {
                        if (diff >= 1f && isReadyForPullStart()) {
                            mLastMotionY = y;
                            allScroll = 0;
                            height = zoomView.getHeight();
                            return true;
                        }
                    }
                }
                break;
            }


        }

        return super.dispatchTouchEvent(event);
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        if(allScroll != -1){
            Log.i("ScrollView","onTouchEvent");
            return false;
        }
        return super.onTouchEvent(ev);
    }



    /**
     * 返回是否可以开始放大
     * @return
     */
    protected boolean isReadyForPullStart() {
        return getScrollY() == 0;
    }


    @Override
    protected void onScrollChanged(int x, int y, int oldx, int oldy) {
        super.onScrollChanged(x, y, oldx, oldy);
        if (scrollViewListener != null) {
            scrollViewListener.onScrollChanged(this, x, y, oldx, oldy);
        }
    }
    public interface ScrollViewListener {

        void onScrollChanged(ZoomScrollView scrollView, int x, int y, int oldx, int oldy);

    }
}
重要点，从上往下
Java 
private Handler handler = new Handler(){
        @Override
        public void handleMessage(Message msg) {
            allScroll -= 25;
            if(allScroll < 0){
                allScroll = 0;
            }
            LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) zoomView.getLayoutParams();
            lp.height = (int) (height + allScroll/2);
            zoomView.setLayoutParams(lp);
            if(allScroll != 0){
                handler.sendEmptyMessageDelayed(1,10);
            }else{
                allScroll = -1;
            }
        }
    };

这里是当ACTION_UP事件发生时，如果图片还在放大状态，就模拟动画效果，吧图片缩放回去，当然是可以用属性动画的，只是我之前没用属性动画，所以这里也直接用这个了

Java 
@Override
protected void onFinishInflate() {
    super.onFinishInflate();
    zoomView = findViewById(zoomId);
}

这里是当控件从xml中初始化完成的生命周期方法，在这里我们找到被放大的图片控件

Java 
private void init(AttributeSet attrs){
        TypedArray t = getContext().obtainStyledAttributes(attrs, R.styleable.ObservableScrollView);
        zoomId = t.getResourceId(R.styleable.ObservableScrollView_zoomId,-1);
        maxZoom = t.getDimensionPixelOffset(R.styleable.ObservableScrollView_maxZoom,0);
    }

这段代码相信很容易看懂，就是获取2个自定义属性，一个是被放大的图片控件id，一个是最大的放大像素

最主要的地方，事件拦截
Java 
@Override
public boolean dispatchTouchEvent(MotionEvent event) {
    if(zoomView == null || maxZoom == 0){
        return super.dispatchTouchEvent(event);
    }

    final int action = event.getAction();

    if (action == MotionEvent.ACTION_CANCEL || action == MotionEvent.ACTION_UP) {
        if(allScroll != -1){
            handler.sendEmptyMessageDelayed(1,10);
        }
        return super.dispatchTouchEvent(event);
    }

    switch (action) {
        case MotionEvent.ACTION_MOVE: {
            final float y = event.getY();
            final float diff, absDiff;
            diff = y - mLastMotionY;
            mLastMotionY = y;
            absDiff = Math.abs(diff);
            if(allScroll >= 0 && absDiff > 1){
                allScroll += diff;

                if(allScroll < 0){
                    allScroll = 0;
                }else if(allScroll > maxZoom){
                    allScroll = maxZoom;
                }
                LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) zoomView.getLayoutParams();
                lp.height = (int) (height + allScroll/2);
                zoomView.setLayoutParams(lp);
                if(allScroll == 0){
                    allScroll = -1;
                }
                return false;
            }
            if (isReadyForPullStart()) {
                if (absDiff > 0 ) {
                    if (diff >= 1f && isReadyForPullStart()) {
                        mLastMotionY = y;
                        allScroll = 0;
                        height = zoomView.getHeight();
                        return true;
                    }
                }
            }
            break;
        }


    }

    return super.dispatchTouchEvent(event);
}
详细说明
Java 
if(zoomView == null || maxZoom == 0){
       return super.dispatchTouchEvent(event);
}

当控件为空和最大放大像素为0 的时候，不进行事件拦截

Java 
if (action == MotionEvent.ACTION_CANCEL || action == MotionEvent.ACTION_UP) {
    if(allScroll != -1){
        handler.sendEmptyMessageDelayed(1,10);
    }
    return super.dispatchTouchEvent(event);
}

当事件取消和手指松开时，判断当前偏移量（allScroll ）是否回到了最初状态-1，如果没有说明图片没有缩放，要缩放回去

Java 
case MotionEvent.ACTION_MOVE: {
    final float y = event.getY();
    final float diff, oppositeDiff, absDiff;
    diff = y - mLastMotionY;
    mLastMotionY = y;
    absDiff = Math.abs(diff);
    if( allScroll >= 0 && absDiff > 1){
        allScroll += diff;

        if(allScroll < 0){
            allScroll = 0;
        }else if(allScroll > maxZoom){
            allScroll = maxZoom;
        }
        LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) zoomView.getLayoutParams();
        lp.height = (int) (height + allScroll/2);
        zoomView.setLayoutParams(lp);
        if(allScroll == 0){
            allScroll = -1;
        }
        return false;
    }
    if (isReadyForPullStart()) {
        if (absDiff > 0 ) {
            if (diff >= 1f && isReadyForPullStart()) {
                mLastMotionY = y;
                allScroll = 0;
                height = zoomView.getHeight();
                return true;
            }
        }
    }
    break;
}

拦截移动事件，每次记录下Y轴坐标，当滚动为0的时候，就计算与上次坐标的偏移量，大于0就开始放大，每次放大总偏移值的二分之一，因为每次放大总偏移值的效果不大好看，同时判断总偏移值是否大于最大偏移值，大于就设置总偏移值为最大值，相当于停止放大。如果小于0，就把总偏移值设置为0，并且重置偏移值的为-1，-1的时候，就不会拦截事件

Java 
@Override
public boolean onTouchEvent(MotionEvent ev) {
    if(allScroll != -1){
        Log.i("ScrollView","onTouchEvent");
        return false;
    }
    return super.onTouchEvent(ev);
}

重写onTouchEvent，当偏移值不是-1的时候，说明图片在进行放大或缩放，这时候不能让ScrollView滚动，所以需要把onTouchEvent拦截掉

Java 
protected boolean isReadyForPullStart() {
    return getScrollY() == 0;
}

获取当前ScrollView的滚动位置，是0的时候才可以开始放大图片

最后说两句

控件中还有个监听，那个不用管，那个是为了获取滚动位置来设置标题栏透明度的，跟本文内容无关，所以就不详细说明了。当然这个自定义控件只是为了实现我项目中需求的效果，很简陋，实现方法也很简单，所以欢迎高手前来指点。需要效果图demo的请点击demo github地址

原文：http://raye.wang/2016/06/13/zi-ding-yi-kong-jian-zhi-zhong-xie-scrollviewshi-xian/

zhanglihow
关注
专栏目录
下拉头部放大自定义ScrollView，弹性回复原型
12-25
自定义下拉ScrollView头部变大，动画缩回原型的
简单的重写ScrollView
lingluo512的专栏
04-16 396
import android.content.Context; import android.util.AttributeSet; import android.util.DisplayMetrics; import android.widget.ScrollView; public class ReboundScrollView extends ScrollV
自定义LinearLayout，实现上拉下拉刷新，支持ListView,GridView,ScrollView
zhou699的专栏
08-06 3760
文章出处：http://gundumw100.iteye.com/blog/1764763 网上很多这样的效果都是继承某个具体的AdapterView或ScrollView，这样很不通用，如果继承自一个ViewGroup（比如LinearLayout），那么任何放在其中的子view都有上拉下拉刷新，那不就完美了？ 不废话，上代码： import android.content.Conte
自定义控件（ScrollView的重写）
_檬小呆的博客
02-24 3431
版权声明：欢迎转载，转载请注明出处http://blog.csdn.net/qian_xiao_lj 实现两个ScrollView的同步显示。因为Android控件中没有此种功能，因此需要重写ScrollView。 思路介绍 　　我们首先想到使用ScrollView的类似与setOnScrollChangedListener的方法来实现，当一个ScrollView滚动
Android自定义ScrollView实现放大回弹效果
08-30
Android 自定义 ScrollView 实现放大回弹效果 Android 中的 ScrollView 是一个常用的控件，能够在屏幕内容多时下上滑动以适配加载的内容。但是，ScrollView 滑动时的效果感觉太死板了，这个时候我们如果给它添加一...
自定义ScrollView 实现图片放大,上滑修改标题栏状态
01-15
本教程将重点讲解如何通过自定义ScrollView来实现图片的拉伸放大效果，并在用户上滑时动态修改标题栏的状态。这一功能常用于诸如新闻详情页或者电商商品详情页等场景，能够提升用户的浏览体验。 首先，我们需要创建...
android ScrollView顶部使用Viewpager的轮播图，下拉图片能放大效果
06-11
本文将详细讲解如何在ScrollView中实现顶部使用ViewPager的轮播图，并且在下拉时图片能产生放大效果。这个功能的实现涉及到了Android的布局管理、动画效果以及自定义控件等多个知识点。 首先，我们来分析需求。标题...
android ScrollView中 下拉放大图片
08-20
在某些场景下，为了实现一些特殊效果或者增强用户体验，我们可能需要在ScrollView中添加一些自定义的功能，例如本题所述的“下拉放大图片”。这个功能在电商应用或者阅读类应用中很常见，用户下拉时图片会放大，松手...
cardview及下定义scrollview实现下拉头部放大
熊佳龙的博客
12-09 491
看别人代码实现的，记录一下，下次方便使用
自定义ScrollView，实现头尾部的下拉、上拉
cjm2484836553的博客
11-16 545
效果如图： 源码已上传至我的资源 即：自定义ScrollerView源代码.rar 话不多说直接开始写代码： 1.自定义 MyScrollView 类继承 ScrollViewpublic class MyScrollView extends ScrollView {2.构造器（ 注意!这里不能用this来连写,构造 ） public MyScrollView(Context context)
自定义scrollView实现顶部图片下拉放大
热门推荐
liujinhua的博客
03-28 1万+
自定义scrollView实现顶部图片下拉放大
iOS开发-ScrollView图片缩放
weixin_33739541的博客
01-21 174
智能手机一般常用常用的操作触摸，滑动，缩放，感觉对于生活而言就是手机在手，天下我有，看网页的时候字体太小，缩放一下，看美女的看的不爽，缩放一下，地图看的不清，缩放一下。缩放是一个很常见的操作，不论是从生活还是写程序而言，都是一个绕不开的东西，做了一个Demo，缩放一下美女，熟悉ScrollView中的常见属性的设置，开始正题吧。 常见属性 先看图，要实现的效果: 　　 UI...
自定义ScrollView实现下拉放大头部图片
刘建的博客
10-22 1079
下拉实现放大头部布局，先看一下下图的效果：代码实现如下：public class HeadZoomScrollView extends ScrollView { private View mZoomView; private int mZoomViewWidth; private int mZoomViewHeight; private float firstPosit
Android下拉图片变大的ScrollView
jiyiren的博客
08-13 5277
1、效果图2、实现简介1、布局结构(1)、项目结构： (2)、代码结构 gitosc代码结构链接 一个主Activity,一个PullToZoomScrollView(即自定义的ScrollView)，还有一个工具类（可以忽略） (3)、布局结构 gitosc布局结构链接 主布局：分为两块，一个为TopBar，即标题栏（这个不用说了），另外一个是自定义的ScrollView，即Pul
android 反弹效果（ListView与Scroll）
yunlong782的专栏
05-21 1139
首先还是一贯作风，先看一些案例：（微信界面）            玩过微信的朋友想必很熟悉，其实就是界面可以拖拽，会有反弹效果，看起来很炫酷.(总之比拖拽没反应的死板要好.) 下面我来一一讲解如何实现这样效果： 原理：自定义ScrollView对其Touch监听，对布局时时更改. 一：不包含孩子，就是只针对普通的布局： MyScrollView.java
Android_自定义HorizontalScrollView实现滑动子控件大小变化动画
jh_yc的博客
02-16 4408
项目需求实现的一个界面效果,觉得挺有意思,不好的地方,大家给点意见 先看下效果图: 其实很简单,就是继承HorizontalScrollView(废话)... 如果对ScrollView不是很熟悉,可以看一下郭神的Android Scroller完全解析 下面看下具体代码@Override protected void onMeasure(int widthMeasureSpec,
android 自定义ScrollView实现背景图片伸缩的实现代码及思路
daditao的专栏
03-21 3355
本文纯属个人见解，是对前面学习的总结，如有描述不正确的地方还请高手指正~,首先还是按照通例给大家看下示例.      用过多米音乐的都市知道， 这个UI可以上下滑动，作用嘛---无聊中可以划划解解闷，这被锤子公司老罗称谓为“情怀”，其实叫“情味”更合适。嘿嘿.如今挪动互联网开展这么迅速，市场上已不再是那早期随便敲个APP放上架就能具有几十万用户的阶段了.近来苹果公司，为了怕an
Android下拉刷新控件实现：ListView与ScrollView案例解析
- **自定义控件**：通过重写View的触摸事件，自定义下拉刷新的逻辑和UI。 - **使用SwipeRefreshLayout**：这是Android Support Library提供的一个组件，可以与任何可滚动的视图（如ListView、ScrollView等）配合...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值