Android自定义控件（二）-给自定义控件添加事件

Android自定义控件拖动

最新推荐文章于 2025-07-10 13:25:33 发布

原创最新推荐文章于 2025-07-10 13:25:33 发布 · 1.9k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#Android自定义控件（二）-给自定义控件添加事件 #给自定义控件添加事件

技术博客同时被 2 个专栏收录

25 篇文章

订阅专栏

代码

18 篇文章

订阅专栏

本文介绍如何在Android中创建可拖动的自定义控件，通过获取控件坐标和处理触摸事件，实现控件随手指移动的效果，并提供代码示例。

在这篇博客中主要讲解给Android自定义控件添加点击事件，实现可以按住百分比圆圈在屏幕上进行拖动圆圈的功能。分两部分讲，第一部分是获取自定义控件的坐标，第二部分是重新绘制控件。

没有看过自定义控件的可以先阅读以下这篇博客：

https://blog.youkuaiyun.com/yuanheng19930119/article/details/88055225

第一部分：获取自定义控件坐标

首先看一张图，这是自定义控件中获取坐标的函数，各函数获取的坐标含义如下所示：

1.view获取自身坐标：getLeft(),getTop(),getRight(),getBottom()

getTop：获取到的，是view自身的顶边到其父布局顶边的距离

getLeft：获取到的，是view自身的左边到其父布局左边的距离

getRight：获取到的，是view自身的右边到其父布局左边的距离

getBottom：获取到的，是view自身的底边到其父布局顶边的距离

2.view获取自身宽高：getHeight(),getWidth()

3.motionEvent获取坐标：getX(),getY(),getRawX(),getRawY()

getX()：获取点击事件相对控件左边的x轴坐标，即点击事件距离控件左边的距离

getY()：获取点击事件相对控件顶边的y轴坐标，即点击事件距离控件顶边的距离

getRawX()：获取点击事件相对整个屏幕左边的x轴坐标，即点击事件距离整个屏幕左边的距离

getRawY()：获取点击事件相对整个屏幕顶边的y轴坐标，即点击事件距离整个屏幕顶边的距离

第二部分：计算控件左上角坐标，当按下控件移动的时候，计算偏移距离，重新绘制，代码及效果图如下所示：

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
 
public class SimpleView extends View {
 
    private final static String TAG = SimpleView.class.getSimpleName();
    //画笔
    private Paint mPaint;
    private RectF oval;
    //事件处理
    private EventHandle mEventHandle;
    //鼠标按下位置
    private int startX,startY;
    //按下鼠标时控件的位置
    private int startLeft,startTop;
    //状态栏高度
    int statusHeight = 0;
    public SimpleView(Context context) {
        super(context);
        init();
    }
 
    public SimpleView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }
 
    public SimpleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }
 
    private void init(){
        mPaint = new Paint();
        //设置是否使用抗锯齿功能，会消耗较大资源，绘制图形速度会变慢。
        mPaint.setAntiAlias(true);
        mPaint.setTextSize(30.0f);
        oval=new RectF();
        mEventHandle=null;
        startY=startX=0;
 
        int resourceId = this.getResources().getIdentifier("status_bar_height", "dimen", "android");
        if (resourceId > 0) {
            statusHeight = this.getResources().getDimensionPixelSize(resourceId);
        }
    }
 
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        Log.e(TAG, "onMeasure--widthMode-->" + widthMode);
        switch (widthMode) {
            case MeasureSpec.EXACTLY:
                //精确值模式，当控件的layout_width和layout_height属性指定为具体数值或match_parent时。
                break;
            case MeasureSpec.AT_MOST:
                //最大值模式，当空间的宽高设置为wrap_content时。
                break;
            case MeasureSpec.UNSPECIFIED:
                //未指定模式，View想多大就多大，通常在绘制自定义View时才会用。
                break;
        }
        //取最小边为控件的宽高的最小值
        int minWidth=widthSize>heightSize?heightSize:widthSize;
        setMeasuredDimension(minWidth,minWidth);
    }
 
 
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPaint.setColor(Color.GRAY);
        // FILL填充, STROKE描边,FILL_AND_STROKE填充和描边
        mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
        int with = getWidth();
        int height = getHeight();
        Log.e(TAG, "onDraw---->" + with + "*" + height);
        float radius = with / 2-5;
        canvas.drawCircle(with / 2, with / 2, radius, mPaint);
        mPaint.setColor(Color.RED);
        oval.set(with / 2 - radius, with / 2 - radius, with / 2
                + radius, with / 2 + radius);//用于定义的圆弧的形状和大小的界限
        int sweepAngle=120;
        canvas.drawArc(oval, 0, -sweepAngle, true, mPaint);  //根据进度画圆弧
        double percent=sweepAngle/360.0;
        //设置文本颜色
        mPaint.setColor(Color.WHITE);
        //绘制文本百分比数据
        canvas.drawText(String.format("%.2f",percent)+"%",(float)(with/2+radius*Math.cos(sweepAngle*Math.PI/360)/4)
                ,(float)(with/2-radius*Math.sin(sweepAngle*Math.PI/360)/3),mPaint);
        canvas.drawText(String.format("%.2f",1-percent)+"%",(float)(with/2-radius*Math.cos(sweepAngle*Math.PI/360))
                ,(float)(with/2+radius*Math.sin(sweepAngle*Math.PI/360)/3),mPaint);
    }
 
    @Override
    public boolean onTouchEvent(MotionEvent event) {
 
 
        switch (event.getAction())
        {
            case MotionEvent.ACTION_DOWN:
 
                startX=(int)event.getRawX();
                startY=(int)event.getRawY();
                startLeft=(int)(startX-event.getX());
                /**
                 * 这里startTop计算有些偏离，原因在于计算时加入了标题栏和状态栏的高度
                 * 注意：要是你的Activity没有去掉标题栏，这里还要去掉标题栏的高度
                 */
                startTop= (int)(startY-event.getY())-statusHeight;//减去状态栏高度
                break;
            case MotionEvent.ACTION_MOVE:
                if(mEventHandle!=null)
                {
                    mEventHandle.onTouchEvent(event);
                }else{
                    int disX=(int)event.getRawX()-startX;//计算偏移的X坐标
                    int disY=(int)event.getRawY()-startY;//计算偏移的Y坐标;
                    int left=startLeft+disX;
                    int top=startTop+disY;
                    //更新控件位置
                    layout(left,top,left+getWidth(),top+getHeight());
                }
                break;
            case MotionEvent.ACTION_UP:
                break;
        }
        //返回true表示不消耗此事件，事件继续传递，返回flase表示事件消耗
        return true;
    }
 
    public void setmEventHandle(EventHandle mEventHandle) {
        this.mEventHandle = mEventHandle;
    }
 
    interface EventHandle{
        public void onTouchEvent(MotionEvent event);
    }
}

布局文件xml：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.myapplication.MainActivity">
    <com.example.myapplication.SimpleView
        android:layout_width="150dp"
        android:layout_height="150dp"
        />
 
</RelativeLayout>

MainActivity，要注意的是，需要在这里将标题栏去掉，否则拖动的时候会出现偏差

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Window;
 
 
public class MainActivity extends AppCompatActivity{
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);//去掉标题栏
        /*
            requestWindowFeature(Window.FEATURE_NO_TITLE)无效解决方法：
            正常情况下requestWindowFeature(Window.FEATURE_NO_TITLE)是可以生效的，
            但是当Activity继承子AppCompatActivity的时候，这个就失效了 
            解决办法：
            1、手动在oncreate里调用hide()
            if (getSupportActionBar() != null){
               getSupportActionBar().hide();
            }
         */
        if (getSupportActionBar() != null){
            getSupportActionBar().hide();
        }
        setContentView(R.layout.activity_main);
    }
 
}

效果图如下所示：