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

Question

我是android新手。我发现使用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> 

EDITED

您还可以用帆布帮助一个视图中做到这一点：

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这样的xml属性。此外，由您决定在视图内绘制正确的绘画位置（位于中心角落e.t.c），但我只是写了一个样本来抓住要点。下面是截图，我们到底有：