Android 自定义View 实现方向盘控件的绘制

个人比较喜欢无人机相关的研究工作，苦于技术比较渣，还没有实力去找一个这样的机会加入无人机研发团队。

最近因为手头工作不是很忙，想起来写点跟无人机有关的东西。

刚开始来深圳面试的时候遇到过一个leader，让我描绘一些怎么实现一个无人机操作界面的绘制。

现在有点时间来把这个主要的控件实现一下。话不多说，先上效果图：

自定义控件需要用到的类主要就是 Paint （画笔类）和 Canvas （画布类）。

1.自定义一个控件，继承自View

public class WheelView extends View {

	public WheelView(Context context) {
		super(context);
		initWheelView();
	}
	
	public WheelView(Context context, AttributeSet attrs) {
	    super(context, attrs);
	    initWheelView();
	}
	
	public WheelView(Context context, AttributeSet attrs, int paramInt) {
        super(context, attrs, paramInt);
        initWheelView();
    }
	
	/** 控件中心点的X坐标 */
	public double centerX = 0.0D;
	/** 控件中心点的Y坐标 */
    public double centerY = 0.0D;
    /** 控件的半径 */
    private int joystickRadius;
    
	/** 整个控件的大圆的画笔 */
	private Paint mainCircle;
	/** 第二个内圆的画笔 */
	private Paint secondaryCircle;
	/** 垂直线的画笔 */
	private Paint verticalLine;
	/** 水平线的画笔 */
    private Paint horizontalLine;


	/**
	 * 初始化画笔的基本样式
	 */
	private void initWheelView() {
		this.mainCircle = new Paint(1);
        this.mainCircle.setColor(Color.BLUE);
        this.mainCircle.setStrokeWidth(3.0f);
        this.mainCircle.setStyle(Paint.Style.STROKE);
        
        this.secondaryCircle = new Paint();
        this.secondaryCircle.setColor(Color.GREEN);
        this.secondaryCircle.setStrokeWidth(3.0f);
        this.secondaryCircle.setStyle(Paint.Style.STROKE);
        
        this.verticalLine = new Paint();
        this.verticalLine.setStrokeWidth(3.0F);
        this.verticalLine.setColor(Color.RED);
        
        this.horizontalLine = new Paint();
        this.horizontalLine.setStrokeWidth(3.0F);
        this.horizontalLine.setColor(Color.BLACK);
        }
}

我打算在这个控件里面画一个大圆，一个小圆，加上纵横坐标线各一根，初始化了四个画笔类。

当然根据自己的需求来，目前只是简单实现。

2.重写View中的测量方法和绘制方法

	/** 
	 * 重写View中的测量方法
	 */
	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		//取宽高中的小值，作为宽高值
		int i = Math.min(measure(widthMeasureSpec), measure(heightMeasureSpec));
		//将宽高值传给父容器，告诉父容器我需要占用多少宽高
        setMeasuredDimension(i, i);
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
	}
	
	/** 测量宽高的方法 */
	private int measure(int paramInt) {
        int i = View.MeasureSpec.getMode(paramInt);
        int j = View.MeasureSpec.getSize(paramInt);
        if (i == 0)//当模式=0时，表示 android:layout_width="wrap_content"
            return 200;//此时设置默认宽高为200
        return j;
    }
	
	/** 重写View中的绘制方法*/
	@Override
	protected void onDraw(Canvas canvas) {
		//获取控件的宽高并取一半作为中心点坐标
		this.centerX = (getWidth() / 2);
        this.centerY = (getHeight() / 2);
        this.joystickRadius = Math.min((int)this.centerX, (int)this.centerY) - 3;
        
//        canvas.drawColor(Color.YELLOW);//画背景色
//        paint.setUnderlineText(true);//设置文字带下划线
        
        //用画布画大圆。参数顺序：圆心X坐标，圆心Y坐标，圆半径，画笔样式
        canvas.drawCircle(
        		(int) this.centerX, 
        		(int) this.centerY,
                this.joystickRadius, 
                this.mainCircle);// paint
        //用画布画里面的小圆。
        canvas.drawCircle(
        		(int) this.centerX, 
        		(int) this.centerY,
                this.joystickRadius / 2, 
                this.secondaryCircle);//secondaryCircle
        //画竖直线
        canvas.drawLine(
        		(float) this.centerX, 
        		(float) (this.centerY - this.joystickRadius + 1),
        		(float) this.centerX,
        		(float) (this.centerY + this.joystickRadius - 1),
        		this.verticalLine);
        //画水平线
        canvas.drawLine(
        		(float) (this.centerX - this.joystickRadius + 1),
        		(float) this.centerY,
        		(float) (this.centerX + this.joystickRadius - 1),
        		(float) this.centerY, 
        		this.horizontalLine);

	}

这样控件就已经基本上算做好了，接下来我们去使用这个控件。

3.控件的引用

在activity_main.xml中部署了两个自定义的控件

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="${relativePackage}.${activityClass}" >
    
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="matc