如何以编程方式在 android 中绘制下图?
How to draw the below image in android programatically?
我是 android 的新手。我发现使用 Canvas 非常困难。如何在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"
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>
已编辑
您也可以在 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;
}
}
抱歉 bad-performance-code。当然,您需要将 Rects 的所有初始化放在 onMeasure 方法中,并正确处理 andoird xml 属性,如 minHeight 和 e.t.c。此外,您可以在视图中正确定位绘制的绘画(在中心,在角落 e.t.c),但我只是写了一个示例来抓住要点。这是屏幕截图,我们最终得到的是什么:
我是 android 的新手。我发现使用 Canvas 非常困难。如何在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"
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>
已编辑
您也可以在 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;
}
}
抱歉 bad-performance-code。当然,您需要将 Rects 的所有初始化放在 onMeasure 方法中,并正确处理 andoird xml 属性,如 minHeight 和 e.t.c。此外,您可以在视图中正确定位绘制的绘画(在中心,在角落 e.t.c),但我只是写了一个示例来抓住要点。这是屏幕截图,我们最终得到的是什么: