Android自定义View实现方向控制控件，可拖拽中间圆

野性酷女 2024-04-01 09:39 93阅读 0赞

有朋自远方来，不亦乐乎。

如果本篇文章对您有帮助，请动动您的小手点赞、评论、收藏。

![8c3612d2258341ca9e8004bce62d1c34.jpeg][]

话不多少，先上效果图。

![9cd81396d5e74259870f9baafbc862a4.png][]![58763f47b430483ab2d30d9ff1ff40bc.png][]

#### 主要功能 ####

1. 扁平化的控件样式。

2. 实现上、下、左、右点击功能，并实现拖拽中间圆形进行八个方向的控制。

#### 实现思路 ####

1. 由于此功能基于自定义View实现，因此先实现View类，重写onSeasure、onDraw函数。

2. 在onSeasure函数中，计算此view的宽高，后面基于此宽高计算控件中其他元素的宽高和位置信息。

3. 由于自定义View需使用Canvas绘制控件的所有元素，因此，提前定义好不同元素所使用的画笔。

4. 由于是方向控件，需要实现按钮的点击事件和中间圆的拖拽事件，在自定义View中，是使用onTouchListener实现的，在onTouch事件回调函数中，处理不同功能的操作逻辑。

5. 在处理点击事件时，根据用户点击的部位判断点击的是哪个按钮，如果点击的是中间，则可以拖拽。处理好点击事件后，调用invalidate()进行重绘。

6. 最后，在onDraw函数中重绘控件的相关部位。

#### 实现代码见下面，复制可用，有缺失的类是我自己的业务逻辑，删除即可。 ####

public class DirectionView extends View implements View.OnTouchListener {
        private int width;
        private int height;
        private int halfWidth;
        private int halfHeight;
        private int smallCircleRadius;
    
        private int sideWidth = 4;//外层边框宽度
    
        private Paint paintCircleSide;
        private Paint paintCircleBg;
        private Paint paintCircleCenter;
        private Paint paintDirection;
    
        private int pressDirectionH = 0;
        private int pressDirectionV = 0;
    
        private int smallCircleCenterX = -1;
        private int smallCircleCenterY = -1;
        private int halfTouchWidth = 65;
    
        private BlurMaskFilter blurMaskFilter;
        private Path path = new Path();
    
        public DirectionView(Context context) {
            super(context);
            init(context);
        }
    
        public DirectionView(Context context, @Nullable AttributeSet attrs) {
            super(context, attrs);
            init(context);
        }
    
        public DirectionView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
            init(context);
        }
    
        private void init(Context context)
        {
            paintCircleSide = createPaintWithCommon(sideWidth, "#66ffffff", Paint.Style.STROKE);
            paintCircleBg = createPaintWithCommon(2, "#662a3845", Paint.Style.FILL);
            paintCircleCenter = createPaintWithCommon(2, "#ffffff", Paint.Style.FILL);
            paintDirection = createPaintWithCommon(6, "#ffffff", Paint.Style.STROKE);
    
            blurMaskFilter = new BlurMaskFilter(20, BlurMaskFilter.Blur.SOLID);
    
            this.setOnTouchListener(this);
        }
    
        private Paint createPaintWithCommon(int strokeWidth, String color, Paint.Style style)
        {
            Paint paint = new Paint();
            paint.setStrokeWidth(strokeWidth);
            paint.setColor(Color.parseColor(color));
            paint.setStyle(style);
            paint.setAntiAlias(true);
            paint.setStrokeJoin(Paint.Join.ROUND);
            paint.setStrokeCap(Paint.Cap.ROUND);
            return paint;
        }
    
        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
    
            canvas.drawCircle(halfWidth, halfHeight, halfWidth - sideWidth / 2, paintCircleBg);
            canvas.drawCircle(halfWidth, halfHeight, halfWidth - sideWidth, paintCircleSide);
    
            if(this.smallCircleCenterY != -1)
            {
    //            paintCircleCenter.setMaskFilter(blurMaskFilter);
                canvas.drawCircle(smallCircleCenterX, smallCircleCenterY, smallCircleRadius, paintCircleCenter);
            }
            else
            {
    //            paintCircleCenter.setMaskFilter(null);
                canvas.drawCircle(halfWidth, halfHeight, smallCircleRadius, paintCircleCenter);
            }
    
            int offsetSize = 25;
            int offsetPosition = 20;
    
            //上
            if(pressDirectionV == PtzAction.Direction.Up)
                paintDirection.setColor(Color.parseColor("#0000ff"));
            else
                paintDirection.setColor(Color.parseColor("#ffffff"));
    
            path.reset();
            path.moveTo(halfWidth - offsetSize, halfHeight / 2 - offsetPosition);
            path.lineTo(halfWidth, halfHeight / 2 - offsetSize - offsetPosition);
            path.lineTo(halfWidth + offsetSize, halfHeight / 2 - offsetPosition);
            canvas.drawPath(path, paintDirection);
    
            //右
            if(pressDirectionH == PtzAction.Direction.Right)
                paintDirection.setColor(Color.parseColor("#0000ff"));
            else
                paintDirection.setColor(Color.parseColor("#ffffff"));
    
            path.reset();
            path.moveTo(halfWidth + halfWidth / 2 + offsetPosition, halfHeight - offsetSize);
            path.lineTo(halfWidth + halfWidth / 2 + offsetPosition + offsetSize, halfHeight);
            path.lineTo(halfWidth + halfWidth / 2 + offsetPosition, halfHeight + offsetSize);
            canvas.drawPath(path, paintDirection);
    
            //下
            if(pressDirectionV == PtzAction.Direction.Down)
                paintDirection.setColor(Color.parseColor("#0000ff"));
            else
                paintDirection.setColor(Color.parseColor("#ffffff"));
    
            path.reset();
            path.moveTo(halfWidth - offsetSize, halfHeight + halfHeight / 2 + offsetPosition);
            path.lineTo(halfWidth, halfHeight + halfHeight / 2 + offsetSize + offsetPosition);
            path.lineTo(halfWidth + offsetSize, halfHeight + halfHeight / 2 + offsetPosition);
            canvas.drawPath(path, paintDirection);
    
            //左
            if(pressDirectionH == PtzAction.Direction.Left)
                paintDirection.setColor(Color.parseColor("#0000ff"));
            else
                paintDirection.setColor(Color.parseColor("#ffffff"));
    
            path.reset();
            path.moveTo(halfWidth / 2 - offsetPosition, halfHeight - offsetSize);
            path.lineTo(halfWidth / 2 - offsetPosition - offsetSize, halfHeight);
            path.lineTo(halfWidth / 2 - offsetPosition, halfHeight + offsetSize);
            canvas.drawPath(path, paintDirection);
        }
    
        @Override
        public boolean onTouch(View v, MotionEvent event)
        {
            try
            {
            	int action = event.getAction();
            	int x = (int) event.getX();
            	int y = (int) event.getY();
    
            	if(action == MotionEvent.ACTION_DOWN)
            	{
            	    //判断按下的是不是中间
            	    if(x > halfWidth - smallCircleRadius && x < halfWidth + smallCircleRadius && y > halfHeight - smallCircleRadius && y < halfHeight + smallCircleRadius)
            	    {
            	        this.smallCircleCenterX = x;
            	        this.smallCircleCenterY = y;
            	        return true;
            	    }
    
                    int offset = 30;
                    if(x > halfWidth - halfTouchWidth && x < halfWidth + halfTouchWidth)
                    {
                        if(y > halfHeight / 2 - halfTouchWidth - offset && y < halfHeight / 2 + halfTouchWidth - offset)
                        {
                            setPtzDirection(PtzAction.Direction.None, PtzAction.Direction.Up);
                        }
                        else if (y > halfHeight + halfHeight / 2 + offset - halfTouchWidth && y < halfHeight + halfHeight / 2 + offset + halfTouchWidth)
                        {
                            setPtzDirection(PtzAction.Direction.None, PtzAction.Direction.Down);
                        }
                    }
    
                    if(y > halfHeight - halfTouchWidth && y < halfHeight + halfTouchWidth)
                    {
                        if(x > halfWidth / 2 - halfTouchWidth - offset && x < halfWidth / 2 + halfTouchWidth - offset)
                        {
                            setPtzDirection(PtzAction.Direction.Left, PtzAction.Direction.None);
                        }
                        else if(x > halfWidth + halfWidth / 2 + offset - halfTouchWidth && x < halfWidth + halfWidth / 2 + offset + halfTouchWidth)
                        {
                            setPtzDirection(PtzAction.Direction.Right, PtzAction.Direction.None);
                        }
                    }
    
                }
            	else if (action == MotionEvent.ACTION_MOVE)
                {
                    //说明按下的是中间小圆
                    if(this.smallCircleCenterX != -1)
                    {
                        //小圆拖动时圆心所在的圆的最大半径
                        int maxRadius = halfHeight - smallCircleRadius - 35;
                        int minRadius = 70;
    
                        int deltaX = x - halfWidth;
                        int deltaY = y - halfHeight;
    
                        int length = (int) Math.hypot(deltaX, deltaY);
    
                        if(length > maxRadius)
                        {
    //                        LOGUtil.d("在圆外");
                            this.smallCircleCenterX = halfWidth + maxRadius * deltaX / length;
                            this.smallCircleCenterY = halfHeight + maxRadius * deltaY / length;
                        }
                        else
                        {
    //                        LOGUtil.d("在圆内");
                            this.smallCircleCenterX = x;
                            this.smallCircleCenterY = y;
    
                            if(length < minRadius)
                            {
                                setPtzDirection(PtzAction.Direction.None, PtzAction.Direction.None);
                                invalidate();
                                return true;
                            }
                        }
    
                        double atan = Math.atan((this.smallCircleCenterY - halfHeight) * 1.0 / (this.smallCircleCenterX - halfWidth));
                        double degree = Math.toDegrees(atan);
                        if(this.smallCircleCenterX < halfWidth)
                        {
                            if(degree > 60)
                                setPtzDirection(PtzAction.Direction.None, PtzAction.Direction.Up);
                            else if(degree > 30)
                                setPtzDirection(PtzAction.Direction.Left, PtzAction.Direction.Up);
                            else if(degree > -30)
                                setPtzDirection(PtzAction.Direction.Left, PtzAction.Direction.None);
                            else if(degree > -60)
                                setPtzDirection(PtzAction.Direction.Left, PtzAction.Direction.Down);
                            else
                                setPtzDirection(PtzAction.Direction.None, PtzAction.Direction.Down);
                        }
                        else
                        {
                            if(degree > 60)
                                setPtzDirection(PtzAction.Direction.None, PtzAction.Direction.Down);
                            else if(degree > 30)
                                setPtzDirection(PtzAction.Direction.Right, PtzAction.Direction.Down);
                            else if(degree > -30)
                                setPtzDirection(PtzAction.Direction.Right, PtzAction.Direction.None);
                            else if(degree > -60)
                                setPtzDirection(PtzAction.Direction.Right, PtzAction.Direction.Up);
                            else
                                setPtzDirection(PtzAction.Direction.None, PtzAction.Direction.Up);
                        }
    
    //                    LOGUtil.d("atan = " + atan + ", degree = " + Math.toDegrees(atan));
                    }
                }
            	else if(action == MotionEvent.ACTION_UP)
            	{
                    setPtzDirection(PtzAction.Direction.None, PtzAction.Direction.None);
                    this.smallCircleCenterX = -1;
                    this.smallCircleCenterY = -1;
            	}
    
            	invalidate();
            }
            catch (Exception e)
            {
            	LOGUtil.e(e.getMessage());
            }
    
            //一定要return true, 否则UP事件不会被监听到。
            return true;
        }
    
        private void setPtzDirection(int directionH, int directionV)
        {
            PtzAction ptzAction = ApplicationContext.getInstance().getPtzAction();
            ptzAction.setDirectionH(directionH);
            ptzAction.setDirectionV(directionV);
            this.pressDirectionH =  directionH;
            this.pressDirectionV= directionV;
        }
    
        @Override
        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
        {
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);
            int widthMode = MeasureSpec.getMode(widthMeasureSpec);
            int heightMode = MeasureSpec.getMode(widthMeasureSpec);
    
            width = getSize(widthMode, widthMeasureSpec);
            height = getSize(heightMode, heightMeasureSpec);
            halfWidth = width / 2;
            halfHeight = height / 2;
            smallCircleRadius = halfWidth / 4;
        }
    
        private int getSize(int mode, int sizeMeasureSpec)
        {
            if(mode == MeasureSpec.EXACTLY || mode == MeasureSpec.AT_MOST)
                return MeasureSpec.getSize(sizeMeasureSpec);
            else if (mode == MeasureSpec.UNSPECIFIED)
                return sizeMeasureSpec;
            else
                return 0;
        }
    }

#### PtzAction ####

package com.rtcce.laser.pad.model;
    
    public class PtzAction
    {
        private int speedH;
        private int speedV;
        private int directionH;
        private int directionV;
        /**
         *  PAD一直下发云台控制指令给控制器，控制器接受指令后返回电机角度。
         *  手动或扫描模式下控制器转发控制指令给云台，粗瞄和自动跟踪状态下，控制接收PAD控制指令但是不转发给云台。
         *  粗瞄新建一次性socket连接发送粗瞄指令，控制器接收到粗瞄指令进入粗瞄状态，粗瞄超时2s，超时或到达粗瞄点自动退并进入手动
         *  自动跟踪状态下，转发miniPC控制指令给云台
         */
        public final static class PtzMode{
            public final static int Hand_CONTROLLER = 0; //手动
            public final static int SCANNER = 2;//扫描模式
    //        public final static int AUTO_CONTROLLER = 1;//自动（自动跟踪）
    //        public final static int AUXILIARY = 4;//自动（粗瞄）
        }
    
        private final static int defaultMode = PtzMode.Hand_CONTROLLER;
        private int ptzMode = defaultMode;
    
        public static class Direction
        {
            public static final int None = 0;
            public static final int Up = 1;
            public static final int Down = 2;
            public static final int Left = 3;
            public static final int Right = 4;
        }
    
        public int getSpeedH() {
            return speedH;
        }
    
        public void setSpeedH(int speedH) {
            this.speedH = speedH;
        }
    
        public int getSpeedV() {
            return speedV;
        }
    
        public void setSpeedV(int speedV) {
            this.speedV = speedV;
        }
    
        public int getDirectionH() {
            return directionH;
        }
    
        public void setDirectionH(int directionH) {
            this.directionH = directionH;
        }
    
        public int getDirectionV() {
            return directionV;
        }
    
        public void setDirectionV(int directionV) {
            this.directionV = directionV;
        }
    
        public int getPtzMode() {
            return ptzMode;
        }
    
        public void setPtzMode(int ptzMode) {
            this.ptzMode = ptzMode;
        }
    
        public void resetPtzMode() {
            this.ptzMode = defaultMode;
        }
    }

[8c3612d2258341ca9e8004bce62d1c34.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/a9737f9db2a340208e4a266c63e53a34.jpeg
[9cd81396d5e74259870f9baafbc862a4.png]: https://img-blog.csdnimg.cn/9cd81396d5e74259870f9baafbc862a4.png
[58763f47b430483ab2d30d9ff1ff40bc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/739a64d82f35404b98a183f57f6949d3.png