如何以编程方式在android中绘制下面的图像？

Question

我是安卓新手。我发现使用 Canvas 非常困难。如何在android中绘制下面的图像？我还想让选中的字母在被触摸时突出显示。

Answer 1

这里是：

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

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="64dp"
        android:background="#000">
        <!-- Main area -->
    </FrameLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="64dp"
        android:layout_gravity="center_horizontal"
        android:orientation="horizontal">

        <View
            android:id="@+id/a"
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:background="#f00"/>

        <View
            android:id="@+id/b"
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:background="#0f0"/>

        <View
            android:id="@+id/c"
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:background="#00f"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="64dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical|right"
        android:orientation="vertical">

        <View
            android:id="@+id/d"
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:background="#ff0"/>

        <View
            android:id="@+id/e"
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:background="#0ff"/>

        <View
            android:id="@+id/f"
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:background="#f0f"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="64dp"
        android:layout_gravity="center_horizontal|bottom"
        android:orientation="horizontal">

        <View
            android:id="@+id/g"
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:background="#900"/>

        <View
            android:id="@+id/h"
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:background="#090"/>

        <View
            android:id="@+id/i"
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:background="#009"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="64dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:orientation="vertical">

        <View
            android:id="@+id/l"
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:background="#990"/>

        <View
            android:id="@+id/k"
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:background="#099"/>

        <View
            android:id="@+id/j"
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:background="#909"/>

    </LinearLayout>

</FrameLayout>

已编辑

您也可以在画布的帮助下在一个视图中执行此操作：

public class GameView extends View {
    private final int[] colors = {
            0xffff0000, 0xff00ff00, 0xff0000ff,
            0xffffff00, 0xff00ffff, 0xffff00ff,
            0xff990000, 0xff009900, 0xff000099,
            0xff999900, 0xff009999, 0xff990099};

    private final Paint[] paints = new Paint[colors.length];
    private Paint mainAreaPaint = new Paint();

    private RectF mainAreaRect;

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

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

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

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    public GameView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        init();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        float squareSize = Math.min(getWidth(), getHeight()) / 7;

        //draw main area
        canvas.drawRect(new RectF(squareSize, squareSize, 6 * squareSize, 6 * squareSize), mainAreaPaint);

        //draw top squares
        canvas.drawRect(new RectF(2 * squareSize, 0, 3 * squareSize, squareSize), paints[0]);
        canvas.drawRect(new RectF(3 * squareSize, 0, 4 * squareSize, squareSize), paints[1]);
        canvas.drawRect(new RectF(4 * squareSize, 0, 5 * squareSize, squareSize), paints[2]);

        //draw right squares
        canvas.drawRect(new RectF(6 * squareSize, 2 * squareSize, 7 * squareSize, 3 * squareSize), paints[3]);
        canvas.drawRect(new RectF(6 * squareSize, 3 * squareSize, 7 * squareSize, 4 * squareSize), paints[4]);
        canvas.drawRect(new RectF(6 * squareSize, 4 * squareSize, 7 * squareSize, 5 * squareSize), paints[5]);

        //draw bottom squares
        canvas.drawRect(new RectF(4 * squareSize, 6 * squareSize, 5 * squareSize, 7 * squareSize), paints[6]);
        canvas.drawRect(new RectF(3 * squareSize, 6 * squareSize, 4 * squareSize, 7 * squareSize), paints[7]);
        canvas.drawRect(new RectF(2 * squareSize, 6 * squareSize, 3 * squareSize, 7 * squareSize), paints[8]);

        //draw left squares
        canvas.drawRect(new RectF(0, 4 * squareSize, squareSize, 5 * squareSize), paints[9]);
        canvas.drawRect(new RectF(0, 3 * squareSize, squareSize, 4 * squareSize), paints[10]);
        canvas.drawRect(new RectF(0, 2 * squareSize, squareSize, 3 * squareSize), paints[11]);
    }

    private void init() {
        for(int i = 0; i < colors.length; i++) {
            paints[i] = initPaint(colors[i]);
        }

        mainAreaPaint = initPaint(0xff000000);
    }

    private Paint initPaint(int color) {
        Paint paint = new Paint();
        paint.setAntiAlias(true);
        paint.setColor(color);
        paint.setStyle(Paint.Style.FILL);
        return paint;
    }
}

对于性能不佳的代码，我们深表歉意。当然，您需要将 Rects 的所有初始化都放在 onMeasure 方法中，并正确处理诸如 minHeight 和 e.t.c 之类的 andoird xml 属性。此外，您可以在视图内（在中心、角落等）编写绘制的绘画的正确位置，但我只是写了一个示例来抓住要点。这是截图，我们到底有什么：