如何在畫布上現有的矩形頂部添加矩形

我想添加一些紅色的矩形內我的現有畫布上的特定框完全像預期結果圖像，但他們根本不出現我的代碼顯示當我部署我的應用程序時當前不期望的結果。我的代碼是在頂行上創建4個矩形，在底行上創建4個矩形，但我只希望將其添加到2-6頂部，但我知道需要爲箱子頂部的紅色矩形添加額外的代碼1 & 7.有人知道我在做什麼錯，怎麼解決這個問題？所有的幫助將不勝感激。如何在畫布上現有的矩形頂部添加矩形

public class RectangleTextView extends View { 
    private final Paint mBlackPaint = new Paint(); 
    private final Paint mRedPaint = new Paint(); 
    private final TextPaint mTextPaint; 

    public RectangleTextView(Context context, AttributeSet attrs) { 
     super(context, attrs); 
     int valueInDp = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 1, getResources().getDisplayMetrics()); 
     int valueInSp = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 20, getResources().getDisplayMetrics()); 

     mRedPaint.setColor(Color.parseColor("#CC3333")); 

     mBlackPaint.setAntiAlias(false); 
     mBlackPaint.setColor(Color.BLACK); 
     mBlackPaint.setStrokeWidth(valueInDp); 
     mBlackPaint.setStyle(Paint.Style.STROKE); 

     mTextPaint = new TextPaint(TextPaint.ANTI_ALIAS_FLAG); 
     mTextPaint.setColor(Color.BLACK); 
     mTextPaint.setTextAlign(Paint.Align.CENTER); 
     mTextPaint.setTextSize(valueInSp); 

     mWindowPaint = new Paint(); 
     mWindowPaint.setColor(Color.parseColor("#CC3333")); 
     mWindowPaint.setStrokeWidth(valueInDp); 
    } 

    private Paint mWindowPaint; 

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

     //initialise red rectangles 
     int w = canvas.getWidth(); 
     int h = canvas.getHeight(); 

     int rectWidth = w/5; 
     int space = w/15; 
     int topRectHeight = getPaddingTop(); 
     int bottomRectHeight = getPaddingBottom(); 


     //draw end rectangles 
     int mSideRectWidth = 10; 
     canvas.drawRect(0, 0, mSideRectWidth, getHeight(), mRedPaint); //draw left end rectangle 
     canvas.drawRect(getWidth() - mSideRectWidth, 0, getWidth(), getHeight(), mRedPaint); //draw right end rectangle 

     //draw grey boxes 
     setBackgroundColor(Color.parseColor("#808080")); 
     int boxWidth = (getWidth() - mSideRectWidth)/7; 

     //draw text views 
     for (int i = 0; i < 7; i++) { 
      canvas.drawText(Integer.toString(i + 1), (i * boxWidth + 10) + (boxWidth/2), ((canvas.getHeight()/2) - ((mTextPaint.descent() + mTextPaint.ascent())/2)), mTextPaint); 
     } 

     //draw black lines 
     for (int i = 1; i < 7; i++) { 
      canvas.drawLine(mSideRectWidth + boxWidth * i, 0, mSideRectWidth + boxWidth * i, getHeight(), mBlackPaint); 
     } 

     //draw red windows 
     for (int i = 0; i < 4; i++) { 
      mWindowPaint.setStyle(Paint.Style.STROKE);//add this 
      int left = i * (rectWidth + space); 
      int right = left + rectWidth; 
      if (i == 1){ 
       mWindowPaint.setStyle(Paint.Style.FILL); // change to this 
      } 

      Rect rect = new Rect(left, 0, right, topRectHeight); 
      canvas.drawRect(rect, mWindowPaint); 
      Rect rect2 = new Rect(left, h - bottomRectHeight, right, h); 
      canvas.drawRect(rect2, mWindowPaint); 
     } 
    } 
}

預期的結果

當前不需要的結果

activity_main.xml中

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" 
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin" 
    android:paddingRight="@dimen/activity_horizontal_margin" 
    android:paddingTop="@dimen/activity_vertical_margin" 
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity"> 

    <com.apptacularapps.car.RectangleTextView 
     android:layout_width="100dp" 
     android:layout_height="45dp" 
     android:paddingTop="10dp" 
     android:paddingBottom="10dp" 
     android:background="#808080" 
     android:gravity="center"/> 

</RelativeLayout>

MainActivity.java

import android.os.Bundle; 
import android.support.v7.app.AppCompatActivity; 

public class MainActivity extends AppCompatActivity { 

    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.activity_main); 
    } 
}

來源

2015-08-16 MacaronLover

你想3x2的小矩形我第一n此和最後一個wihle 4×2的5點中心的呢？矩形會用作按鈕還是小精靈？他們會根據輸入以某種方式改變嗎？ – Emz

你也可以發佈你的活動嗎？我給它一個跑... – Theo

也主要活動？這樣我就可以運行它並解決它.. – Theo

的問題是，你在屏幕尺寸witdh創建只有4個矩形，而不是在數單元尺寸。這裏是代碼：

public class RectangleTextView extends View { 
    private final Paint mBlackPaint = new Paint(); 
    private final Paint mRedPaint = new Paint(); 
    private final TextPaint mTextPaint; 

    public RectangleTextView(Context context, AttributeSet attrs) { 
     super(context, attrs); 
     int valueInDp = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 1, getResources().getDisplayMetrics()); 
     int valueInSp = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 20, getResources().getDisplayMetrics()); 

     mRedPaint.setColor(Color.parseColor("#CC3333")); 

     mBlackPaint.setAntiAlias(false); 
     mBlackPaint.setColor(Color.BLACK); 
     mBlackPaint.setStrokeWidth(valueInDp); 
     mBlackPaint.setStyle(Paint.Style.STROKE); 

     mTextPaint = new TextPaint(TextPaint.ANTI_ALIAS_FLAG); 
     mTextPaint.setColor(Color.BLACK); 
     mTextPaint.setTextAlign(Paint.Align.CENTER); 
     mTextPaint.setTextSize(valueInSp); 

     mWindowPaint = new Paint(); 
     mWindowPaint.setColor(Color.parseColor("#CC3333")); 
     mWindowPaint.setStrokeWidth(valueInDp); 
    } 

    private Paint mWindowPaint; 
    Rect rect = new Rect(); 
    Rect rect2 = new Rect(); 

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

     //initialise red rectangles 
     int w = canvas.getWidth(); 
     int h = canvas.getHeight(); 

     int rectWidth = ((w - 20)/7)/5; 
     int space = ((w - 20)/7)/15; 
     int topRectHeight = getPaddingTop(); 
     int bottomRectHeight = getPaddingBottom(); 


     //draw end rectangles 
     int mSideRectWidth = 10; 
     canvas.drawRect(0, 0, mSideRectWidth, getHeight(), mRedPaint); //draw left end rectangle 
     canvas.drawRect(getWidth() - mSideRectWidth, 0, getWidth(), getHeight(), mRedPaint); //draw right end rectangle 

     //draw grey boxes 
     setBackgroundColor(Color.parseColor("#808080")); 
     int boxWidth = (getWidth() - mSideRectWidth)/7; 

     //draw text views 
     for (int i = 0; i < 7; i++) { 
      canvas.drawText(Integer.toString(i + 1), (i * boxWidth + 10) + (boxWidth/2), ((canvas.getHeight()/2) - ((mTextPaint.descent() + mTextPaint.ascent())/2)), mTextPaint); 
     } 

     //draw black lines 
     for (int i = 1; i < 7; i++) { 
      canvas.drawLine(mSideRectWidth + boxWidth * i, 0, mSideRectWidth + boxWidth * i, getHeight(), mBlackPaint); 
     } 

     //draw red windows 
     for (int index = 0; index < 7; index++) { 

      if (index == 0 || index == 6) { 
       for (int i = 0; i < 3; i++) { 
        mWindowPaint.setStyle(Paint.Style.STROKE);//add this 

        int left = (i * (rectWidth + space)) + (index * boxWidth) + 13 + rectWidth/2 + space/2; 
        int right = left + rectWidth; 

        rect.set(left, 0, right, topRectHeight); 
        canvas.drawRect(rect, mWindowPaint); 

        if (index == 0 && i == 1) { 
         mWindowPaint.setStyle(Paint.Style.FILL); // change to this 
        } 
        rect2.set(left, h - bottomRectHeight, right, h); 
        canvas.drawRect(rect2, mWindowPaint); 

       } 

      } else { 
       for (int i = 0; i < 4; i++) { 
        mWindowPaint.setStyle(Paint.Style.STROKE);//add this 
        int left = (i * (rectWidth + space)) + (index * boxWidth) + 13; 
        int right = left + rectWidth; 

        rect.set(left, 0, right, topRectHeight); 

        canvas.drawRect(rect, mWindowPaint); 

        rect2.set(left, h - bottomRectHeight, right, h); 
        canvas.drawRect(rect2, mWindowPaint); 
       } 
      } 
     } 
    } 
}

這是完整的代碼完全爲我工作。如果您有任何問題或疑問，隨意張貼吧:)

這是我看到他們：

來源

2015-08-27 11:13:14

好的，但由於某些原因，它們仍然沒有出現，並且我還得到了一個警告：「在繪製/佈局操作期間避免對象分配（預先分配和重用）」。請看這個鏈接到我的證據的截圖：http://picpaste.com/Screen_Shot_2015-08-27_at_14.41.13-WKbVDEPA.png – MacaronLover

@MacaronLover我發佈了一個關於我如何看他們的屏幕，即使當我複製時，警告仍然存在你的代碼到我的編輯器，編輯後不是新的：S –

框1,2,6和7不正確。請查看**預期結果**下的圖片。我想讓繪圖看起來完全一樣。 – MacaronLover

您繪製的所有矩形的，但它看起來像你想跳過所有的「奇」的矩形 - 或每第二個矩形...並且一定要改變顏色爲「紅色」 - 這樣的事情：

//draw red windows 
    for (int i = 0; i < 4; i++) { 
     mWindowPaint.setStyle(Paint.Style.STROKE);//add this 
     int left = i * rectWidth; 
     int right = left + rectWidth; 
     if (i == 1){ 
      mWindowPaint.setStyle(Paint.Style.FILL); // change to this 
     } 

     if (i % 2 == 0) { 
      Rect rect = new Rect(left, 0, right, topRectHeight); 
      canvas.drawRect(rect, mRedPaint); 
      Rect rect2 = new Rect(left, h - bottomRectHeight, right, h); 
      canvas.drawRect(rect2, mRedPaint); 
     } 
    } 
}

編輯：

我認爲底部的「填充」的矩形應該是更象：

//draw red windows 
    for (int i = 0; i < 4; i++) { 
     int left = i * rectWidth; 
     int right = left + rectWidth; 

     mWindowPaint.setStyle(Paint.Style.STROKE);//add this 
     if (i % 2 == 0) { 
      Rect rect = new Rect(left, 0, right, topRectHeight); 
      canvas.drawRect(rect, mRedPaint); 
      if (i == 1){ 
       mWindowPaint.setStyle(Paint.Style.FILL); // change to this 
      } 
      Rect rect2 = new Rect(left, h - bottomRectHeight, right, h); 
      canvas.drawRect(rect2, mRedPaint); 
     } 
    } 
}

來源

2015-08-17 18:11:33 Jim

實際的問題是紅色的矩形本身，因爲它們並沒有出現在**預期的結果**圖像上面。 – MacaronLover

我做了一個編輯...你有任何代碼產生一個紅色的矩形？最初我認爲省略這個「新」代碼導致截斷頂部/底部。 – Jim

我的代碼不會產生任何紅色的矩形。在發佈的屏幕截圖中看到的是同樣的東西。 – MacaronLover

試試這個：

public class RectangleTextView extends View { 
    private final Paint mBlackPaint = new Paint(); 
    private final Paint mRedPaint = new Paint(); 
    private final TextPaint mTextPaint; 

    public RectangleTextView(Context context, AttributeSet attrs) { 
     super(context, attrs); 
     int valueInDp = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 1, getResources().getDisplayMetrics()); 
     int valueInSp = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 20, getResources().getDisplayMetrics()); 

     mRedPaint.setColor(Color.parseColor("#CC3333")); 

     mBlackPaint.setAntiAlias(false); 
     mBlackPaint.setColor(Color.BLACK); 
     mBlackPaint.setStrokeWidth(valueInDp); 
     mBlackPaint.setStyle(Paint.Style.STROKE); 

     mTextPaint = new TextPaint(TextPaint.ANTI_ALIAS_FLAG); 
     mTextPaint.setColor(Color.BLACK); 
     mTextPaint.setTextAlign(Paint.Align.CENTER); 
     mTextPaint.setTextSize(valueInSp); 

     mWindowPaint = new Paint(); 
     mWindowPaint.setColor(Color.parseColor("#CC3333")); 
     mWindowPaint.setStrokeWidth(valueInDp); 
    } 

    private Paint mWindowPaint; 

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

     //initialise red rectangles 
     int h = canvas.getHeight(); 


     int topRectHeight = getPaddingTop(); 
     int bottomRectHeight = getPaddingBottom(); 


     //draw end rectangles 
     int mSideRectWidth = 10; 
     canvas.drawRect(0, 0, mSideRectWidth, getHeight(), mRedPaint); //draw left end rectangle 
     canvas.drawRect(getWidth() - mSideRectWidth, 0, getWidth(), getHeight(), mRedPaint); //draw right end rectangle 

     //draw grey boxes 
     setBackgroundColor(Color.parseColor("#808080")); 
     int boxWidth = (getWidth() - mSideRectWidth)/7; 


     int redRectWidth = boxWidth/5; 
     int redRectSpace = redRectWidth/3; 

     //draw text views 
     for (int i = 0; i < 7; i++) { 
      canvas.drawText(Integer.toString(i + 1), (i * boxWidth + 10) + (boxWidth/2), ((canvas.getHeight()/2) - ((mTextPaint.descent() + mTextPaint.ascent())/2)), mTextPaint); 

      int baseStartX = i * boxWidth; 

      //draw red windows 
      for (int j = 0; j < 4; j++) { 
       mWindowPaint.setStyle(Paint.Style.STROKE);//add this 
       int left = mSideRectWidth + baseStartX + (j * (redRectWidth + redRectSpace)); 
       int right = left + redRectWidth; 
       if (j == 1) { 
        mWindowPaint.setStyle(Paint.Style.FILL); // change to this 
       } 

       Rect rect = new Rect(left, 0, right, topRectHeight); 
       canvas.drawRect(rect, mWindowPaint); 
       Rect rect2 = new Rect(left, h - bottomRectHeight, right, h); 
       canvas.drawRect(rect2, mWindowPaint); 
      } 
     } 

     //draw black lines 
     for (int i = 1; i < 7; i++) { 

      int startX = mSideRectWidth + boxWidth * i; 
      int startY = 0; 
      int stopX = mSideRectWidth + boxWidth * i; 
      int stopY = getHeight(); 
      canvas.drawLine(startX, startY, stopX, stopY, mBlackPaint); 

     } 
    } 
}

來源

2015-08-17 18:55:34

出於某種原因，矩形不會顯示在我的模擬器或設備上。也基於你的截圖，這不是我正在尋找的。我只希望框2-6在頂部和底部行上具有四個矩形以及框1和7以在頂部和底部行上具有三個矩形。一個特定的矩形也需要填寫，但我已經得到了代碼。 – MacaronLover

如何在畫布上現有的矩形頂部添加矩形

回答

相關問題