Android 自定义View可拖动移动位置及边缘拉伸放大缩小

最新推荐文章于 2021-12-23 16:00:33 发布
最新推荐文章于 2021-12-23 16:00:33 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： Android 文章标签： android

　一.首先说一下定义这样一个View有什么用?在一些app中,需要设置头像,而用户选择的图片可能是使用摄像头拍摄,也可能是选择的相册里面的图片,总之,这样的图片大小不一,就比如在使用某个聊天软件的时候,设置头像,需要对图片进行截取.

　　要实现这样一个功能,首先,需要分析用户的操作,即用户所点击的View的位置,如下图,我把View分为9个区域,

  • 当ACTION_DOWN时如果坐标为1.2.3.4四个区域,则对View进行相应的左上/右上/左下/右下拉伸;
  • 当ACTION_DOWN时如果坐标为5.6.7.8四个区域,则分别对上/右/下/左四个方向进行拉伸; 
  • 当ACTION_DOWN时如果坐标为9这个区域,则对View进行移动;

 

　　理论分析完成,下面来看具体实现;

　　在下面的类中,有五个方法center/left/top/bottom/right分别对应移动/向左拉伸/向上拉伸/向下拉伸/向右拉伸,当Action_down为1-4所在的区域时,组合前面的对应的两个拉伸方法即可,如左上角拉伸则对应执行left+top方法,这也是把四个单独一条边的边缘拉伸独立出来的原因;

　　在View中,我设定了View的最小宽度和高度,都是200,所以当用户点击边缘进行缩小操作时,能缩小的最小值也就是200;分别在left/top/bottom/right中体现;

复制代码 
/**
 * @see http://www.cnblogs.com/a284628487/
 * @author Cj
 * 
 */
public class DragScaleView extends View implements OnTouchListener {
    protected int screenWidth;
    protected int screenHeight;
    protected int lastX;
    protected int lastY;
    private int oriLeft;
    private int oriRight;
    private int oriTop;
    private int oriBottom;
    private int dragDirection;
    private static final int TOP = 0x15;
    private static final int LEFT = 0x16;
    private static final int BOTTOM = 0x17;
    private static final int RIGHT = 0x18;
    private static final int LEFT_TOP = 0x11;
    private static final int RIGHT_TOP = 0x12;
    private static final int LEFT_BOTTOM = 0x13;
    private static final int RIGHT_BOTTOM = 0x14;
    private static final int CENTER = 0x19;
    private int offset = 20;
    protected Paint paint = new Paint();

    /**
     * 初始化获取屏幕宽高
     */
    protected void initScreenW_H() {
        screenHeight = getResources().getDisplayMetrics().heightPixels - 40;
        screenWidth = getResources().getDisplayMetrics().widthPixels;
    }

    public DragScaleView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        setOnTouchListener(this);
        initScreenW_H();
    }

    public DragScaleView(Context context, AttributeSet attrs) {
        super(context, attrs);
        setOnTouchListener(this);
        initScreenW_H();
    }

    public DragScaleView(Context context) {
        super(context);
        setOnTouchListener(this);
        initScreenW_H();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        paint.setColor(Color.RED);
        paint.setStrokeWidth(4.0f);
        paint.setStyle(Style.STROKE);
        canvas.drawRect(offset, offset, getWidth() - offset, getHeight()
                - offset, paint);
    }

    @Override
    public boolean onTouch(View v, MotionEvent event) {
        int action = event.getAction();
        if (action == MotionEvent.ACTION_DOWN) {
            oriLeft = v.getLeft();
            oriRight = v.getRight();
            oriTop = v.getTop();
            oriBottom = v.getBottom();
            lastY = (int) event.getRawY();
            lastX = (int) event.getRawX();
            dragDirection = getDirection(v, (int) event.getX(),
                    (int) event.getY());
        }
        // 处理拖动事件
        delDrag(v, event, action);
        invalidate();
        return false;
    }

    /**
     * 处理拖动事件
     * 
     * @param v
     * @param event
     * @param action
     */
    protected void delDrag(View v, MotionEvent event, int action) {
        switch (action) {
        case MotionEvent.ACTION_MOVE:
            int dx = (int) event.getRawX() - lastX;
            int dy = (int) event.getRawY() - lastY;
            switch (dragDirection) {
            case LEFT: // 左边缘
                left(v, dx);
                break;
            case RIGHT: // 右边缘
                right(v, dx);
                break;
            case BOTTOM: // 下边缘
                bottom(v, dy);
                break;
            case TOP: // 上边缘
                top(v, dy);
                break;
            case CENTER: // 点击中心-->>移动
                center(v, dx, dy);
                break;
            case LEFT_BOTTOM: // 左下
                left(v, dx);
                bottom(v, dy);
                break;
            case LEFT_TOP: // 左上
                left(v, dx);
                top(v, dy);
                break;
            case RIGHT_BOTTOM: // 右下
                right(v, dx);
                bottom(v, dy);
                break;
            case RIGHT_TOP: // 右上
                right(v, dx);
                top(v, dy);
                break;
            }
            if (dragDirection != CENTER) {
                v.layout(oriLeft, oriTop, oriRight, oriBottom);
            }
            lastX = (int) event.getRawX();
            lastY = (int) event.getRawY();
            break;
        case MotionEvent.ACTION_UP:
            dragDirection = 0;
            break;
        }
    }

    /**
     * 触摸点为中心->>移动
     * 
     * @param v
     * @param dx
     * @param dy
     */
    private void center(View v, int dx, int dy) {
        int left = v.getLeft() + dx;
        int top = v.getTop() + dy;
        int right = v.getRight() + dx;
        int bottom = v.getBottom() + dy;
        if (left < -offset) {
            left = -offset;
            right = left + v.getWidth();
        }
        if (right > screenWidth + offset) {
            right = screenWidth + offset;
            left = right - v.getWidth();
        }
        if (top < -offset) {
            top = -offset;
            bottom = top + v.getHeight();
        }
        if (bottom > screenHeight + offset) {
            bottom = screenHeight + offset;
            top = bottom - v.getHeight();
        }
        v.layout(left, top, right, bottom);
    }

    /**
     * 触摸点为上边缘
     * 
     * @param v
     * @param dy
     */
    private void top(View v, int dy) {
        oriTop += dy;
        if (oriTop < -offset) {
            oriTop = -offset;
        }
        if (oriBottom - oriTop - 2 * offset < 200) {
            oriTop = oriBottom - 2 * offset - 200;
        }
    }

    /**
     * 触摸点为下边缘
     * 
     * @param v
     * @param dy
     */
    private void bottom(View v, int dy) {
        oriBottom += dy;
        if (oriBottom > screenHeight + offset) {
            oriBottom = screenHeight + offset;
        }
        if (oriBottom - oriTop - 2 * offset < 200) {
            oriBottom = 200 + oriTop + 2 * offset;
        }
    }

    /**
     * 触摸点为右边缘
     * 
     * @param v
     * @param dx
     */
    private void right(View v, int dx) {
        oriRight += dx;
        if (oriRight > screenWidth + offset) {
            oriRight = screenWidth + offset;
        }
        if (oriRight - oriLeft - 2 * offset < 200) {
            oriRight = oriLeft + 2 * offset + 200;
        }
    }

    /**
     * 触摸点为左边缘
     * 
     * @param v
     * @param dx
     */
    private void left(View v, int dx) {
        oriLeft += dx;
        if (oriLeft < -offset) {
            oriLeft = -offset;
        }
        if (oriRight - oriLeft - 2 * offset < 200) {
            oriLeft = oriRight - 2 * offset - 200;
        }
    }

    /**
     * 获取触摸点flag
     * 
     * @param v
     * @param x
     * @param y
     * @return
     */
    protected int getDirection(View v, int x, int y) {
        int left = v.getLeft();
        int right = v.getRight();
        int bottom = v.getBottom();
        int top = v.getTop();
        if (x < 40 && y < 40) {
            return LEFT_TOP;
        }
        if (y < 40 && right - left - x < 40) {
            return RIGHT_TOP;
        }
        if (x < 40 && bottom - top - y < 40) {
            return LEFT_BOTTOM;
        }
        if (right - left - x < 40 && bottom - top - y < 40) {
            return RIGHT_BOTTOM;
        }
        if (x < 40) {
            return LEFT;
        }
        if (y < 40) {
            return TOP;
        }
        if (right - left - x < 40) {
            return RIGHT;
        }
        if (bottom - top - y < 40) {
            return BOTTOM;
        }
        return CENTER;
    }

    /**
     * 获取截取宽度
     * 
     * @return
     */
    public int getCutWidth() {
        return getWidth() - 2 * offset;
    }

    /**
     * 获取截取高度
     * 
     * @return
     */
    public int getCutHeight() {
        return getHeight() - 2 * offset;
    }
}
复制代码

