前言
去年开发项目，需要实现一个遥感按钮，控制公司机器人行走，于是通过自定义SurfaceView实现了该功能，想了解的话，传送门在这自定义View之游戏摇杆键盘实现，但由于传输指令过程中对时间准确度要求较高，调试后发现，自定义绘制过程中时间不稳定，性能较差。于是决定不自定义SurfaceView，改而采用自定义View实现。
最终效果
此版本相对于之前自定义SurfaceView版本，增加角度之间的计算，以及指针的跟随。根据公司需求，方向分为八个，除了常规的上下左右外，还有上左，上右，下左，下右。如图
方向.png
实际开发使用后，性能，稳定性，都优于上一版本，上最后效果图
未触摸状态下
未触摸.jpg
触摸状态下
![]()
触摸状态下.png
触摸状态下.png
实现
效果图中，实现遥感按钮所需图片分为：中心悬浮球，外层图，内部方向背景图，因此，先获图片，注意避免重复实例化
//外层图
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文件中使用即可
<com.by.happydog.view.RemoteControlView
android:id="@+id/remote_view"
android:layout_width="270dp"
android:layout_height="270dp"
android:layout_marginLeft="15dp"
android:layout_marginTop="60dp" />
如果你有其他思路，可以留言交流
