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

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

使用Rect的approch可能太多了，如果你想用代码做这个，这样的事情就可以完成这个工作：

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

Answer 2

这是一个小小的问题，这不是一个完整的答案，但应该有助于掌握这个想法。请根据您的需要进行修改：

  <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 3

这里是完全成熟的答案，非常适合你，

  <?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>