　　二.使用View,如果想要对View进行移动,需要在xml中配置android:clickable="true"属性;

    <xxx.DragScaleView
        android:id="@+id/ds"
        android:layout_width="180dip"
        android:layout_height="180dip"
        android:clickable="true" />

　　三.效果图,右图是拉伸后的效果
   

　　四.关于MotionEvent.getX()和MotionEvent.getRawX()的区别

　　getX表示触摸点距离View的左边缘的距离,而getRawX表示触摸点距离手机屏幕左侧的距离;

迷茫的岁月
关注
专栏目录
android自定义矩形框,Android自定义View实现可拖拽缩放的矩形框
weixin_28963585的博客
05-25 928
本文实例为大家分享了Android自定义View拖拽缩放矩形框的具体代码，供大家参考，具体内容如下在开发项目中，需要一个矩形框来实现截屏功能，并且还需要可以任意拖拽和缩放，这就需要自定义View来实现了，具体功能如下：1.自定义Viewpackage com.xinrui.screenshot.view;import android.content.Context;import android.g...
自定义View实战九：实现一个可以拖动大小，移动区域的矩形框
songzi1228的博客
04-20 1080
自定义View实战九：实现一个可以拖动大小，移动区域的矩形框
Android代码-DragScaleCircleView
08-07
DragScaleCircleView A custom imageview that provides the circle window can be dragged and scaled, crop image. How does it look? Why? Sometimes need to cut a picture into a circle. Install The library is published on Jcenter: compile 'com.rori.zenvo.dragscalecircleview:dragscalecircleview:1.0.1' Usage To add the DragScaleCircleView to your application, specify com.rori.zenvo.dragscalecircleview.DragScaleCircleView in your layout XML. Customization The default dragScaleCircleView to show t
android button去抖_2020 年Android入门教程之 LinearLayout布局 002
weixin_39569112的博客
11-25 146
android开发大部分都搭建UI，然后是业务操作，今天来学习常用的布局管理器线性布局LinearLayout。打开默认生成的activity_main.xml，更改根布局如下，我在这里使用的AndroidX下的androidx.appcompat.widget.LinearLayoutCompat<?xml version="1.0" encoding="utf-8"?> 垂直布局和...
Andriod 自定义view可拉伸缩放移动矩形框（详解）
qq_42545144的博客
12-23 5293
前言 目录 1.效果展示 2.图解 3.详解 4.全代码
Android 实现可以自由移动缩放的图片控件
热门推荐
lovoo的博客
06-10 1万+
一、概述：1、需要实现的功能 1）可以自由的缩放 2）双击可以缩放 3）自动边界检测 4）放大后可以自由的移动 5）处理与viewpager之间的事件冲突2、需要用到的技术 1）Handle事件分发机制 2）Matrix矩阵 3）ScaleGuestureDetector:手势缩放 4）GuestureDetector：手势移动 5）postdelay + runnable：实现
Android实现控件的缩放移动功能
01-20
通过以下步骤，你可以让控件像示例中的GIF那样，支持拖动、单指触控放大缩小、以及双指捏合缩放。 2. **使用步骤** **2.1 布局设计** 首先，创建一个包含自定义控件的LinearLayout。在XML布局文件中，设置...
android缩放组件,Android实现控件的缩放移动功能
weixin_39968823的博客
05-25 3477
上篇文章给大家介绍了Android控件实现图片缩放功能，需要的朋友点击查看。1.简介话不多说先来张效果图控件缩放移动.gif上面的gif中，依次进行了拖动——>触摸右上角放大，缩小——>触摸上方与右测边缘——>双指放大缩小。2 使用步骤2.1 布局。外层一个LinearLayout，里面一个自定义的控件DragScaleView，为了能够更清楚的看到控件的变化过程，就给控件加了...
Android view手势拖动和缩放
jin广越的博客
03-11 7559
在实际开发中很多地方都要用自定义的手势缩放和可移动的view，在下在开发不久的时候就遇到啦，当时还不懂手势拖动，经过了各种摸索和查阅终于是自己写出来了，感觉收获颇多，这里我是用的矩阵来对自定义的ImageView进行手势缩放和移动的，感觉matrix真是强大的，稍后我定要详细研究一下Matrix, 之后也会写一片博客大家一起讨论啊，学好数学还真是有用，这里我用的OntouchEvent来做的，下面看
自定义View矩形(可放大缩小移动).zip
07-16
自定义view矩形，如同之前写的一样，矩形实现了放大（根据边，并不是全部放大），缩小（同上），以及移动的功能，也加入了边界处理。同时矩形也可以显示为 四个边界直角
自定义view的缩放移动功能
03-20
类似地图的缩放,移动,自定义的view,不是ImageView
android自定义view实现可自由放大缩小和移动的imageView
我的博客
02-21 8350
本自定义的ZoomImageView实现的功能有： 多指触摸以中心点自由放大缩小，图片整体默认居中于控件中，双击放大缩小并防止出现白边；代码如下
Android 自定义View 一个可以自由拖拽、边缘拉伸的view
DDUP的博客
07-05 1848
之前在开发一个项目的时候，有做过一个这样的效果，从项目中抽出来，写了一个demo,给大家看下，抛砖引玉啊。 先看看实现的效果： 实现思路 1.如图上述效果，主要实现了两个效果：一是移动view的中心位置，可以实现view的自由拖拽移动，二是在右边缘、下边缘滑动的时候，view的宽、高跟着拉伸。 2.view的移动，可以使用setMargins(left ,top,right,bottom)方法,通过改变left、top的值来实现，view拉伸，可以通过不断改变LayoutParams w...
android 自定义view实现拖动放大缩小_自定义ItemToggleView
weixin_39906130的博客
11-27 282
阅读五分钟，每日十点，和您一起终身学习，这里是程序员Android本篇文章主要介绍 Android 开发中的部分知识点，通过阅读本篇文章，您将收获以下内容:自定义View类实现自定义View标签自定义View 布局自定义View 选择器自定义View 素材Activity 自定义view布局引用Activity使用自定义View自定义ItemToggleView 常用于Settings中，主要控制...
android 自定义view缩放,Android中自定义View支持缩放
weixin_42505246的博客
05-25 385
参考网址：https://blog.csdn.net/zqurapig/article/details/83414389https://blog.csdn.net/u010648159/article/details/80854797public class ScaleGestureDemoView extends View {private static final String TAG = "...
android 拖拽与缩放
chuyouyinghe的专栏
08-14 1774
编写:Andrwyw - 原文:http://developer.android.com/training/gestures/scale.html 本节课程讲述，使用onTouchEvent()截获触摸事件后，如何使用触摸手势拖拽、缩放屏幕上的对象。 拖拽一个对象 如果我们的目标版本为3.0或以上，我们可以使用View.OnDragListener监听内置的拖放（drag-and-d
android 自定义view实现放大缩小,Android中实现Bitmap在自定义View中的放大与拖动
weixin_35933239的博客
05-25 1263
Android中实现Bitmap在自定义View中的放大与拖动一：基本实现思路基于View类实现自定义View –MyImageView类。在使用View的Activity类中完成OnTouchListener接口，实现对自定义View的触摸事件监听放大与拖动基于单点触控实现Bitmap对象在View上的拖动、并且检测View的边缘，防止拖动过界。基于两个点触控实现Bitmap对象在View上的放...
android 只要上拉效果,Android 使用ViewDragHelper实现上拉效果
weixin_29047545的博客
05-29 289
该例子位于https://github.com/umano/AndroidSlidingUpPanelViewDragHelper的用法：http://flavienlaurent.com/blog/2013/08/28/each-navigation-drawer-hides-a-viewdraghelper/Android ViewDragHelper完全解析 自定义ViewGroup神器ht...
Android自定义View实现边缘凹凸优惠券效果及启动流程详解
这篇文章将详细介绍如何通过自定义View在Android中创建边缘凹凸的优惠券效果，涉及了View的生命周期、绘图方法、尺寸调整、动画及性能优化等多个知识点。开发者可以通过阅读和实践学习如何在实际项目中灵活运用这些...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值