Android中实现自定义View组件并使其能跟随鼠标移动

妖狐艹你老母 2023-10-08 11:27 98阅读 0赞

## 场景 ##

实现效果如下

![20200104103221436.gif][]

注：

博客：  
[https://blog.csdn.net/badao\_liumang\_qizhi][https_blog.csdn.net_badao_liumang_qizhi]  
关注公众号  
霸道的程序猿  
获取编程相关电子书、教程推送与免费下载。

## 实现 ##

新建Android项目，首先打开activity\_main.xml

修改其为FrameLayout帧布局管理器，并添加Id属性和背景照片

<?xml version="1.0" encoding="utf-8"?>
    <FrameLayout 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:id="@+id/frameLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/bg"
        tools:context=".MainActivity">
    
    
    
    </FrameLayout>

然后在包下新建自定View类dog类

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

使其继承View类，然后声明两个float变量来存储其位置。在其构造方法中对位置进行初始化。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1][]

然后重写onDraw方法，根据指定的位置进行重绘view

package com.badao.defineview;
    
    import android.content.Context;
    import android.graphics.Bitmap;
    import android.graphics.BitmapFactory;
    import android.graphics.Canvas;
    import android.graphics.Paint;
    import android.view.View;
    
    public class DogView extends View {
    
        public float bitmapX;
        public  float bitmapY;
        public DogView(Context context) {
            super(context);
            bitmapX = 290;
            bitmapY = 130;
        }
    
        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            //新建画笔对象
            Paint paint = new Paint();
            //获取照片
            Bitmap bitmap = BitmapFactory.decodeResource(this.getResources(), R.drawable.dog);
            //绘制照片
            canvas.drawBitmap(bitmap,bitmapX,bitmapY,paint);
            //回收图片
            if(bitmap.isRecycled())
            {
                bitmap.recycle();
            }
    
        }
    }

然后回到MainActivity，获取layout,声明自定义的view并设置触摸事件监听器，将触摸位置的坐标赋值给自定义view的位置，然后重绘view，并将其添加到layout中

package com.badao.defineview;
    
    import androidx.appcompat.app.AppCompatActivity;
    
    import android.os.Bundle;
    import android.view.MotionEvent;
    import android.view.View;
    import android.widget.FrameLayout;
    
    public class MainActivity extends AppCompatActivity {
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            //获取layout
            FrameLayout frameLayout = (FrameLayout) findViewById(R.id.frameLayout);
            //声明自定义View
            final DogView dogView = new DogView(this);
            //设置触摸事件监听器
            dogView.setOnTouchListener(new View.OnTouchListener() {
                @Override
                public boolean onTouch(View v, MotionEvent event) {
                    //获取触摸位置的X的坐标
                    dogView.bitmapX = event.getX();
                    //获取触摸位置Y的坐标
                    dogView.bitmapY = event.getY();
                    //需要重绘view
                    dogView.invalidate();
                    return true;
                }
            });
            //将自定义view添加到layout中
            frameLayout.addView(dogView);
        }
    }

[20200104103221436.gif]: https://img-blog.csdnimg.cn/20200104103221436.gif
[https_blog.csdn.net_badao_liumang_qizhi]: https://blog.csdn.net/badao_liumang_qizhi
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200104103235313.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200104103245180.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70