问题
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.
回答1:
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:
来源：https://stackoverflow.com/questions/38532287/how-to-draw-the-below-image-in-android-programatically