从远古的武库走来——android版的可视化数据结构之数组表（视图篇）

2024-01-15 12:49:51

零、前言：先留图镇楼：

数组表效果图

一、先绘制操作界面：

1.自定义View:ArrayView

public class ArrayView extends View {

    //要绘制的数组
    private int[] array;
    //数组的长度
    private int length;
    //小球的半径
    private int radius;
    //小球之间的间距
    private int padding;
    //画笔
    private Paint paint;
    //小球颜色
    private int color;

    public ArrayView(Context context) {
        super(context);
        init();
    }

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

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

    private void init() {
        //初始化画笔
        paint = new Paint();
        paint.setAntiAlias(true);
        paint.setStyle(Paint.Style.FILL);
        //设置小球半径
        radius = 20;
        //设置小球之间的间距
        padding = 10;
        //设置小球颜色
        color = Color.RED;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //绘制数组
        for (int i = 0; i < length; i++) {
            //计算小球的中心坐标
            int x = i * (radius + padding) + radius;
            int y = getHeight() / 2;
            //绘制小球
            paint.setColor(color);
            canvas.drawCircle(x, y, radius, paint);
            //绘制小球中的数字
            paint.setColor(Color.WHITE);
            paint.setTextSize(radius / 2);
            canvas.drawText(String.valueOf(array[i]), x - radius / 4, y + radius / 4, paint);
        }
    }

    //设置要绘制的数组
    public void setArray(int[] array) {
        this.array = array;
        length = array.length;
        invalidate();
    }

    //设置小球的半径
    public void setRadius(int radius) {
        this.radius = radius;
        invalidate();
    }

    //设置小球之间的间距
    public void setPadding(int padding) {
        this.padding = padding;
        invalidate();
    }

    //设置小球的颜色
    public void setColor(int color) {
        this.color = color;
        invalidate();
    }
}

2.把后面要用的画笔准备一下：

private Paint paint;

private void init() {
    //初始化画笔
    paint = new Paint();
    paint.setAntiAlias(true);
    paint.setStyle(Paint.Style.FILL);
}

3.准备小球的信息

private int[] array;
private int length;
private int radius;
private int padding;
private int color;

4.绘制小圆球：

//绘制小球
paint.setColor(color);
canvas.drawCircle(x, y, radius, paint);

//绘制小球中的数字
paint.setColor(Color.WHITE);
paint.setTextSize(radius / 2);
canvas.drawText(String.valueOf(array[i]), x - radius / 4, y + radius / 4, paint);

三、小球的点击事件(区域判断)

@Override
public boolean onTouchEvent(MotionEvent event) {
    //获取手指的坐标
    float x = event.getX();
    float y = event.getY();

    //遍历数组，判断手指是否点击到了某个小球
    for (int i = 0; i < length; i++) {
        //计算小球的中心坐标
        int ballX = i * (radius + padding) + radius;
        int ballY = getHeight() / 2;

        //判断手指是否点击到了小球
        if (Math.sqrt((x - ballX) * (x - ballX) + (y - ballY) * (y - ballY)) <= radius) {
            //点击到了小球，做一些事情...

            return true;
        }
    }

    return super.onTouchEvent(event);
}