绘制多个中间有分隔线的矩形答案

【问题标题】：Draw multiple rectangles with dividers in-between绘制多个中间有分隔线的矩形
【发布时间】：2015-05-13 12:14:09
【问题描述】：

我正在尝试绘制下面的图像，但我不确定如何绘制灰色和黑色矩形。我已经完美完成的红色矩形因此将感谢有人告诉我帽子可以实现以下目标：

7 个灰色矩形等宽
6 个黑色矩形，每个 1 像素
以上所有内容都将被绘制在红色矩形之间，以便它看起来完全像吹气的图像。

如果可以的话，请尽量避免在灰色和黑色矩形的 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);
    }

【问题讨论】：

可以很容易地使用LinearLayout结合权重和水平方向来实现。
需要看看它是如何完成的/更喜欢以编程方式完成它（因为我将在我的活动中将它与其他组件一起使用）。请记住，其他矩形和文本将在不久的将来在此之上绘制
通过线性布局很容易实现
请看一下这张图片并告诉我是否同样适用于我想要实现的目标。 link to desired image
您甚至不需要分隔线，只需将背景设置为黑色并在左侧每个矩形之间留出 1-2dp 的边距。也就是说，如果您使用 xml 方式。当您指定需要以编程方式完成时，我会避免发布 xml。

标签： java android android-layout android-activity android-canvas

【解决方案1】：

你使用 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);
    }
}

【讨论】：

非常感谢您的回答。你的被证明是最好的，因为其他 2 会导致“浏览次数过多”警告。你知道解决this other issue?的正确解决方案吗？我花了几个月的时间试图解决这个问题，但没有运气，给出的答案也不能解决问题。

【解决方案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>

【讨论】：

太棒了。像这张图片一样把东西放在上面怎么样？：link to desired image
红色矩形是图片，一个盒子里有多少个红色矩形？？
它需要与您在该问题中看到的图纸完全一样
框 1 和框 7 中的 6 个矩形； 8 个矩形框 2-7
好吧，我今天要走了，但给我一些时间，我会为你做的。

【解决方案3】：

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

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

【讨论】：

你知道解决this other issue programmatically (in Java using canvas not XML)?的正确解决方案吗？我花了几个月的时间试图解决这个问题，但没有运气，给出的答案也不能解决问题。