mercredi 13 mai 2015

Draw multiple rectangles with dividers in-between

I'm trying to draw the image below but I'm not sure as to how to draw the grey and black rectangles. The red rectangles I've done perfectly hence would be grateful for someone to tell me hat can be done to achieve the following:

  • 7 grey rectangles to be the same width
  • 6 black rectangles to be 1px each
  • all of the above to be drawn in between the red rectangles so that it looks exactly like the image blow.

Please try to avoid using pixel numbers for the x position of the grey and black rectangles if you can as I want the drawing to look the same for all screen sizes.

All help would be highly appreciated.

Many thanks in advance.

What I'm trying to achieve enter image description here

What I've achieved so far enter image description here

Project code

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

Aucun commentaire:

Enregistrer un commentaire