绘制多个矩形，中间有分隔线

Question

我正在尝试绘制下图，但不确定如何绘制灰色和黑色矩形。我完美地完成了红色矩形，因此如果有人告诉我可以完成以下操作，我将不胜感激：

7 个灰色矩形宽度相同
6 个黑色矩形，每个 1px
以上所有内容都绘制在红色矩形之间，使其看起来完全像下面的图像。

请尽量避免在灰色和黑色矩形的 x 位置使用像素编号，因为我希望绘图在所有屏幕尺寸下看起来都一样。

非常感谢所有帮助。

非常感谢。

我想要达到的目标

我目前取得的成就

项目代码

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        //red shapes
        mRedRect0F = new RectF(0, 0, 10, measuredHeight);
        mRedRect1F = new RectF(getWidth() - 10, 0, getWidth(), getHeight());

        //grey shapes
        mGreyRect0F = new RectF(10, 0, getWidth() / 7, measuredHeight);
        mGreyRect1F = new RectF(10, 0, getWidth() / 7 - 20, measuredHeight);
        mGreyRect2F = new RectF(10, 0, getWidth() / 7 - 20, measuredHeight);
        mGreyRect3F = new RectF(10, 0, getWidth() / 7 - 20, measuredHeight);
        mGreyRect4F = new RectF(10, 0, getWidth() / 7 - 20, measuredHeight);
        mGreyRect5F = new RectF(10, 0, getWidth() / 7 - 20, measuredHeight);
        mGreyRect6F = new RectF(10, 0, getWidth() / 7 - 20, measuredHeight);

        //black shapes
        mBlackRect0F = new RectF(0, 0, 1, measuredHeight);
        mBlackRect1F = new RectF(0, 0, 1, measuredHeight);
        mBlackRect2F = new RectF(0, 0, 1, measuredHeight);
        mBlackRect3F = new RectF(0, 0, 1, measuredHeight);
        mBlackRect4F = new RectF(0, 0, 1, measuredHeight);
        mBlackRect5F = new RectF(0, 0, 1, measuredHeight);
        mBlackRect6F = new RectF(0, 0, 1, measuredHeight);


        //draw red shapes
        canvas.drawRect(mRedRect0F, mRedRectPaint);
        canvas.drawRect(mRedRect1F, mRedRectPaint);

        //draw grey shapes
        canvas.drawRect(mGreyRect0F, mGreyRectPaint);
        canvas.drawRect(mGreyRect1F, mGreyRectPaint);
        canvas.drawRect(mGreyRect2F, mGreyRectPaint);
        canvas.drawRect(mGreyRect3F, mGreyRectPaint);
        canvas.drawRect(mGreyRect4F, mGreyRectPaint);
        canvas.drawRect(mGreyRect5F, mGreyRectPaint);
        canvas.drawRect(mGreyRect6F, mGreyRectPaint);

        //draw black shapes
        canvas.drawRect(mBlackRect0F, mGreyRectPaint);
        canvas.drawRect(mBlackRect1F, mGreyRectPaint);
        canvas.drawRect(mBlackRect2F, mGreyRectPaint);
        canvas.drawRect(mBlackRect3F, mGreyRectPaint);
        canvas.drawRect(mBlackRect4F, mGreyRectPaint);
        canvas.drawRect(mBlackRect5F, mGreyRectPaint);
        canvas.drawRect(mBlackRect6F, mGreyRectPaint);
    }

Answer 1

这是一个小样本，这不是一个完整的答案，但应该有助于理解这个想法。请根据您的需要修改：

  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="#FFFFFF"
    android:orientation="horizontal" >

    <View
        android:layout_width="wrap_content"
        android:layout_height="20dp"
        android:layout_weight="2"
        android:background="#DDFF44" />

    <View
        android:layout_width="02dp"
        android:layout_height="20dp"
        android:background="#000000" />

    <View
        android:layout_width="wrap_content"
        android:layout_height="20dp"
        android:layout_weight="2"
        android:background="#DDFF44" />

    <View
        android:layout_width="02dp"
        android:layout_height="20dp"
        android:background="#000000" />

    <View
        android:layout_width="wrap_content"
        android:layout_height="20dp"
        android:layout_weight="2"
        android:background="#DDFF44" />

    <View
        android:layout_width="02dp"
        android:layout_height="20dp"
        android:background="#000000" />

    <View
        android:layout_width="wrap_content"
        android:layout_height="20dp"
        android:layout_weight="2"
        android:background="#DDFF44" />

</LinearLayout>

Answer 2

这里有完整的答案，非常适合您，

  <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:orientation="horizontal" >

    <View
        android:layout_width="5dp"
        android:layout_height="wrap_content"
        android:background="#CC3333" />

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="#808080" >

        <View
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_alignParentLeft="true"
            android:background="@android:color/black" />

        <View
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_centerHorizontal="true"
            android:background="@android:color/black" />

        <View
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_alignParentRight="true"
            android:background="@android:color/black" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:gravity="center"
            android:text="1" />

        <View
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"
            android:background="@android:color/black" />

        <View
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:background="@android:color/black" />

        <View
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:background="@android:color/black" />
    </RelativeLayout>

    <View
        android:layout_width="1dp"
        android:layout_height="wrap_content"
        android:background="#1D1D1D" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="#808080"
        android:gravity="center"
        android:text="1" />

    <View
        android:layout_width="1dp"
        android:layout_height="wrap_content"
        android:background="#1D1D1D" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="#808080"
        android:gravity="center"
        android:text="2" />

    <View
        android:layout_width="1dp"
        android:layout_height="wrap_content"
        android:background="#1D1D1D" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="#808080"
        android:gravity="center"
        android:text="3" />

    <View
        android:layout_width="1dp"
        android:layout_height="wrap_content"
        android:background="#1D1D1D" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="#808080"
        android:gravity="center"
        android:text="4" />

    <View
        android:layout_width="1dp"
        android:layout_height="wrap_content"
        android:background="#1D1D1D" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="#808080"
        android:gravity="center"
        android:text="5" />

    <View
        android:layout_width="1dp"
        android:layout_height="wrap_content"
        android:background="#1D1D1D" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="#808080"
        android:gravity="center"
        android:text="6" />

    <View
        android:layout_width="1dp"
        android:layout_height="wrap_content"
        android:background="#1D1D1D" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="#808080"
        android:gravity="center"
        android:text="7" />

    <View
        android:layout_width="5dp"
        android:layout_height="wrap_content"
        android:background="#CC3333" />

</LinearLayout>

Answer 3

你的 Rect 方法可能太多了，如果你想用代码来做，像这样的东西应该可以完成工作：

public class Rectangle extends View {
    private final Paint mBackPaint = new Paint();
    private final Paint mRedPaint = new Paint();
    private int mSideRectWidth = 10;

    public Rectangle(Context context, AttributeSet attrs) {
        super(context, attrs);
        mBackPaint.setColor(Color.BLACK);
        mRedPaint.setColor(Color.RED);
        mSideRectWidth = context.getResources().getDimensionPixelSize(R.dimen.side_rect_width);
    }

    @Override protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (getWidth() == 0)
            return;

        setBackgroundColor(Color.GRAY);

        //draw black line
        int boxWidth = (getWidth() - 2 * mSideRectWidth) / 7;
        for (int i = 0; i < 7; i++) {
            canvas.drawLine(mSideRectWidth + boxWidth * i, 0, mSideRectWidth + boxWidth * i, getHeight(), mBackPaint);
        }

        //draw left rectangle
        canvas.drawRect(0, 0, mSideRectWidth, getHeight(), mRedPaint);

        //draw right rectangle
        canvas.drawRect(getWidth() - mSideRectWidth, 0, getWidth(), getHeight(), mRedPaint);
    }
}

绘制多个矩形，中间有分隔线

Draw multiple rectangles with dividers in-between

java

android

android-layout

android-canvas

android-activity