自定义View之游戏摇杆键盘实现（二）

前言

去年开发项目，需要实现一个遥感按钮，控制公司机器人行走，于是通过自定义SurfaceView实现了该功能，想了解的话，传送门在这自定义View之游戏摇杆键盘实现，但由于传输指令过程中对时间准确度要求较高，调试后发现，自定义绘制过程中时间不稳定，性能较差。于是决定不自定义SurfaceView，改而采用自定义View实现。

最终效果

此版本相对于之前自定义SurfaceView版本，增加角度之间的计算，以及指针的跟随。根据公司需求，方向分为八个，除了常规的上下左右外，还有上左，上右，下左，下右。如图

实际开发使用后，性能，稳定性，都优于上一版本，上最后效果图

未触摸状态下

触摸状态下

实现

效果图中，实现遥感按钮所需图片分为：中心悬浮球，外层图，内部方向背景图，因此，先获图片，注意避免重复实例化

    //外层图
    bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.control_rocker_arrow);
    //中心悬浮球
    bitmapInner = BitmapFactory.decodeResource(getResources(), R.mipmap.control_rocker_paws);
    //外层圆形带指针图
    bitmap1 = BitmapFactory.decodeResource(getResources(), R.mipmap.control_rocker_bg);
    bitmap2 = BitmapFactory.decodeResource(getResources(), R.mipmap.control_rocker_not_active);

获取之后，指定相关图片的绘制区域（例如图片的左上角区域）

    src = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
    srcNoActive = new Rect(0, 0, bitmap2.getWidth(), bitmap2.getHeight());
    srcInner = new Rect(0, 0, bitmapInner.getWidth(), bitmapInner.getHeight());

在onMeasure测量时，通过bitmap宽高，获取外层图片的显示区域（指定图片在屏幕上显示的区域），

   //触摸
    dst = new Rect((int) mWidth / 2 - bitmap.getWidth() / 2, (int) mHeight / 2 - bitmap.getHeight() / 2,
    (int) mWidth / 2 + bitmap.getWidth() / 2, (int) mHeight / 2 + bitmap.getHeight() / 2);

    //未触摸
    dstNoActive = new Rect((int) mWidth / 2 - bitmap2.getWidth() / 2, (int) mHeight / 2 - bitmap2.getHeight() / 2, 
    (int) mWidth / 2 + bitmap2.getWidth() / 2, (int) mHeight / 2 + bitmap2.getHeight() / 2);

测量完后，在onDraw进行绘制，在这过程中，对中心悬浮球，实时测量绘制区域，避免中心球显示不全

dstInner = new Rect((int) posX - minRadius, (int) posY - minRadius, (int) posX + minRadius, (int) posY + minRadius);

通过Matrix矩阵移动及旋转，计算控制外层指针的旋转角度，实现跟随手指方向

    matrix.reset();
    matrix.setTranslate(mWidth / 2 - bitmap1.getWidth() / 2, mHeight / 2 - bitmap1.getHeight() / 2);
    if (tempRad != 0) {
        matrix.preRotate(tempRad + 90, (float) bitmap1.getWidth() / 2, (float) bitmap1.getHeight() / 2);  //要旋转的角度
    } else {
        matrix.preRotate(tempRad);
    }
    if (isStart) {
        canvas.drawBitmap(bitmap1, matrix, null);
    } else {
        canvas.drawBitmap(bitmap2, srcNoActive, dstNoActive, null);
    }
    matrix.reset();

注意判断触摸状态，以及Matrix的reset，否则下次绘制时，图片便会偏移。到此，遥感按钮已经实现

方向判断

上面提到的，公司项目实际使用的遥感分为八个方向，因此需将遥感分为8个区域，这里给出相应的角度，弧度计算，根据个人需求更改。

弧度计算

   /***
 * 得到两点之间的弧度
 */
public float getRad(float px1, float py1, float px2, float py2) {
    float x = px2 - px1;

    float y = py1 - py2;
    //斜边的长
    float z = (float) Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
    float cosAngle = x / z;
    float rad = (float) Math.acos(cosAngle);

    if (py2 < py1) {
        rad = -rad;
    }
    return rad;
}

角度计算

    private float getAngle(float xTouch, float yTouch) {
    RockerCircleX = mWidth / 2;
    RockerCircleY = mHeight / 2;
    return (float) (getRad(RockerCircleX, RockerCircleY, xTouch, yTouch) * 180f / Math.PI);
    }

这里我采用用接口传递，将计算出的角度传递给Activity或者Fragment

    public interface RemoteListener {
    void onRemoteListener(int cmd);
    }

最后

在xml文件中使用即可

如果你有其他思路，可以留言交流

源码

摇杆键盘Demo