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

[复制链接]
来自: MrlLee 分类: Android精品源码 上传时间: 2016-6-15 17:50:53
Tag:图片

项目介绍:

前言因为公司项目要实现一个效果,在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的时候才可以开始放大图片
最后说两句控件中还有个监听,那个不用管,那个是为了获取滚动位置来设置标题栏透明度的,跟本文内容无关,所以就不详细说明了。当然这个自定义控件只是为了实现我项目中需求的效果,很简陋,实现方法也很简单,所以欢迎高手前来指点




相关源码推荐:

我来说两句
所有评论(56)
766601186 2016-6-15 23:35:33
正需要啊,感谢楼主无私分享!
回复
kanghongpu 2016-6-16 17:26:45
很给力,安卓巴士有你更精彩!
回复
Oo未知oO 2016-6-16 17:54:48
学习学习!
回复
icesharp 2016-6-16 18:01:22
感谢分享,mark!
回复
gostop0714 2016-6-16 18:05:49
楼主V5,安卓巴士有你更精彩!
回复
loveand 2016-6-16 18:19:58
学习学习,很有用,感谢~
回复
13718917058 2016-6-16 20:55:16
学习学习!
回复
提取码:  下载次数:36 状态:已购或VIP 售价:10(原价:10)金钱 下载权限:初级码农 
1798 0 36
代码贡献英雄榜
用户名 下载数
联系我们
首页/微信公众账号投稿
帖子代码编辑/版权问题
QQ:435399051,1294855032
如何获得代码达人称号?
如何成为签约作者?
领先的中文移动开发者社区
18620764416
7*24全天服务
意见反馈:1294855032@qq.com

扫一扫关注我们

Powered by Discuz! X3.2© 2001-2019 Comsenz Inc.( 粤ICP备15117877号 )