【Android】自定义view-拖动小球移动

Android应用界面中可以看得见的都是由一个个的View所组成的,几乎所有的可视的控件都是基于View写的。在View中提供了对touch也就是手势的捕获和传递,我们可以对View里面手势的重写来达到我们所需要的特性。比如说我们现在要做一款游戏,内容很简单,就是要实现让如图所示的一个黑色的小球在根据手指移动而在手机屏幕内移动。

我们可以重写View里面的public boolean onTouchEvent(MotionEvent event)方法,来获取到所有的手势操作,再从中选择出所需要的手势进行操作。

所以可以得到如下的一段代码:

/**
 * Created by obo on 15/8/21.
 */
public class TouchView extends View{

    public static String TAG = TouchView.class.getCanonicalName();
    //当前小球的位置
    private PointF currrentPosition = new PointF(100,100);
    //手指触摸起点坐标
    private PointF moveStartPosition = new PointF(0,0);
    //当前手指位置坐标
    private PointF moveEndPosition = new PointF(0,0);

    private Context context;

    public TouchView(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.context = context;
    }

    @Override
    public void onDraw(Canvas canvas)
    {
        super.onDraw(canvas);
        canvas.drawCircle(currrentPosition.x + (moveEndPosition.x - moveStartPosition.x),currrentPosition.y+(moveEndPosition.y - moveStartPosition.y),50,new Paint());
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {

        switch (event.getActionMasked())
        {
            case MotionEvent.ACTION_DOWN:
                moveStartPosition.x = event.getX();
                moveStartPosition.y = event.getY();
                break;
            case MotionEvent.ACTION_MOVE:
                moveEndPosition.x = event.getX();
                moveEndPosition.y = event.getY();
                //刷新
                this.postInvalidate();
                break;

            case MotionEvent.ACTION_UP:
                currrentPosition.x += (moveEndPosition.x - moveStartPosition.x);
                currrentPosition.y += (moveEndPosition.y - moveStartPosition.y);
                moveStartPosition.x = moveEndPosition.x;
                moveStartPosition.y = moveEndPosition.y;
                break;
            default:
        }
        return true;
    }
}

可以看到当前onTouchEvent方法返回ture,表明这个View是要对当前手势操作进行捕获的,这里包括 按下、移动和抬起等相关操作,如果返回的是false的话,只会接收到第一次的一个ACTION_DOWN也就是按下的响应,之后的移动手势和抬起的手势都无法获取到。

方法onTouchEvent里面做了三件事情:1.当用户手指按下的时候,初始化记录下开始按下的坐标,并立即返回不需要刷新界面。2.当用户移动手指的时候,记录用户手指的位置,并且重新刷新界面。3.当用户退出手势也就是抬起手指的时候,将位移赋值给基础坐标点,并让手势起点坐标和手势终点坐标x、y相等(清零)。

而如果使用Matrix的话将会使整个过程变得更加简单,只需要事先得到小球的bitmap就能使用matrix对小球进行包括 位移、形变、旋转在内的变换,这里只使用matrix的位移变换效果,具体实现代码如下:

/**
 * Created by obo on 15/8/26.
 */
public class MatrixView extends View {

    public final static String TAG = MatrixView.class.getCanonicalName();
    //bitmap运行矩阵
    Matrix matrix = new Matrix();
    //记录点
    PointF startPoint = new PointF();
    //自定义bitmap
    Bitmap bitmap = Bitmap.createBitmap(100,100, Bitmap.Config.ARGB_8888);

    public MatrixView(Context context, AttributeSet attrs) {
        super(context, attrs);

        Canvas canvas = new Canvas(bitmap);
        //直接在bitmap上面绘制一个小球
        canvas.drawCircle(50,50,50,new Paint());
    }

    @Override
    public void onDraw(Canvas canvas)
    {
        super.onDraw(canvas);

        canvas.drawBitmap(bitmap, matrix, new Paint());
    }

