android - 在 Android 中创建带有可点击点的圆圈

Question

我正在尝试构建一个包含许多最终可点击的点的圆(多达 108 个点来填充圆的边界)。

到目前为止我所做的是像这样创建 108 个 ImageView :

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/circle_1"
        android:src="@drawable/dot_complete"
        android:layout_marginLeft="383dp"
        android:layout_marginTop="214dp"
        />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/circle_2"
        android:src="@drawable/dot_complete"
        android:layout_marginLeft="382dp"
        android:layout_marginTop="214dp"
        />
<!-- And so on all the way up to 108 -->

结果是这样的

但是我怀疑这是一个非常糟糕的方法，所以我的问题是什么是更好的方法，考虑到我需要在每个点上都有 onclickListener 以显示其信息。

谢谢

Answer 1

我有一个类似的类，稍加修改就可以将三种不同类型的 drawables 显示为“点”。您唯一需要做的就是编写 touch 管理。

绘制 108 个点(三种不同类型):

public class DotsView extends View {

    private static final int dots = 108;
    private static final int dotRadius = 20;

    private Bitmap testBitmap1;
    private Bitmap testBitmap2;
    private Bitmap testBitmap3;
    private RectF dotRect;
    private Paint paint;
    private int[] dotsStates = new int[dots];

    public DotsView(Context context) {
        super(context);
        setupView(context);
    }

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

    public DotsView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        setupView(context);
    }

    private void setupView(Context context) {
        setWillNotDraw(false);
        paint = new Paint();
        paint.setAntiAlias(true);

        test();
    }

    private void test() {
        //THIS METHOD IS JUST A TEST THAT CHANGES THE DRAWABLES USED FOR SOME DOTS
        for (int i = 2; i < 20; ++i) {
            dotsStates[i] = 1;
        }
        for (int i = 50; i < 55; ++i) {
            dotsStates[i] = 2;
        }
    }

    @Override
    protected void onAttachedToWindow() {
        super.onAttachedToWindow();
        initBitmaps();
        invalidate();
    }

    @Override
    protected void onDetachedFromWindow() {
        super.onDetachedFromWindow();
        destroyBitmaps();
    }

    private void initBitmaps() {
        testBitmap1 = BitmapFactory.decodeResource(getResources(), R.drawable.test_1);
        testBitmap2 = BitmapFactory.decodeResource(getResources(), R.drawable.test_2);
        testBitmap3 = BitmapFactory.decodeResource(getResources(), R.drawable.test_3);
        dotRect = new RectF(0, 0, dotRadius, dotRadius);
    }

    private boolean isBitmapValid(Bitmap bitmap) {
        return bitmap != null && !bitmap.isRecycled();
    }

    private void destroyBitmaps() {
        if (isBitmapValid(testBitmap1)) {
            testBitmap1.recycle();
            testBitmap1 = null;
        }
        if (isBitmapValid(testBitmap2)) {
            testBitmap2.recycle();
            testBitmap2 = null;
        }
        if (isBitmapValid(testBitmap3)) {
            testBitmap3.recycle();
            testBitmap3 = null;
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (isBitmapValid(testBitmap1) && isBitmapValid(testBitmap2) && isBitmapValid(testBitmap3)) {
            // apply padding to canvas:
            final int width = canvas.getWidth();
            final int height = canvas.getHeight();
            final int squareSide = Math.min(width, height);
            canvas.translate(width / 2f, height / 2f); // moving to the center of the View

            final float outerRadius = squareSide / 2f;
            final float innerRadius = outerRadius - dotRadius;

            final float angleFactor = 360f / dots;

            for (int i = 0; i < dots; ++i) {
                canvas.save(); // creating a "checkpoint"
                canvas.rotate(angleFactor * i);
                canvas.translate(innerRadius, 0); //moving to the edge of the big circle
                canvas.drawBitmap(dotsStates[i] == 0 ?
                                testBitmap1 :
                                dotsStates[i] == 1 ?
                                        testBitmap2 : testBitmap3,
                        null, dotRect, paint);
                canvas.restore(); //restoring a "checkpoint"
            }
        }
    }
}