答案 0 :(得分:4)
这是:
<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;
}
}
对于糟糕的性能代码感到抱歉。当然,您需要在onMeasure方法中放置Rects的所有初始化,并正确处理像minHeight和e.t.c这样的xml属性。另外,你可以在视图内部(在中心,在角落e.t.c中)正确定位绘制的疼痛,但我只是写了一个样本来捕捉主要观点。这是截图,我们到底有什么: