Нарисуйте несколько прямоугольников с разделителями между

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

Ваш Approch с 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); 
    } 
} 

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>