Android自定义View实现角度选择器

下面就来详细讲解一下“Android自定义View实现角度选择器”的完整攻略。

1. 前言

在Android开发中，经常需要自定义控件来满足不同的需求。本文将介绍如何自定义一个角度选择器控件，该控件可以让用户通过手势选择一个角度值。

2. 实现思路

要实现角度选择器，我们可以采用自定义View的方式。具体思路如下：

1. 继承View类，重写onDraw()方法，实现绘制角度选择器的功能。

2. 重写onMeasure()方法，指定控件的宽度和高度。

3. 处理触摸事件，实现手势操作选择角度的功能。

3. 步骤

3.1 继承View类

public class AngleSelectorView extends View {
    //构造函数
    public AngleSelectorView(Context context) {
        super(context);
    }

    public AngleSelectorView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public AngleSelectorView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //在此添加绘制代码
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        //在此添加测量代码
    }
}

3.2 绘制角度选择器

在绘制角度选择器前，我们需要先确定一些基本参数，比如圆的半径、线条的长度、文字的大小等。下面是一个基本的角度选择器的绘制方法：

private void drawAngleSelector(Canvas canvas, int centerX, int centerY, int radius) {
    // 绘制背景
    Paint bgPaint = new Paint();
    bgPaint.setColor(Color.WHITE);
    canvas.drawCircle(centerX, centerY, radius, bgPaint);

    // 绘制选中区域
    Paint selectedPaint = new Paint();
    selectedPaint.setColor(Color.BLUE);
    selectedPaint.setAlpha(128);
    RectF rectF = new RectF(centerX - radius, centerY - radius, centerX + radius, centerY + radius);
    canvas.drawArc(rectF, 0, mAngle, true, selectedPaint);

    // 绘制线条
    Paint linePaint = new Paint();
    linePaint.setColor(Color.BLACK);
    linePaint.setStrokeWidth((float) (mStrokeWidth * 0.8));
    canvas.drawLine(centerX, centerY, centerX + mLineLength, centerY, linePaint);

    // 绘制刻度
    Paint scalePaint = new Paint();
    scalePaint.setColor(Color.BLACK);
    scalePaint.setStrokeWidth(mStrokeWidth);
    canvas.save();
    canvas.translate(centerX, centerY);
    for (int i = 0; i < 360; i += mAnglePerDivision) {
        canvas.drawLine(radius, 0, radius - mScaleLength, 0, scalePaint);
        canvas.rotate(mAnglePerDivision);
    }
    canvas.restore();

    // 绘制指针
    Paint pointerPaint = new Paint();
    pointerPaint.setColor(Color.RED);
    pointerPaint.setStrokeWidth(mStrokeWidth);
    canvas.save();
    canvas.translate(centerX, centerY);
    canvas.rotate(mAngle);
    canvas.drawLine(0, 0, mPointerLength, 0, pointerPaint);
    canvas.restore();

    // 绘制文字
    Paint textPaint = new Paint();
    textPaint.setColor(Color.BLACK);
    textPaint.setTextSize(mTextSize);
    canvas.drawText("0", centerX + radius + mTextSize, centerY + mTextSize, textPaint);
    canvas.drawText("90", centerX - mTextSize / 2, centerY - radius - mTextSize, textPaint);
    canvas.drawText("180", centerX - radius - mTextSize * 2, centerY + mTextSize, textPaint);
    canvas.drawText("270", centerX - mTextSize / 2, centerY + radius + mTextSize * 2, textPaint);
}

在绘制过程中，需要注意一些细节问题，比如：

1. 尽量重用Paint对象，避免创建过多的对象，浪费系统资源。

2. 在绘制文字时，需要考虑文字的大小、位置和方向等因素，确保文字显示正确。

3.3 处理触摸事件

处理触摸事件可以实现手势操作选择角度的功能。在AngleSelectorView类中添加如下代码即可：

@Override
public boolean onTouchEvent(MotionEvent event) {
    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            mLastX = event.getX();
            mLastY = event.getY();
            break;
        case MotionEvent.ACTION_MOVE:
            float x = event.getX();
            float y = event.getY();

            double degree = Math.toDegrees(Math.atan2(y - getHeight() / 2, x - getWidth() / 2));
            mAngle = (float) (degree < 0 ? degree + 360 : degree);
            invalidate();
            break;
        default:
            break;
    }
    return true;
}

在这个示例中，我们通过Math.atan2()方法计算出当前手指在坐标系中的角度，并将该角度赋值给mAngle变量，并调用invalidate()方法请求重绘控件。

3.4 测量控件大小

在绘制控件前，需要先测量控件的大小。我们需要实现onMeasure()方法，来指定控件的宽度和高度。

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    int widthMode = MeasureSpec.getMode(widthMeasureSpec);
    int widthSize = MeasureSpec.getSize(widthMeasureSpec);
    int heightMode = MeasureSpec.getMode(heightMeasureSpec);
    int heightSize = MeasureSpec.getSize(heightMeasureSpec);

    int width;
    int height;

    if (widthMode == MeasureSpec.EXACTLY) {
        width = widthSize;
    } else {
        width = getPaddingLeft() + mRadius * 2 + getPaddingRight();
        if (widthMode == MeasureSpec.AT_MOST) {
            width = Math.min(width, widthSize);
        }
    }

    if (heightMode == MeasureSpec.EXACTLY) {
        height = heightSize;
    } else {
        height = getPaddingTop() + mRadius * 2 + getPaddingBottom();
        if (heightMode == MeasureSpec.AT_MOST) {
            height = Math.min(height, heightSize);
        }
    }

    setMeasuredDimension(width, height);
}

在这个示例中，我们判断了控件宽度和高度的测量模式，分别计算出控件的宽度和高度，最后通过setMeasuredDimension()方法设置控件的大小。

4. 示例

下面是一个使用AngleSelectorView控件的示例：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.example.AngleSelectorView
        android:id="@+id/angle_selector_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/tv_angle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

public class MainActivity extends AppCompatActivity {
    private AngleSelectorView mAngleSelectorView;
    private TextView mTvAngle;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mAngleSelectorView = findViewById(R.id.angle_selector_view);
        mTvAngle = findViewById(R.id.tv_angle);
        mAngleSelectorView.setOnAngleChangeListener(new AngleSelectorView.OnAngleChangeListener() {
            @Override
            public void onAngleChange(float angle) {
                mTvAngle.setText("当前角度：" + angle);
            }
        });
    }
}

在这个示例中，我们通过设置OnAngleChangeListener监听器来监听角度的变化，并根据变化结果更新TextView的显示。

5. 总结

通过本文的介绍，我们了解了如何自定义一个角度选择器控件，并了解了自定义View的基本流程和方法。当然，在实际开发中，我们还需要考虑到更多的因素，比如兼容性、性能等问题。