    @Override
    public boolean onTouchEvent(MotionEvent event)
    {
        super.onTouchEvent(event);

        if (event.getActionMasked() == MotionEvent.ACTION_MOVE)
        {
            matrix.postTranslate(event.getX() - startPoint.x, event.getY() - startPoint.y );
            //刷新
            this.postInvalidate();
        }

        startPoint.x = event.getX();
        startPoint.y = event.getY();

        return true;

    }
}

这一块的代码实现的效果和先前的一样,增加了Matrix变量,少了一个PointF变量,同时在onTouchEvent和onDraw方法中的代码量也降低了一些。Matrix其实是一个3X3的矩阵,使用Matrix可以一步步积累变换的操作,无论对matrix操作多少次,其对图片的处理复杂度都是固定不变的,并且能对图片进行快速的变换,这就是使用matrix的带来的好处。

时间: 2024-09-03 15:03:43

【Android】自定义view-拖动小球移动的相关文章

Android自定义View实现弹性小球效果_Android

照例先看效果图 自定义代码示例 public class BezierView extends View { Paint paint;//画笔 Path path;//路径 int radius = 50;//圆的半径 int time = 100;//计数时长 int index; int offsetIndex; float viewX, viewY;//图形中心点坐标 float width;//屏幕宽度 float partWidth;//屏幕宽度的1/4 int paddingLeft

Android自定义View圆形和拖动圆、跟随手指拖动效果

单纯的自定义一个圆非常简单 只需要几步就完成 拖动圆添加实现触摸事件即可 我在第一次自定义View圆遇到的几个Bug: 1.拖动圆的话在xml里面设置的自定义圆的宽和高是它能活动的空间的大小 不是圆控件的大小 如果你定义了100dp 拖动它的时候超过100dp这个距离这个圆就会看不见 就像下面这样 如果想活动于整个屏幕直接给宽和高match_parent属性就好了 2.我在定义充满属性match_parent的时候运行会报错,什么方法都用了就是不行,耐心等待过一会就好了-有可能是studio没来

Android自定义View实现照片裁剪框与照片裁剪功能_Android

本文所需要实现的就是这样一种有逼格的效果: 右上角加了个图片框,按下确定可以裁剪正方形区域里的图片并显示在右上角. 实现思路: 1:首先需要自定义一个ZoomImageView来显示我们需要的图片,这个View需要让图片能够以合适的位置展现在当前布局的图片展示区域内(合适的位置值的是:如果图片长度大于屏幕,则压缩图片长度至屏幕宽度,高度等比压缩并居中显示,如果图片高度大于屏幕,则压缩图片高度至屏幕高度,长度等比压缩并居中显示.): 2:然后需要实现这个拖动的框框,该框框实现的功能有四点:拖动.扩

Android自定义View实现支付宝支付成功-极速get花式Path炫酷动画

本文手把手教你图片->SVG->Path的姿势.. 从此酷炫Path动画,如此简单. 效果先随便上几个图,以后你找到的图有多精彩,gif就有多精彩: 随便搜了一个铅笔画的图,丢进去 随手复制的二维码icon 来自大佬wing的铁塔 前文回顾 这里简单回顾一下前文,GIF如下图: PathAnimView接受的唯一数据源是Path(给我一个Path,还你一个动画View) 所以内置了几种将别的资源->Path的方法: 直接传string.(A-Z,0-9 "." &qu

Android自定义view圆并随手指移动

本文实例为大家分享了Android自定义view圆并随手指移动的具体代码,供大家参考,具体内容如下 main代码 public class MainActivity extends AppCompatActivity { private int screenW; //屏幕宽度 private int screenH; //屏幕高度 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(saved

Android自定义View实现等级滑动条的实例

Android自定义View实现等级滑动条的实例 实现效果图: 思路: 首先绘制直线,然后等分直线绘制点: 绘制点的时候把X值存到集合中. 然后绘制背景图片,以及图片上的数字. 点击事件down的时候,换小图片为大图片.move的时候跟随手指移动. up的时候根据此时的X计算最近的集合中的点,然后自动吸附回去. 1,自定义属性 <?xml version="1.0" encoding="utf-8"?> <resources> <dec

android自定义view插入xml

问题描述 android自定义view插入xml 自定义View代码如下.我希望把这个view插入到一个layout的xml的文件中.一直出错,错误类型是error inflating class.应该是这个View出的问题package com.example.browserstation; import java.util.Timer;import java.util.TimerTask; import android.content.Context;import android.graph

组合-android自定义view怎样指定自定义view的布局

问题描述 android自定义view怎样指定自定义view的布局 我有现成的布局xml文件,现在想定义一个组合的自定义view,怎样把这个view的布局指定为一个xml文件 解决方案 LayoutInflater.from(mActivity).inflate(R.layout.mainscreen_title, this, true);这样就行了,this是当前的View,而后面这两个参数是将R.layout.mainscreen_title attachToRoot 也就是以当前这个Vie

Android自定义View之使用贝塞尔曲线实现流量进度条

第一次写带图片的博客,多少还是有点紧张,效果不好,请将就着看,前面的图是今天要写的控件的效果图,元素不多,分别是一个按钮和一个自定义的控件. 在此以前,我看过许多的书,比如<Android群英传>.<第一行代码>等,也看了很多大神的博客,但是即便是这样,当我看到这么多代码的时候,一直都没有真正的动手去敲过这些代码,以至于我总是觉得自定义View是一个多么高深莫测的技术,我们这些小白是难以触及的,但是当昨晚看了一篇鸡汤之后,觉得人还是要学会专注,要耐得住寂寞,要沉得住气.所以在未来的

Android自定义View之绘制音乐播放器示波器

周末玩的有点嗨,没更新博客了,今天补上,这个示波器是在大学的时候老师教的,但是出来工作一直没有用到过,渐渐的也就忘记了,现在重新学习一下.来看看效果图: 这里是一个自定义的柱状图,然后有一个按钮,点击按钮的时候,这里柱子会不停的运动,类似于音乐播放器里示波器的跳动. 跟前面几个自定义view的方式类似,重写了onSizeChange()方法和onDraw()方法  先列一下我们要用到的变量 Paint mPaint; mWidth; mRectWidth; mRectHeight; mRectC