繪製可修改的圖

我想繪製如下圖所示的圖，並且想知道是否有更高效的方法來在XML中執行此操作。以下是我未完成的代碼，但我想聽取其他人的建議和示例。我希望能夠在稍後的階段複製和修改代碼&我希望圖表在所有設備上都能正確顯示（即合適的邊距，填充等）。非常感謝所有有幫助的回覆。繪製可修改的圖

diagram

<LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:orientation="horizontal"> 

    <RelativeLayout 
     android:id="@+id/colored_bar" 
     android:layout_width="10dp" 
     android:layout_height="40dp" 
     android:background="@color/central"/> 

    <RelativeLayout 
     android:layout_width="0dp" 
     android:layout_height="40dp" 
     android:background="@color/grey" 
     android:layout_weight=".25" > 
     <TextView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_centerHorizontal="true" 
      android:layout_centerVertical="true" 
      android:text="1" 
      android:textColor="@color/black"/> 
    </RelativeLayout> 

    <View 
     android:id="@+id/car_separator0" 
     android:layout_width="1dp" 
     android:layout_height="50dp" 
     android:background="@color/black" /> 

    <RelativeLayout 
     android:layout_width="0dp" 
     android:layout_height="40dp" 
     android:background="@color/grey" 
     android:layout_weight=".25" > 
     <TextView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_centerHorizontal="true" 
      android:layout_centerVertical="true" 
      android:text="2" 
      android:textColor="@color/black"/> 
    </RelativeLayout> 

    <View 
     android:id="@+id/car_separator1" 
     android:layout_width="1dp" 
     android:layout_height="50dp" 
     android:background="@color/black" /> 

    <RelativeLayout 
     android:layout_width="0dp" 
     android:layout_height="40dp" 
     android:background="@color/grey" 
     android:layout_weight=".25" > 
     <TextView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_centerHorizontal="true" 
      android:layout_centerVertical="true" 
      android:text="3" 
      android:textColor="@color/black"/> 

     <RelativeLayout 
      android:layout_width="10dp" 
      android:layout_height="10dp" 
      android:background="@color/red" 
      android:layout_weight=".25" 
      android:padding="1.5dp"> 

      <RelativeLayout 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       android:background="@color/grey" 
       android:layout_centerHorizontal="true" 
       android:layout_centerVertical="true"/> 
     </RelativeLayout> 

     <RelativeLayout 
      android:layout_width="15dp" 
      android:layout_height="10dp" 
      android:background="@color/red" 
      android:layout_alignParentLeft="true" 
      android:layout_alignParentTop="true" 
      android:padding="1.5dp"> 

      <RelativeLayout 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       android:background="@color/grey" 
       android:layout_centerHorizontal="true" 
       android:layout_centerVertical="true"/> 
     </RelativeLayout> 



     <RelativeLayout 
      android:layout_width="15dp" 
      android:layout_height="10dp" 
      android:background="@color/red" 
      android:layout_alignParentRight="true" 
      android:layout_alignParentTop="true" 
      android:padding="1.5dp"> 

      <RelativeLayout 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       android:background="@color/grey" 
       android:layout_centerHorizontal="true" 
       android:layout_centerVertical="true"/> 
     </RelativeLayout> 

     <RelativeLayout 
      android:layout_width="15dp" 
      android:layout_height="10dp" 
      android:background="@color/red" 
      android:layout_alignParentBottom="true" 
      android:layout_alignParentLeft="true" 
      android:padding="1.5dp"> 

      <RelativeLayout 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       android:background="@color/grey" 
       android:layout_centerHorizontal="true" 
       android:layout_centerVertical="true"/> 
     </RelativeLayout> 

     <RelativeLayout 
      android:layout_width="15dp" 
      android:layout_height="10dp" 
      android:background="@color/red" 
      android:layout_alignParentBottom="true" 
      android:layout_centerHorizontal="true" 
      android:padding="1.5dp"> 

      <RelativeLayout 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       android:background="@color/grey" 
       android:layout_centerHorizontal="true" 
       android:layout_centerVertical="true"/> 
     </RelativeLayout> 

     <RelativeLayout 
      android:layout_width="15dp" 
      android:layout_height="10dp" 
      android:background="@color/red" 
      android:layout_alignParentBottom="true" 
      android:layout_alignParentRight="true" 
      android:padding="1.5dp"> 

      <RelativeLayout 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       android:background="@color/grey" 
       android:layout_centerHorizontal="true" 
       android:layout_centerVertical="true"/> 
     </RelativeLayout> 
    </RelativeLayout> 

    <View 
     android:id="@+id/car_separator2" 
     android:layout_width="1dp" 
     android:layout_height="50dp" 
     android:background="@color/black" /> 

    <RelativeLayout 
     android:layout_width="0dp" 
     android:layout_height="40dp" 
     android:background="@color/grey" 
     android:layout_weight=".25" > 
     <TextView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_centerHorizontal="true" 
      android:layout_centerVertical="true" 
      android:text="4" 
      android:textColor="@color/black"/> 

     <RelativeLayout 
      android:layout_width="15dp" 
      android:layout_height="10dp" 
      android:background="@color/red" 
      android:layout_alignParentLeft="true" 
      android:padding="1.5dp"> 

      <RelativeLayout 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       android:background="@color/grey" 
       android:layout_centerHorizontal="true" 
       android:layout_centerVertical="true"/> 
     </RelativeLayout> 

     <RelativeLayout 
      android:layout_width="15dp" 
      android:layout_height="10dp" 
      android:background="@color/red" 
      android:layout_centerHorizontal="true" 
      android:padding="1.5dp"> 

      <RelativeLayout 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       android:background="@color/grey" 
       android:layout_centerHorizontal="true" 
       android:layout_centerVertical="true"/> 
     </RelativeLayout> 

     <RelativeLayout 
      android:layout_width="15dp" 
      android:layout_height="10dp" 
      android:background="@color/red" 
      android:layout_alignParentRight="true" 
      android:layout_marginRight="5dp" 
      android:padding="1.5dp"> 

      <RelativeLayout 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       android:background="@color/grey" 
       android:layout_centerHorizontal="true" 
       android:layout_centerVertical="true"/> 
     </RelativeLayout> 

     <RelativeLayout 
      android:layout_width="15dp" 
      android:layout_height="10dp" 
      android:background="@color/red" 
      android:layout_alignParentLeft="true" 
      android:layout_alignParentBottom="true" 
      android:padding="1.5dp"> 

      <RelativeLayout 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       android:background="@color/grey" 
       android:layout_centerHorizontal="true" 
       android:layout_centerVertical="true"/> 
     </RelativeLayout> 

     <RelativeLayout 
      android:layout_width="15dp" 
      android:layout_height="10dp" 
      android:background="@color/red" 
      android:layout_centerHorizontal="true" 
      android:layout_alignParentBottom="true" 
      android:padding="1.5dp"> 

      <RelativeLayout 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       android:background="@color/grey" 
       android:layout_centerHorizontal="true" 
       android:layout_centerVertical="true"/> 
     </RelativeLayout> 

     <RelativeLayout 
      android:layout_width="15dp" 
      android:layout_height="10dp" 
      android:background="@color/red" 
      android:layout_alignParentRight="true" 
      android:layout_alignParentBottom="true" 
      android:layout_marginRight="5dp" 
      android:padding="1.5dp"> 

      <RelativeLayout 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       android:background="@color/grey" 
       android:layout_centerHorizontal="true" 
       android:layout_centerVertical="true"/> 
     </RelativeLayout> 
    </RelativeLayout> 

    <RelativeLayout 
     android:layout_width="10dp" 
     android:layout_height="40dp" 
     android:background="@color/central"/> 

</LinearLayout>

來源

2014-12-31 MacaronLover

作爲一般的規則，你應該儘量不要使用視圖來重載你的xml，它的表現不是很好，所以在這裏編寫自定義視圖是最好和最靈活的解決方案 –

好吧，我如何去使用自定義視圖來創建它？ – MacaronLover

不能超過谷歌：http://developer.android.com/training/custom-views/index.html –

我強烈建議不要在XML繪圖本。相反，這是自定義視圖的完美用法。繪圖應該相當容易。真的

for (int y = 0; y < canvasWidth; y+=yStride) { 
    canvas.drawRect(littleRect, paint); 
}

，最大的痛苦有關手繪這將是觸摸IO，但即使是這樣，是不是太糟糕：例如，小盒子可以簡單，快捷地在繪製循環。

來源

2014-12-31 22:23:15 AedonEtLIRA

'IO'是什麼意思？ – MacaronLover

用戶的觸摸輸入。 'O'就像習慣一樣添加。 – AedonEtLIRA

是否可以在XML中聲明一個canvas元素，然後添加一些java代碼來指定在畫布內繪製什麼？ – MacaronLover

繪製可修改的圖

回答

相關問題