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

问题描述

我是新的android。我发现使用画布非常困难。如何在Android中绘制下面的图像？我也希望在触摸时突出显示字母表。

解决方案

这是：

 < 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 background =＃000> 
<！ - 主区 - > 
< / FrameLayout> 
 
< LinearLayout 
 android：layout_width =wrap_content
 android：layout_height =64dp
 android：layout_gravity =center_horizo​​ntal orientation =horizo​​ntal> 
 
< 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_horizo​​ntal | bottom
 android：orientation =horizo​​ntal> 
 
< 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 attrs，defStyleAttr，defStyleRes）;
init（）;
}

@Override
protected void onDraw（Canvas canvas）{
super.onDraw（canvas）;
float squareSize = Math.min（getWidth（），getHeight（））/ 7;

//绘制主区域
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]）;

//绘制正方形
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]）;

//绘制底部正方形
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]）;

//绘制左方块
canvas.drawRect（new RectF（0，4 * squareSize，squareSize，5 * squareSize），paintts [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），但我只是写了一个示例抓住主要点。这里是截图，我们到底有什么：

I am new to android. I'm finding very difficulty in using the Canvas. How to draw the below image in android? I also want to make the alphabet selected highlighted when it is touched.

解决方案

Here it is:

<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

You also can do this within one view with help of canvas:

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;
    }
}

Sorry about bad-performance-code. Of course you need to place all initializations of Rects in onMeasure method and properly handle andoird xml attributes like minHeight and e.t.c. Also it's is up to you to write right positioning of drawed paining inside view (in center, in corner e.t.c), but I just wrote a sample to catch main point. Here is screenshot, what we have in the end:

这篇关于如何在Android中以程序方式绘制下面的图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！